Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: not2easy

Message Too Old, No Replies

IE adds space to footer in float-based layout

Furthermore, IE doesn't display the shadow

     
9:19 pm on Jul 6, 2007 (gmt 0)

New User

5+ Year Member

joined:May 19, 2007
posts:40
votes: 0


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">&copy;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

7:43 am on July 9, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Which version of IE are we talking here?
6? 7?

There are vast rendering differences between the two ...

9:29 pm on July 11, 2007 (gmt 0)

New User

5+ Year Member

joined:May 19, 2007
posts:40
votes: 0


Yes. I was talking about IE 6. I just checked in 7 and there the footer displays correctly - yet the shadow is still missing.

Thanks a lot,
Katrin