Hello!
I'm having trouble with a test site's design. When I'm opening my html page with IE, without my doctype line, it renders just the way I like it, but not in FF (because of the way it interprets padding, among other things). When I add the doctype line, the page gets squeezed to a height of about 230px. My intention is to set the height to the maximum page height. Here are my files:
* index.html *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<!--[if IE]>
<style type="text/css">
body {
text-align: center;
/* Remove padding: */
padding: 0;
}
#container {
/* Mind the box model in IE.. */
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
<div class="header">
<h1>Logo</h1>
</div>
<div class="nav widget-header ">
<!-- main nav -->
<a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
</div >
<div class="content">
<!--content area-->
<p>content</p>
</div>
<div class="footer">
<!-- footer -->
<p>© Copyright</p>
</div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>
* stylesheet.css *
/* reset */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
sbutton_cl, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.body{
line-height: 1;
text-align: center;
}
.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}
.state-default {
background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
font-size: 1em;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
.container {
border: 1px solid #999999;
margin: 0 auto;
width: 800px;
height: 100%;
background-color:#999999;
}
.header {
border: 1px solid #999999;
height:10%;
margin-top: 0;
padding: 10px;
}
.nav{
border: 1px solid #999999;
height:10%;
margin-top: 2%;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.nav-button {
float: left;
height: 100%;
margin-left: 3px;
overflow: hidden;
width: 150px;
}
.content{
border: 1px solid #999999;
height:60%;
margin-top: 4%;
padding: 10px;
background-color:#FFFFFF;
}
.footer{
border: 1px solid #999999;
height:10%;
margin-top: 4%;
padding: 10px;
text-align: center;
vertical-align: middle;
background-color: #FFFFFF;
}
What I'm ultimately trying to do is a design with fixed width and percentage-based height, where child divs are also percentage-based positioned to their parents ( I believe this is the correct way to deal with different screen resolutions ).
I'll be very grateful if anyone can help me with this.