DIV menu issue

HTML & CSS
1

Hello everyone,

I need a little help with something i’m working on.

It comes down to a minor (but annoying) incompatibility with IE6.

Basically i have a header DIV (Which is sized to perfectly contain the header image) and below that a content DIV.

In IE7/8 and firefox it works just as i want (both tags snuggled up with each other). Using IE6 an additional 4px are added to the header tag, which creates the impression of a broken page layout.

I work around i found was to set the overflow attribute of the header tag to hidden. This did work, but… I have a menu that sits at the bottom of the header tag and one option on the menu leads to a submenu. With overflow hidden this submenu becomes hidden behind the content DIV. Removing the overflow attribute fixes the hiding menu but reintroduces the IE6 4px gap.

I know that it’s something to do with the header tag.

Is there a IE6 hack?

I’ve spent the last 7 hours looking everywhere for some sort of a fix. To no avail.

Hope someone can help.
Thanks

Tom

2

just a guess: often gaps like this i’ve found come from line-height. so on the heading or whatever it is, the thing above the gap, try:
line-height:1
see if that makes any difference

3

Hi thanks for your reply, i tried what you suggested but it did not help.

Use the below address to see a screen shot just so that you can see what i mean visually.

http://mosharino.atspace.com/IE6-IE7.jpg

you can see the lefthand side (IE6) with the gap and on the righthand side (IE7) no gap!

Thanks

Tom