Bad crack in IE6 nav

HTML & CSS
1

Hi guys,

Would really appreciate your help with something. It’s good old IE6. I’ve got a big crack in my site’s nav (a WordPress theme). I’m doing a conditional stylesheet for IE6, which is fine, but I can’t isolate where this problem is coming from. The wrapper seems to want to push out to the right beyond the top navbar and footer. I’ve played with the width, height:1%, but it just wants to pop back out. It sort of seems the opposite to the box model problem, unless I’m mistaken and it’s related. The theme designer’s CSS code is quite bulky and for my “just get by” CSS skills, that’s also giving me quite a lot of difficulty isolating what’s causing this crack.

There’s lots of other little hairline fractures that I need to fix there :), but this crack is pretty bad, so would really appreciate any thoughts on this.

The site is “flowerdelivery market,com” (no space, period for comma). Thanks.

2

Dankie boet,

I’ll look into the doctype thing, but for now I’ve managed to fix it another way… hacky and ugly, but it will do for the 2% who still use it.

Geniet die dag.

edit: oh didn’t see your new edit! Thanks. Yeah, like I said I’m just going to go with this hacky fix. I’m just stretching out the top nav and footer and dumping the footer a bit lower so it covers the bottom of the container and calling it a day. Dankie weer.

3

I’d like to see a link. *edit nevermind, found it.

Wordpress nowadays tends to have a full and valid doctype, so IE6 shouldn’t be in Quirks Mode.

IE6 shouldn’t need a very big stylesheet, really. Most IE stylesheets I see in modern theme-things are just Haslayout triggers.

*edit is it just because you have a 980px-wide wrapper with inside a 980px wide #access with inside two 980px+12px margin divs inside?

If this were my page, I would debug this by commenting out chunks of stuff that’s inside the wrapper until I don’t see the extra space anymore. Someone somewhere is too wide and is stretching the wrapper wider than you’ve set.

Since you can see the stretch when #access is there (since it’s a different colour), add it back in and remove other stuff until you see it gone, if #access isn’t the cause.

4

Oh BTW, the most relevant CSS to this problem would most likely be the following. I’m just extracting what seems important. It’s quite a big CSS file.


*{margin:0; padding:0}
body{font:62.5% Helvetica,Verdana,Arial,Sans-Serif; color:#858585; background-color:#e0e0e0;background-repeat:repeat-x;background-attachment:fixed;}

div#header{text-align:center; height:8em; background:transparent;}

/*there's a lot of other <ul> styling he's got in this access div, but it's probably not relevant -- my note*/

#access{background:#f1f2f4;display:block;float:left;width:980px;margin:0 auto;text-transform: uppercase;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;}

#wrapper{margin: 0 auto;background-color:#FFF; position:relative; width:980px;height:1%; text-align:left;;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}

#container{margin:0 0 0 12px; padding:2em 1em 1em 1em;width:620px; background-color:#fff; float:left; display:inline; clear:both;}

#content{background-color:#FFF; padding: 0 0 0 3px;overflow:hidden;}

#footer{color:#858585; margin:auto; width:980px; padding:0 0 0.5em 2em; clear:both;  text-align:left; font-size:1.1em; line-height:1.5em;}

#footerlink{color:#bbb;margin-bottom:2em; margin-top:12px; width:980px; height:40px; padding:0; clear:both; text-align:left; font-size:1.1em; -moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px; background-color:#858585;}

div.sidebar{float:right; overflow:hidden; margin:1em 12px -20px 0; padding:1em 1em 1em 0em; width:300px; height:1%; background-color:transparent}

/*this is within the sidebar -- my note*/

div#primary{clear:right}
* html #primary{margin:1em 1em 0 1em; width:300px}

div#secondary{clear:right}
* html #secondary{margin:1em 1em 0 1em}