IE8 Gap between header and body

HTML & CSS
1

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: http://www.mountaincycle.com/sandbox/

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

Help?

Cheers and much thanks.

2

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.

Cheers,

g

3

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

4

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:

5

Hi,
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: