IE adds space to footer in float-based layout

Hello -

I use a floated layout for my website with a shadow on the left and bottom of the body.
Everything displays fine in Firefox and Opera browsers, yet in IE the height of the footer almost doubles.
Furthermore, IE removes the shadow!(I am not sure if this would be a separate thread)

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<body>
<div class="shadowMain">
<div class="shadowBLCorner">
<div class="shadowTRCorner">
<div id="wrapper">
<div id="content">
<h1>Lorem ipsum dolor</h1>
</div>
<div id="rightcontent">ipsum</div>
<div id="footer"><span class="footerimg"><img src="images/tom.jpg"/></span>
<p class="text">©2007</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

css

* {
margin: 0;
padding: 0;
}
body {font: 62.5%/1.6 "Lucida Grande";
background-color:#ffffcc;
text-align: center;
min-width: 760px;
position: relative;
top:30px;
left:10%;
}

#wrapper {background-color: #ffcc99;
width: 720px;
margin: 0 auto;
text-align: left;
}

#content {
width: 420px;
float: left;
}
#rightcontent {
background-color:#ffffcc;
width: 280px;
float: right;

}
#footer {
background-color:#fff;
width:680px;
height:30px;
padding: 0px 20px;
clear: both;

}
.text{position:relative;
width:230px;
height:30px;
top:-32px;
}
#footer .footerimg{position:relative;
left:280px;
top:0;
}
#rightcontent{
padding-top: 20px;
padding-bottom: 20px;
}

#rightcontent * {
padding-left: 20px;
padding-right: 20px;
}

#content * {
padding-right: 20px;
padding-left: 20px;
}

Any advice would be very appreciated!

TYIA
Katrin

IE adds space to footer in float-based layout

Furthermore, IE doesn't display the shadow

KatrinR

DrDoc

KatrinR

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week