CSS - Good Book To Learn Fundamentals Of Css (without Ie6 Hacks)?

I've got my hover effects to work in Firefox, Opera , and all...except for IE.

I've done searches for a hack, but can't seem to find anything...

Example

Disregard the layout and dead links, etc.

Any help is appreciated...

Thanks

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

Hi all, a few quick q's:

1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"...

2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.)

3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)?

4. Should I be using the TAN hack for height also? Example:
Code:

* html div { /* This is the Tan hack */
    height: 130px; 
    hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */

5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh.

Thanks in advance!
Cheers!
Micky

I have noticed that sites I make is out of whack on different browsers.

Like the divs using absolute positions would line up on different positions, pop up windows that open to a certain size, open smaller and scrollbars appear when I asked it not to.

Is there like something a person can add, to make sure that a site you build and tested on one platform and one browser, works and looks properly on all browsers?

What are the common bugs that appear and the common hack or fix for it?

Thanks.

I've been messing around with CSS for a little over a month now. I've seen a lot of sites created with CSS and I'm convinced it is the correct way to design web sites.

Although there is a vast amount of resources out on the web, I've become somewhat frustrated with trying to implement CSS. Mainly, it seems that getting CSS to work in both Firefox and IE requires you to sell your soul to Lucifer and devote your life to the black arts.

So, I want to just stop trying to write pages and get a good book on CSS. There are tons of them out there which is making it hard for me to decide. I usually go with the O'Reilly book's but the CSS one has bad reviews on Amazon.

I'm just looking for some input on what books you guys would suggest.

Thanks in advance.

I have some expereince with Style Sheets but would like a more in depth knowledge of CSS. Do any of you have any good book recommendations that cover CSS?

Can anyone recommend a reference book. I have the Jeffrey Zelman book but would like something that covers a bit more detail. Is the Eric Meyer on CSS any good?


cheers,
steven.

I've been designing web pages for 7 years now, using layout tables. I realize that it's time to let go with them now.

Do you recommend any good book about this? I've red Ben Henick's article on Alistapart (http://alistapart.com/articles/12lessonsCSSandstandards). Do you know if he has written any books about the topic too?

Hi all,

Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS.

Thanks for any help

Hi, I want to learn how to make a gray box with text in it ether it's news or about nothing and also how can I add a image of a bar? Even how do I add in text into the image so it says the subject? I want it to look like some thing like there site. www.quake3world.org with those types of boxes on the left. I will use that as a example.

Thank, you.

Hello,

This one looks good on IE7/FF but not with IE6

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#picture {
	position:relative;
	float:left;
	left:6px;
	color:#ff0000;
	top:15px;
}
.name_txt {
	position:relative;
	margin-bottom:4px;
	float:left;
	font-size:10px;
	width:235px
}	
</style>
</head>

<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>

Hello,

This one doesn't look good on FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
	font-size:10px;
	top:3px;
	width:100%;
}
#layer ul {
	float:left;
	list-style-type:none;
	height:12px	
}
#layer li {
	display:inline;	
	height:12px	
}
#layer a {
	text-decoration:none;
	border:1px 1px solid #990000;
	color:#990000;	
	background-color:#CCCCCC;
	padding:20px;
	height:12px	
}
</style>
</head>

<body>
		  <div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>

I've mucked up my css a bit. Works great in IE but not in FireFox.

Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site.

Causeway Lighitng

And here is the css (it the nav2 portion that controls the top menu)

Code:

#nav, #nav ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 100%; 
	} 

#nav2, #nav2 ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 135px; 
	}
	
#nav li, #nav {
margin:0;
padding:0;
}

#nav2 li, #nav2 {
margin:auto;
padding:0;
}

#nav ul li {
   position: relative;
   width:130px;
   line-height:14px;
   padding:0;
    margin:0;
   }
   
 #nav li ul {
 position: absolute;
 margin-left:134px;
 margin-top:-24px;
 display: none; 
 }
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
	
	display: block;
	text-decoration: none; /* removes the underline */
	color: #777;
	background: #fff; /* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	}
	
#nav2 li a {
	display: block;
	text-decoration: none;
	/* removes the underline */
	color: #777;
	background: #FFCC00;
	/* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	text-align : center;
	}	

/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
	height: 1%;
	margin-left : auto;
}
/* End */

#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */ 

#nav2, #nav2 ul {
	width: 100%;
}

#nav2 li {
	float:left; /* makes the main nav horizontal */
	width:80px; /* Width of Menu Items */
	margin:0;
	}
	
#nav2 li ul {
	position: absolute; /* positions and sets width of submenus */
	display: none;
	float:left;
	margin:0;
	}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */

		 

Ok, firstly, here is the link: www.mstrgaming.com/stars

Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it.

Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't.

I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know .

Thanks!

Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well