IE8 Gap between header and body

Hi All,

I really hope someone can solve this as I have looked everywhere and tried most things I found.

I have a gap appearing between the head and body of the site we’re working on. It only appears in IE8. I have looked at everything I can and can not for the life of me work out what’s causing it. Maybe I’m just a little dim :rolleyes:

Here’s the site:

If you look in IE8 you’ll notice the gap between the two elements.


Cheers and much thanks.

Damn! Thanks so much Paul, that was doing my head in and the fix is doing similar things :slight_smile:

As they say, the simple things in life are often the best.



BTW Paul, any idea what causes a ‘margin collapse’? It would be good to know :slight_smile:

The rules are explained in detail here but IE is a little buggy at times hence the differences.

When there is nothing between a parent and child the margin on a child element can collapse to become the parents margin instead and instead of moving the child the parent is moved instead.

Usually adding a 1px padding or border will stop the collapse.

IE can be buggy so you just have to watch out for it and test to see if there is an issue.:wink:

Looks like margin collapse so change the margin-top to padding-top here:

 .bikenav {     margin-left: 16px;     [B]padding-top: 21px;[/B]     font-family: Verdana, Helvetica, Arial, sans-serif; }  

That should fix it with any luck :slight_smile: