homepage Welcome to WebmasterWorld Guest from 184.73.40.21
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE adds space to footer in float-based layout
Furthermore, IE doesn't display the shadow
KatrinR

5+ Year Member



 
Msg#: 3388088 posted 9:19 pm on Jul 6, 2007 (gmt 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

 

DrDoc

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



 
Msg#: 3388088 posted 7:43 am on Jul 9, 2007 (gmt 0)

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

There are vast rendering differences between the two ...

KatrinR

5+ Year Member



 
Msg#: 3388088 posted 9:29 pm on Jul 11, 2007 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved