html - Weird gaps showing up under header when loaded in IE 9

Question

I've been scratching my head looking for a solution to this "common gap problem".

Here's what the page's like in Chrome & how the page is like in IE9 https://dl.dropbox.com/u/3788693/Work/example.jpg

Here's my HTML file: https://dl.dropbox.com/u/3788693/Work/01index.html

I've read lots about using and applying

Setting position:relative on the header block.
Setting position:absolute; top:0; right:0
#header img { display: block }

But it just doesn't seem to show any change in IE. Perhaps i'm applying the wrong things in the wrong place? Anyhow, why is it different in IE in the first place?

Answer 1

In your conditional comment for IE you're using

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

Removing padding-top: 30px from .twoColElsLtHdr #sidebar1 and padding-top: 15px from .twoColElsLtHdr #sidebar1 will take care of the gap you're seeing.