Warping Layout Problems

I think I might just have found a most strange bug.

The formating on my webpage is done by CSS. I noticed that somehow, my
layout was warping leaving a big space between what will become the logo and
what will become the banner. I searched and searched like a madman in my
code to find the mistake, I validated it successfully each time. In the end,
I found out that just leaving   in my table fixed this strange spacing
behavior.

Try it yourself, use my code with the   in the first 3 cells of the
table, then remove them. You should notice the layout warping as I
experienced.

<!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">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Template</title>
<style type="text/css">
table#layout {
width: 100%;
height: 100%;
background:#000000;
}
/* Banner Start */
td#logo {
width: 280px;
height: 280px;
background:url('Logo.png') no-repeat;
}
td#banner {
width: 460px;
height: 280px;
background:url('Banner.png') no-repeat;
}
td#rightrepeat {
width: auto;
height: 280px;
background:url('RightRepeat.png') repeat-x;
}
/* Banner End *//* Side Menu Start */
td#sidemenu {
width: auto;
height: 380px;
background:url('Menu.png') no-repeat;
}
td#bottomrepeat {
width: auto;
height: auto;
background:url('BottomRepeat.png') repeat-y;
}
/* Side Menu End *//* Main Content Start */
td#maincontent {
width: auto;
height: auto;
}
/* Main Content End *//* Footer Start */
td#menufooter {
width: auto;
height: auto;
background:url('BottomRepeat.png') repeat-y;
}
td#mainfooter {
width: auto;
height: auto;
}
/* Footer End *//* Validation Start */
img.validation {
border: 0px none ;
width: 88px;
height: 31px;
}
/* Validation End *//* Misc Start */
p.center {
text-align: center;
}*/
/* Misc End */
</style>
</head>
<body>
<table id="layout" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<!-- Logo Start --> <td id="logo">&nbsp;</td>
<!-- Logo End --><!-- Banner Start --> <td
id="banner">&nbsp;</td>
<!-- Banner End --><!-- Right Image repeat Start -->
<td id="rightrepeat">&nbsp;</td>
<!-- Right image repeat End --> </tr>
<tr>
<!-- Side menu Start --> <td id="sidemenu"></td>
<!-- Side menu End --><!-- Main content Start -->
<td id="maincontent" rowspan="2" colspan="2"></td>
<!-- Main content End --> </tr>
<tr>
<!-- Bottom image repeat Start --> <td
id="bottomrepeat">
<p class="center"><a
href="http://validator.w3.org/check?uri=referer"><img
alt="Valid XHTML 1.0!"
src="http://www.w3.org/Icons/valid-xhtml10" class="validation" /></a><a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
alt="Valid CSS!"
src="http://jigsaw.w3.org/css-validator/images/vcss"
class="validation" /></a></p>
<p class="center">What does this mean?</p>
</td>
<!-- Bottom image repeat End --><!-- Footer Start -->
</tr>
<tr>
<td id="menufooter"></td>
<td id="mainfooter" colspan="2" rowspan="1"></td>
<!-- Footer End -->
</tr>
</tbody>
</table>
</body>
</html>

Received on Sunday, 16 October 2005 09:15:13 UTC