Sent by Eric A. Limegrover on 30 November 2002 06:06
I've been experimenting with a silly piece of CSS that works well in IE and
Opera, yet dies miserably in Mozilla/Netscape 6.2 and I'm trying to figure
out why exactly.
The CSS:
BODY {
padding: 0; margin: 0;
height: 100%; width: 100%;
background-color: #FFFFFF; color: #000000;
}
#contain {
width: 99.9%; height: 100%;
padding: 0 0 0 0;\
}
#header {
background: #777;
border-bottom: 1px solid #000000;
width: 100%; height: 10%;
}
#content {
width: 100%; height: 80%;
padding-top: 20px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 20px;
}
#footer {
width: 100%; height: 10%;
background: #777;
border-top: 1px solid #000000;
}
The HTML:
<div id="contain">
<div id="header">
<img src="spacer.gif" /> <!-- Keeps the header at a min height -->
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae
lectus. Praesent at lorem eu felis porttitor pharetra.
Maecenas pellentesque varius ipsum. Vestibulum ullamcorper eros ac
justo. Fusce mauris sem, accumsan a, egestas a, auctor
sed, est. Suspendisse rutrum, pede ac aliquam dapibus, sapien
sapien pharetra leo, eget malesuada tortor purus quis libero.
Sed nisl. In sodales ultrices purus. Nulla facilisi. Cras mi.
Curabitur sed nunc vel quam faucibus sollicitudin. Nullam
vestibulum, mi at nonummy dapibus, elit mauris bibendum velit,
get aliquam nulla mauris id mi. Etiam rutrum felis in odio.
Ut vehicula, diam vel pulvinar pellentesque, nisl elit sodales
lectus, vel vulputate dui dolor vitae lacus. Nulla at enim
ut risus fringilla consequat. In hac habitasse platea
dictumst.</p>
</div>
<div id="footer">
<img src="spacer.gif" /> <!-- Keeps the footer at a min height -->
</div>
</div>
Header 10% or height of hated spacer.gif
Content - 80% or larger, depending on Content
footer 10% or height of hated spacer.gif
Mozilla seems to be completely ignoring the height in percent, why is this?
Also, I have a problem with the width as well in both IE, OPERA, and
Mozilla.
_________________________________________________________________
Tired of spam? Get advanced junk mail protection with MSN 8.
http://join.msn.com/?page=features/junkmail
_______________________________________________
css-discuss [EMAIL-REMOVED]]
http://two.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning
