Re: Warping Layout Problems

Still using tables for layout, huh?  LOL! Anyway, white space in the
html can sometimes create annoying layout breaks like this. In other
words, putting the </td><td> etc. next to each other might fix it also.

--- jonathan langlois <enalung@gmail.com> wrote:

> 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 &nbsp; in my table fixed this strange
> spacing
> behavior.
> 
> Try it yourself, use my code with the &nbsp; 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>
> 



	
		
__________________________________ 
Yahoo! Mail - PC Magazine Editors' Choice 2005 
http://mail.yahoo.com

Received on Sunday, 16 October 2005 17:04:56 UTC