More CSS woes

[cusimar9]

I thought I had it all working, clearly not

http://www.businessliving.co.uk

The blue 'navigation' div is supposed to be 1px away from the top image, and 1px from the black image beneath it. Also the navigation div should be exactly the same width as the black image.

Firefox displays it right, but IE 6 shows a 3px gap at the top, and the navigation div is 1px wider than the black image.

Relevant code is below:

Now for some reason the breadcrumbs displays correctly (ie no gap between it and the header image), yet if I use the same CSS to display the left div it still insists on having a 3px gap.


#pageHeader {
width: 920px;
height: 144px;
margin: 0px;
padding: 0px;
background: #fff url(images/title.jpg) no-repeat;
}

#leftDiv {
clear: left;
float: left;
color: #fff;
margin: 1px 0 0 0;
padding: 0;
font-size: 9px;
line-height: 0;
width: 200px;
}

#breadcrumbs {
float: right;
margin: 0px;
width: 706px;
padding: 5px 3px 0px 10px;
height: 36px;
background: #fff url(images/breadcrumbs_bg.gif) repeat-x;
}

[scottrickman]

Looks right in IE7 too. Which means I can't see what's wrong!

[cusimar9]

Cough <bump>

[Paul Jr]

I get a 404 on the link.

[cusimar9]

Doh! The website has since gone live, but the problem remains:

http://www.businessliving.co.uk

[Paul Jr]

I screwed around a bit with your CSS, and if you change the left padding value of #navigation ul to 16px instead of 17, that solves the problem of the black box being wider than the blue one. As for the margin at the top, I'm not sure. The only thing I can think of is use some sort of IE hack so IE uses a 1px negative top margin on #leftDiv. I'll try and play around with the code some more.

[cusimar9]

Thanks for the help Paul Jr :)