IE6 adding white space when floating images?

[wuffy77]

www.cgenie.net

Can anyone explain a workaround for the way IE's rendering this page?

You'll see the logo looks lovely in FF etc - but in IE there's no transparency (I'll need to JS fix that i guess cos it's a png) but it's also adding white bars below and above the logo? It's like it's not resetting the div heights after I've floated the background image of the logo div.... :mad:

Help!

[BonRouge]

No promises, but try this:
.logo {
background: url(../images/logo.png) no-repeat left;
height:131px;
width:80px;
position:absolute;
left:0;
margin-left:50px;
}

[wuffy77]

hmm looks even worse now! ;)

Your code above should surely position the logo -50 off the left edge of the screen? (see FF).

Interestingly the position:absolute resolves the spacing - so at least I know it's something to do with space added after position:relative in IE6 - have you heard of any bugs like this before?

[wuffy77]

hmm this seems to have fixed it:

.logo {
background: url(../images/logo.png) no-repeat left;
height:131px;
width:80px;
float:left;
position:relative;
top:15px;
left:-50px;
margin-bottom:-40px;
margin-top:-30px;
}

Guess IE6 doesn't collapse overflows properly....

Now I've just got to fix the IE6 centering and the IE png display issues!