Why is there a gap underneath my header in IE?


I just started building a website http://preview.hksenet.hk in HTML5 and CSS.

But, I can't figure out why there is a big gap right under the header in IE. Can anyone help?

By : newcoder

The problem is to do with #searchmenudiv.

You can fix it by:

  • Setting position:relative on #pageheader.
  • Setting position:absolute; top:0; right:0 on #searchmenudiv.

Read more here: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

In general, that's a more robust technique for what you're trying to do than using position:relative; top:-116px. For example, if you ever changed the height of the header, you'd have to update your -116px magic number. With my suggestion, #searchmenudiv will always be at the top right, no matter what.

By : thirtydot

This video can help you solving your question :)
By: admin