DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
CSS:
html,body {min-height:100%;height:100%;}
.siteContent {position:relative;min-height:100%;_height:100%;}/*IE hack*/
.pageContent {padding:0 0 25px;}
.footer {position:absolute;bottom:0;width:100%;height:25px;}
HTML:
<html>
<body>
<div class="siteContent">
<div class="pageContent"></div>
<div class="footer"></div>
</div>
</body>
</html>
BROWSERS:
IE6, IE7, IE8, FF2, FF3
FLOATS:
yes
One post inspired me to experiment with font-size and line-height. Here is the result of a few hours tests in IE6 and FF.
My result
Here is the CSS:
* {font-family:Arial,sans-serif;}
html,body{text-align:center;}
div {position:relative;
width:300px;
margin:130px auto 0;padding:15px 0;
background:black;
}
div p {position:relative;
min-height:22px;height:auto!important;height:22px;
margin:0 -14px;padding:22px;
border:solid 15px black;border-width:0 15px;
background:white;
}
em.absTL,
em.absTR,
em.absBL,
em.absBR {position:absolute;
width:30px;height:30px;line-height:32px;
padding:0;
font-size:120px;
text-indent:-6px;
color:black;
overflow:hidden;
}
em.absTL{top:0;left:-14px;}
em.absTR{top:0;right:-14px;}
em.absBL{bottom:0;left:-14px;}
em.absBR{bottom:0;right:-14px;}
And the HTML:
<div>
<em class="absTL">•</em>
<em class="absTR">•</em>
<em class="absBL">•</em>
<em class="absBR">•</em>
<p>
Some dynamic content here <br />
Some dynamic content here<br />
</p>
</div>
Preview:
Specific notes
1. div {vertical-align:top;} - IE6 don’t like it. The Internet Explorer 6 loses the em’s content;
2. bold em-s - IE6 again don’t like it. The line-height is quite different from FF;
3. other browsers - it works fine at least on IE6/7/8, FF3, Chrome, Opera, Safari.
The post
Thanks to Stu Nicholls and his post Curved Corners