Major CSS issue with IE6. Works fine in IE7 & FireFox

[RealityDesign]

I can't for the life of me figure out what IE6 is doing to my CSS...but take a look at this please.

<url removed>

In IE7 and FireFox the tabs on the top look fine. In IE6 the entire thing is broken and I can't figure out why.

I'm usually pretty good about figuring out the oddities in IE6 and fixing my CSS to accommodate them, but this has me stumped.

Anyone have some ideas?

[edited by: encyclo at 2:40 am (utc) on Jan. 25, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[RealityDesign]

Oh, by the way, I've added a temporary white border around the div's that are having issues in IE6 so you can see their edges and locations.

I used the little *html hack so you only see the borders in IE6.

[edited by: RealityDesign at 11:38 pm (utc) on Jan. 24, 2007]

[RealityDesign]

Well, I guess this is kind of a nevermind...but I still don't understand what the deal is with IE6.

I'm slowly going through and using *html to add negative margins only for IE6 and it seems to work.

However, I don't understand why this happens.

This code is great for IE7 and FireFox:

#gradient-left {
height: 7px;
width: 10px;
float: left;
margin-left: 11px;
background: url(http://www.example.com/images/newtabs/gradient-bar-left2.jpg);
}

For IE6, I need to add this:

*html #gradient-left {
margin-left: -11px;
margin-top: -7px;

If I don't add this, the div is pushed 11 pixels TOO FAR to the right and it's about 14 pixels tall and repeats the background image twice. By removing 11 pixels of left margin and 7 pixels of top margin somehow the div is the right size and in the right place.

#*$!?

[edited by: encyclo at 2:40 am (utc) on Jan. 25, 2007]

[cmarshall]

I'm looking at it now.

An admin will shortly nuke your link, so I'd recommend that you figure a way to boil it into a short demo.

Good exercise, that. Isolate the menu code and CSS, and put that in a standalone file, then keep paring it down.

I can tell you right now that your markup isn't delivering your DOCTYPE's promise. The markup is HTML 4 markup, but the DOCTYPE is XHTML 1.0.

[mep00]

I took a look at your code before the url was nuked. I didn't try to debug it because the code was just too much of a mess. If you keep your code clean and valid (including semantic markup, proper doctype, and very few, preferably zero, layout tables) debugging is much, much easier. That said, my guess is that it's a box model issue. If IE6 goes into quirks mode it reverts to the old, wrong, box model (where padding and borders are included in the width).

[mep00]

Another possibility occurred to me: The IE Doubled Float Margin Bug [positioniseverything.net]. Try adding:

#gradient-left {
display: inline;
}

This doesn't preclude the box model issue; it could be both.