Forum Moderators: open
I'm trying to build a valid HTML page using CSS and HTML 4.0.1.
When I add the doctype, my page doesn't render correctly anymore in IE, though Firefoex works perfectly.
The code and CSS do validate.
It has something to do with heights.. Maybe one of you could look at this?
<SNIP>
Thanks!
Johannes
[edited by: BlobFisk at 8:57 am (utc) on July 26, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
but loose doesn't help either.
I use tables and I set heights in td's.. that is ok right?
Sine I can not add a link here's some stripped code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/default.css">
</head>
<body>
<table id="pageBody" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td colspan="3" height="18"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
<tr>
<!-- left bar -->
<td width="18">
<table class="noSpacing" cellspacing="0" cellpadding="0">
<tr><td height="30"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
<tr><td class="banner" height="158"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
<tr><td><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
</table>
</td>
<td width="864" valign="top">
<table id="innerBody" border="0" cellspacing="0" cellpadding="0">
<!-- navigatie -->
<tr>
<td colspan="3" height="29">
Navigatie
</td>
</tr>
<!-- banner -->
<tr>
<td class="banner" width="499" height="158" align="right"><img src="images/banner_title.jpg" height="53" width="477" border="0" alt="Home"></td>
<td class="banner" height="158"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td>
<td class="banner" width="272" height="158"><img src="images/banner_photo.jpg" height="158" width="272" border="0" alt="Home"></td>
</tr>
<!-- body -->
<tr>
<td colspan="3" align="center">
<br>
<table id="content" border="0" cellspacing="0" cellpadding="0">
<tr><td>body</td></tr>
</table>
</td>
</tr>
</table>
<div align="right"><label class="copyRight">Images (c) Johannes Klapwijk</label></div>
</td>
<!-- right bar -->
<td width="18">
<table class="noSpacing" cellspacing="0" cellpadding="0">
<tr><td height="30"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
<tr><td height="158"class="banner"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
<tr><td><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
</table>
</td>
</tr>
<tr><td colspan="3" height="18"><img src="images/spacer.gif" height="1" width="1" border="0" alt=""></td></tr>
</table>
</body>
</html>
I'm sorry, I don't know how to apply tabs in the code on this forum.
In IE the height of "navigatie", "banner" and "body" are screwed up. Banner and navigation become too high, the body is var to low (trimmed as much as possible in height)
Can it be that undefined heights do not fill out when you add a specific dtd?
Like I have a table of 100px height
1 row with a td of 20 heigh
1 row with a td without height definition
1 row with a td of 20 heigh
Shouldn't the middle row simply become 60px?
[webmasterworld.com...]
