Why is this site having that margin above the header when I open it in IE7?

Question

Everything is OK in Firefox, Chrome and IE8.

This is the site: http://ada.kiexpro.com/html/index.html

Thanks in advance!

Answer 1

I would put the formfloat div inside the header div and position it absolutely.

Another option without changing too much would be to put the formfloat div inside your header after the menu div and adjust the top property.

Answer 2

This is for div with id formfloat. This div's style is float:right;height:60px. Therefore it puts the 60px above the header div.

Reason: Now there is difference how IE 7 handles float. So, let say you have a div(which doesn't have any height specified), which doesn't contain any element other than a submit button. Now give float left or right style to the button. So, what will happen to parent div? The parent div will expand its height to accommodate the button. But in mozilla the parent div's height will be zero. It will just ignore the float button and will not make any space for that.

So, to solve why don't you put the div#formfloat in the div#header itself.