I may know what this is. Is this the staircase bug?
Whenever I make a menu with floated anchors, I also mention a state for the li’s.
It doesn’t change anything, except that IE is suddenly happy.
BTW I dunno what you’re using the wrapping div for, so I’m doing your code as if we just had <ul id=“nav”>
#nav {
clear:both;
margin: 0 20px;
padding: 0px;
list-style: none;
border: solid #333;
border-thickness: 1px 0 2px 0;
overflow:hidden; /*encloses floats everyone but IE6*/
}
* html #nav {height: 1%; overflow: visible;} /*float enclosement IE6*/
[b]#nav li {
display: inline; /*setting a state for the li... I'm not sure if this was the reason agarcia recommended to do this, but it's a good idea anyway!*/
}[/b]
#nav li a {
float: left;
display:inline; ,-- only needed if there are side margins on these anchors*/
padding: 0 10px;
color:#333;
line-height: 170%;
text-decoration:none;
}
/*don't forget focus!!*/
#nav [b]a:focus[/b], #nav a:hover {
background-color: #ccc;
}
#nav li a.current {
color: #fff;
background: #666;
cursor:default; /*clever!*/
}
If the problem’s not the staircase bug then I’ll betcha it will go away with this:
#mainContent {
[b]clear: both;[/b]
position: relative;
margin: 30px 30px 0px;
[b]set haslayout... [/b]
}
/*where haslayout can be a width, or setting overflow to something other than visible, or something for IE... */
You did have zoom:1 on the menu and while that could do it as well, I took it out only because often within the constraints of the design, you can trigger haslayout in a “legal” way… but if you don’t care about a validation error (it’s only an error because the validator doesn’t recognise proprietary stuff, so it’s safe to use) then zoom: 1 on #mainContent may work fine.
So I’m thinking either staircase bug OR the mainContent not having layout and not actually clearing the floats (even though the floats should be enclosed by the menu anyway but this is IE we’re talking about).
I’ve searched quite extensively for fixes. The only thing I’ve found which seems to relate to this problem is an article from 2006 advising to change the DOCTYPE to HTML 4.01 Strict. I currently have it set at XHTML 1.0 Transitional. I’m quite new to HTML and am a bit wary of doing this.
There really should be no difference between the two, except that Strict is a bazillion times more awesome than Transitional in either doctype.
There’s no real good reason to use XHTML anything in your case but you can keep it if you like the /> on stuff. IE shouldn’t change behaviour between an XHTML doctype and an HTML4 doctype, so long as they are both properly written (not creating Quirks Mode).
Transitional doctypes (of either kind) have the disadvantage of letting you use bad (deprecated) code without the validator slapping your wrist with a stick like the nuns used to do. : )
