[RESOLVED] Gap between header and content in IE6 Win

[Flying Monkey]

Page works in Firefox (Mac + Win), Safari, Netscape (Mac + Win), Opera (Mac) IE7 (Win) but has this ugly gap between header and content container in IE6. I have tried putting vertical-align: bottom; on header div and img tag, have changed all relevant margins to zero, etc. and am really running out of ideas.

Any help much appreciated. I've attached a screen shot of what it looks like in IE6 (from Virtual PC 7 on Mac OS 10.4.10)

Page is up at:
http://www.flyingmonkey.com.au/fe/ala.htm

and CSS is at:
http://www.flyingmonkey.com.au/fe/css/ala.css

Thanks in advance
Monkeyman

[Centauri]

Try adding img { display: block; } to your css

[Flying Monkey]

Thanks for your quick response, Centauri, but sadly it remains the same.

[Flying Monkey]

Actually, img { display: block; } seems to interfere with my banner image floating to the right, so I've remoced it again.

[Centauri]

Didn't have access to my machine with IE AIS toolbar on it previously - had had a look now, and #header needs HasLayout invoked :
#header {
margin-top: 10px;
width: 100%;
}

[Flying Monkey]

Thanks Centauri, you're the best! Its been bug after bug for me with this layout - jumping left column, gaps in the list nav, png alpha issues in IE (actually all my issues have been with IE). But I really like the fluidity of the layout and how it appears balanced on widely varying screen sizes so its worth the effort. I hadn't heard of the HasLayout thing before today. Do you know any good URLs that explain it?

[Centauri]

Here (http://www.sitepoint.com/forums/showpost.php?p=2041209&postcount=24) is an explaination by Paul O'Brien

[Flying Monkey]

Thanks again, Centauri!

[sticks464]

Take a look at the attachment and see if it is what you want.

[Flying Monkey]

Hi Sticks, I'm not sure what you've attached there? I'm only seeing half the page and it doesn't look fluid to me.

[sticks464]

That's because I forgot to attach the images I changed. I made the top logo one image and the top left col one image. But you have it solved which is the best thing. I attached the images if you want to look.

[Flying Monkey]

Thanks for that, but its not really what I'm after.

The thing I have been trying to achieve is how the banner images overlap and expand to fill the size of the users browser window and also the centre column expands and contracts in a similar way.

Its now all working properly in IE but i have found a problem in FF and Netscape of the columns dropping down - but I've started a new thread seeing as this one is labelled resolved.