I have a design using tables (don't judge me) and css that displays correctly in FF3, but when I load it in IE7 to test compatibility my header and footer are incorrect heights and so do not display properly.
Index Page:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="wrapper" cellpadding="0" cellspacing="0">
<!-- Header -->
<tr>
<td class="header" colspan="2"><img src="images/banner.gif" alt="banner" title="banner" /></td>
</tr>
<!-- End Header -->
<tr>
<td class="sidebar">
<!-- Sidebar -->
<table cellpadding="0" cellspacing="0">
<tr>
<td>Side bar link</td>
</tr>
<tr>
<td>Side bar link</td>
</tr>
<tr>
<td>Side bar link</td>
</tr>
<tr>
<td>Side bar link</td>
</tr>
<tr>
<td>Side bar link</td>
</tr>
</table>
<!-- End Sidebar -->
</td>
<td class="content">
<table cellspacing="0" cellpadding="0">
<tr>
<td width="20%" rowspan="4"> </td>
<td width="56%"> </td>
<td width="20%" rowspan="4"> </td>
</tr>
<tr>
<td align="right"><h1>Page Header</h1></td>
</tr>
<tr>
<td align="left"><h2>Sub-header</h2>
<p>Page content goes herePage content goes herePage content goes herePage content goes herePage content goes herePage content goes here</p>
<p> </p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table class="footertext" cellspacing="0" cellpadding="0">
<tr>
<td class="smallfont"> Copyright © 2008.</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CSS:
/* Global Styles */
body, html, #wrapper {
color: #FFFFFF;
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #709DE8;
font-size: 18px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-decoration: none;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
td {
color: #FFFFFF;
}
/* Section specific styles */
.header {
background-image:url(images/headerbg.gif);
padding: 10px 10px;
height: 10%;
border:none;
margin:0;
}
#wrapper {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 100%;
}
.sidebar {
width: 15%;
vertical-align: top;
background-image:url(images/sidebarbg.gif);
padding: 20px 20px;
}
.content {
vertical-align: top;
background-image:url(images/mainbg.gif);
}
.footer {
vertical-align: middle;
background-image: url(images/footerbg.gif);
background-repeat:repeat-x;
height: 5%;
}
.footertext {
width: 100%;
border-style: none;
}
.smallfont {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
padding: 5px 5px;
}
When I delete the 100% in the body, html style, it works, but I want to page to display as 100% of the browser window.
I've uploaded the page here: http://www.aviationdownunder.net/test2/ so you can view in the different browsers.
I'd appreciate any help, besides telling me to not use tables, I know I'm not meant to but I don't feel its powerful enough to make the whole design yet.