CSS Spacing Issue in IE6

CSS spacing and floating issue

[mediamole]

I'm developing a website that has a ABSOLUTE position navigation contained within a container set to relative. The navigation looks ok in IE7, Firefox etc.. However, when viewed in IE6 the navigation has about 2 -3 px spacing between the navigation and the tabs and I cant see why IE6 would do this.

Has anyone come across this problem before?

The demo site can be viewed here:

<url removed>

and the CSS for the top half is as follows:

/* Start of branding and navigation styling */

#branding { margin:8px auto 0 auto; width:960px; text-align:left; height:95px; }
#branding-logo { width:229px; float:left; text-align:left; height:95px; }
#navigation { width:726px; float:left; height:95px;
background-image: url('cart-bk.gif');
background-repeat:no-repeat;
background-position:top right;
position:relative;
}

#globalnav { position:absolute; left:0; top:61px; height:34px;}

#cartlnk { width:160px; float:right; color:#000; background-color:transparent; }

#cartlnk p { padding:0 0 5px 0; margin:0; }

#cartlnk p a { color:#C42206; background-color:transparent;
text-decoration:underline;
padding-right:4px; border-right:solid #C42206 1px;
font-weight:bold;
}

#cartlnk p a:hover { text-decoration:none; }

#cartlnk p a.nobord { padding-right:0; border-right:none; padding-left:3px; }

[edited by: encyclo at 6:46 pm (utc) on Oct. 8, 2007]
[edit reason] no URLs thanks, see posting guidelines [/edit]

[mediamole]

Having failed to resolve the issue, I then changed the CSS to something basic by removing the positioning, yet still the problem remained so I changed the CSS to the following, but the CSS bug in IE6 still remains. Can anyone spot it?

/* Start of branding and navigation styling */

#branding { margin:0 auto; width:955px; text-align:left;
background-color:#fff; background-image: url('cart-background.gif');
background-repeat:no-repeat;
background-position:top right;

}
#branding-logo { width:236px; float:left; text-align:left; height:97px; }
#navigation { width:719px; float:right; text-align:left; }

#globalnav { width:719px; height:35px; }

#globalnav p { margin:0; padding:0; }

#cartlnk { width:140px; height:62px; color:#000;
background-color:transparent; padding-left:515px; }

#cartlnk p { padding:3px 0; margin:0; }

#cartlnk p a { color:#C42206; background-color:transparent;
text-decoration:underline;
padding-right:4px; border-right:solid #C42206 1px;
font-weight:bold;
}

#cartlnk p a:hover { text-decoration:none; }

#cartlnk p a.nobord { padding-right:0; border-right:none; padding-left:3px; }

[mediamole]

Ok. So if I add:

<!--[if IE 6]>
<style type="text/css">
#branding { margin-bottom:-2px; }
</style>
<![endif]-->

I can resolve the problem in IE6 - but it still puzzles me to where this space is coming from. Has anyone come across this problem before? and no how I can get it to work without the IE6 if statement?

[SuzyUK]

Welcome MM, and please don't post specifics as they will get removed as per the WebmasterWorld TOS

yes this is highly possible with IE6 and if you care to test below this - IE6 in quirks mode or even IE5.5 you will likely find further differences.

There is and never has been any rhyme nor reason as to why IE interpret the recommendations differently to others but there is/was always the understanding that they can because there are no rules, only GUIDELINES

so your best bet is a conditional to filter for IE versions, and if you're very lucky then you shan't need one for IE7+ (but I would not hold my breath on that ;))