2 replies [Last post]
Last seen: 13 years 50 weeks ago
Joined: 2004-04-08
Posts: 86
Points: 0

When I add a doctype do my document the 100% I set for the height of my table messes up and table does not extend 100% down the length of the page.



<!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" lang="en" xml:lang="en">


<style type="text/css">
body {
 background: url(images/background.gif) repeat-x;
 background-attachment:  fixed;
 margin: 0px; }

table {
 background-color: #DCDCDC; 
 border-left: 1px solid #D8D8D8; 
 border-right: 1px solid #D8D8D8;

#container {
 width: 714px;
 margin: 0px;
 background-color: #E1E1E1;
 background: url(images/butterfly.jpg) no-repeat;

#leftcol {
 float: left;
 width: 220px;
 \width: 230px;
 w\idth: 220px;
 margin-top: 150px;
 padding: 9px;

#maincol { 
 margin-left: 264px; 
 padding: 10px; 

#navcontainer {
 width: 12em;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: Arial, Verdana, sans-serif;
 color: #333; 
 font-size: small;

#navcontainer ul {
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 background: transparent url(images/navbackground.gif); 

#navcontainer li {
 border-bottom: 1px solid #90bade;
 margin: 0; 

#navcontainer li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 color: #fff;
 text-decoration: none;
 width: 100%;

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover {
 background-color: #91A1AC;
 color: #fff;



<table width="714" height="100%" align="center" cellspacing="0" cellpadding="0">
<td valign="top"><div id="container">
<div id="leftcol"><div id="navcontainer"><ul id="navlist">
<li id="active"><li><a href="#">HOME</a></li>
<li><a href="#">DOMAIN</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
<div id="maincol"><p>Top Cat! The most effectual Top Cat!  Who's intellectual close friends get to call him T.C.,  providing it's with dignity. Top Cat! The indisputable leader  of the gang. He's the boss, he's a pip, he's the  championship. He's the most tip top, Top Cat.</p>
<p>Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.</p>
<p>Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah... wishing for The Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah... some day we will find The Cities of Gold.</p></div></td>


Anonymous's picture

Adding DOCTYPE Causes Problems

There are some very basic html errors in your code.


I'm not saying fixing them will alleviate your problem but it's a start.

Without the doctype your browser (probably IE/Win) is rendering the page incorrectly (due to it being in quirks mode). Adding the doctype does not "cause problems" it simply renders properly according to your markup and css.

gary.turner's picture
Last seen: 1 year 40 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Adding DOCTYPE Causes Problems

In standards mode, browsers follow the rules a bit closer. As the validator shows, 'height' is not an attribute of table. You may use it as a style property. 'align' is deprecated. The default stylesheet for Firefox treats 'align="left"' as {float: left;}, similarly on 'align="right"' to the other side, and 'align="center"' as {margin-left: auto; margin-right: auto;}. That's not a bad plan.

Using the correct DTD doesn't mess up the page, it just shows that your markup wasn't as precise as you might prefer.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.