Forum Moderators: not2easy
Can anyone enlighten me on why something happens? I'm using the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* resets all elements */
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a, img, hr, blockquote {
margin: 0px;
padding: 0px;
border: none;
}
html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
line-height: 1.3em;
}
#container {
height: 50%;
}
#content {
min-height: 100%;
margin-bottom: -30px;
background-color:#00CC99;
}
* html #content { /* star hack for explorer only */
height: 100%;
}
#footerSpacer {
height: 40px;
}
#footer {
height: 30px;
background-color: #009999;
position: relative;
}
</style>
</head><body>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin congue odio eget turpis. Donec sollicitudin, pede ac sodales adipiscing, nulla erat consequat erat, nec ultricies ipsum urna non dolor. Sed ut erat. In hac habitasse platea dictumst. In leo. Fusce consectetuer mauris nec sapien. Pellentesque dignissim ornare elit. Vivamus urna nibh, feugiat quis, mattis nec, feugiat eu, nibh. Phasellus vitae leo. Nam imperdiet tellus et magna. Maecenas nisi.</p>
<p>Nulla commodo dolor at quam. Curabitur sollicitudin est eu libero. Ut vel diam. Sed iaculis. Aliquam eget sapien non nisl pharetra tincidunt. Nunc risus orci, congue ac, tempor eu, congue eget, lorem. Nulla luctus pretium augue. Vivamus dictum. Fusce laoreet velit sed mi. Nulla eget sapien. Donec rhoncus blandit lorem. Aliquam quis arcu ut ipsum consectetuer semper. Etiam eros quam, pulvinar nec, commodo at, consectetuer et, ligula.</p>
<div id="footerSpacer"></div>
</div>
<p id="footer">This is the footer</p>
</div>
</body>
</html>
Now, this works fine, but if I change the value of the container from:
#container {
height: 50%;
}
to:
#container {
min-height: 50%;
}
Why does the box collapse? Surely in this case min-height, and height should render the same, although the min-height should allow for expansion, right?
Am I missing something?
Thanks
Lee
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a, img, hr, blockquote {
margin: 0px;
padding: 0px;
border: none;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
Once you do this, then you just apply your margins etc as you need them down the styles sheet.
another thing, a trick for the font sizing, and this takes care of your differences in sizing with the different browsers is to set your font to 100.01% like this:
html, body {
font-size: 100.01%;
}
Also try to google to see if your question has been asked before, and make sure you validate your code.
[greywyvern.com...]
