Forum Moderators: open
In attempting to put together a website I seem to have stumbled upon a rendering bug in Internet Explorer 6 (and presumably earlier). The page in question renders fine in Firefox 1.5, Safari and Opera 9 which display no vertical scroll bar, however IE renders the page longer than it should and produces a vertical scroll bar. I have no idea what’s causing the problem in IE, or how to fix it, hopefully somebody out there can advise, HTML with CSS is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Main</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon">
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
background-image: url(/images/background.jpg);
background-repeat: repeat;
}table#zcontainer {
height: 100%;
width: 780px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
background-color: #FFFFFF;
margin: 0 auto;
text-align: left;
}.zmenu {
text-align:center;
width:100%;
table-layout:fixed;
}-->
</style>
</head>
<body>
<table id="zcontainer" cellpadding=0 cellspacing=0 >
<tr >
<td valign="top" style="padding-top:13px;"><div align="center"> <img src="/images/banner.gif" alt="Banner" width="752" height="62"><br>
<br>
<table class="zmenu" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
</tr>
</table>
<img src="/images/line_top.jpg" width="780" height="16" alt=""> </div></td>
</tr>
<tr valign="top">
<td style=" height:100%;" ><span style="padding-left:4%"> Now serving <?php echo (getenv("REMOTE_ADDR") . ".");?> </span><br>
<br>
<table width="95%" align="center" cellpadding="3" cellspacing="1" bgcolor="#CCD4DD">
<tr>
<td width="17%" rowspan="3" valign="top" bgcolor="#FFFFFF">
<div align="center"><img src="/images/categories/Announcement.gif" alt="Announcement"></div></td>
<td width="83%" bgcolor="#E7F4F5"><font color="#467b99" size="2"><strong>test</strong></font></td>
</tr>
<tr>
<td bgcolor="#F2FDFF"><strong>Announcement</strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">by <a href="mailto:">admin</a> @ 7:40 PM - Monday, July 17 2006<br></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><br>
<table width="98%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>test 123 </td>
</tr>
</table>
<br></td>
</tr>
</table>
<br>
<br>
</td>
</tr>
<tr>
<td><div align="center"> advert<br>
<img src="/images/line_bottom.jpg" width="780" height="16" alt="" ></div></td>
</tr>
<tr>
<td height="46" align="center" style="color:#A8A8A8"><table class="zmenu" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
<td style="width:3px;">¦</td>
<td><a href="/index.php">Link</a></td>
</tr>
</table>
<br>
© Copyright 2001- 2006<br>
All rights Reserved.</td>
</tr>
</table>
</body>
</html>
<td style=" height:100%;" >
is the why, along with your strict rendering doctype. The table is 100%+ high as per that row + the height of the other rows. It's a known "feature" and not a bug as far as I've been able to make out, the mostly suggested "fix" is to put IE into quirks rendering mode by using a Doctype Switch ~ which is sometimes less than satisfactory.
Sample HTML:
<table cellspacing="0">
<tr class="menurow"><td>top menu</td></tr>
<tr class="mainrow"><td>Main content area ...</td></tr>
<tr class="menurow"><td>bottom row</td></tr>
</table>
with this CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
body {background: #ff0;}table{
height: 100%;
background: #ffc;
border-collapse: collapse;
width: 780px;
border-width: 0 1px;
border-style: solid;
border-color: #000;
margin: 0 auto;
text-align: left;
table-layout: fixed;
}td {padding: 0;}
.menurow {height: 46px; background: #777;}
.mainrow {height: 100%; vertical-align: top;}.menurow td {padding: 20px 0;}
Kind of works if in quirks rendering mode, but it loses the bottom padding on the "menu rows"
OR if you want to remain in Standard rendering mode there might be something else that would do although I haven't narrowed what height the mid cell should be best set at.
With a strict rendering doctype change the following 2 x lines from the above CSS to:
.menurow {height: 1px; background: #777;}
.mainrow {height: 70%; vertical-align: top;}
this again is not perfect, the top and bottom cells will be forced to be big enough for their content and padding, but the height of the mainrow cell will still make the whole table too big, if it's not tweaked to suit your purposes, and remains only a sugestion to the browser ~ also this method then produces an annoying 3/4px gap at the bottom of the table which causes a scrollbar anyway :(
There are also CSS expressions (IE Proprietary and javascript enabled) which, as long as the height of your other 3(top, bottom, advert?) main rows are known could calculate height of the missing cell for you, reports are these sporadically crash your browser so be wary.. although I've tested this one without incident it's sample only - and it still has the annoying 3/4px gap underneath the table!
#mainrow {
height:expression(wrapper.offsetHeight - headrow.offsetHeight - footrow.offsetHeight + "px");
}HTML:
<table id="wrapper" cellspacing="0">
<tr id="headrow"><td>top menu</td></tr>
<tr id="mainrow"><td>Main content area ...</td></tr>
<tr id="footrow"><td>bottom row</td></tr>
</table>
let us know if any of the suggestions work for you, and does anyone know how to get rid of that bottom gap?
Suzy
I would prefer to have a solution that works with the correct doctype. I am actually overhauling a page that had no doctype at all and used height="100%" and rendered fine in quirks mode across all the browsers I tested (Firefox, Opera, Safari, IE). I was attempting to convert the site into something more standards compliant, the results of which are in the first post however it does not work in IE correctly.
For the record the old page (with no doctype and height="100%") was:
<html>
<head>
</head>
<body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 background="/images/background.jpg"><table width=780 height="100%" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="#FFFFFF">
<tr>
<td width="1" bgcolor="#000000" rowspan="100"><img src="/images/spacer.gif" width="1" height="1"></td><td width=780 height=130>
<table width="780" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" >top</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#000000" rowspan="100"><img src="images/spacer.gif" width="1" height="1"></td>
</tr><tr>
<td valign="top" width="780" height="100%">middle<br>area</td>
</tr>
<tr>
<td>
bottom
</td>
</tr>
</table>
</body>
</html>
Am I better of keeping with this?, I would like to have had a proper doctype and moved to CSS etc but it does not seem possible. Would moving to divs instead of tables help at all?
