IE hates me!

[jamie_g]

The link: http://www.jamiegerrard.com/carpentersUnion/

As you can see there is a block of whitespace when viewing in IE. Now when it's viewed in Firefox it renders fine.

I thought it may have to do with IE rendering of a margin but I think I've tried everything, any ideas?

CSS

html, body {margin:6px 0 0 0; padding:0;}
img {border:0; margin:0; padding:0;}

#container {width:701px; margin:0 auto; padding:0px; background:url(../images/common/bgContainer.gif) repeat-y;}

#containerTop {width:701px; height:6px; background:url(../images/common/bgTop.gif) no-repeat top; clear:both;}
#containerBottom {width:701px; height:6px; background:url(../images/common/bgBottom.gif) no-repeat bottom;}

#content {width:556px;}
#header {width:556px; height:84px; float:left;}
#nav {width:141px; float:right;}

HTML > DIV's

<div id="container">
	<div id="containerTop"></div>
	<div id="nav"><img src="_assets/images/common/testInfoLink.gif" /></div>
	<div id="header"><img src="_assets/images/common/testLogo.gif" /></div>
	<div id="content"></div>
	<div id="containerBottom"></div>
</div>

[Paul O'B]

HI,

Ie won't render an element less thatn the current font size/line-height so you simply have to set overflow:hidden.

html, body {margin:0; padding:0;}
body {margin:6px 0 0 0;}
#containerTop {width:701px; height:6px; background:url(_assets/images/common/bgTop.gif) no-repeat top;overflow:hidden;}

You may also want to change your body margins as I have code above otherwise some browsers will give you double what you want as you get 6px on html and 6px on body = 12px.

Hope that helps.

Paul

[jamie_g]

Thanks, Paul.

I thought I tried this.. <sigh>.

-jamie