problem validating tables?

Help needed by a novice to validate page

[rob_fearn]

Hi, I'm having problems validating a page, ive run it throught the w3c validator and get the following error:

# Line 176, column 41: document type does not allow element "TABLE" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag <table width="75%" border="1">
^

Here is the code surrounding the error, but i dont know where i'm going wrong, please keep it simple this is my first time on this site!:

170: <li><a href="#r_w_trs" class="links"><strong>Womens Legwear</strong></a>
171: <li><a href="#r_m_top" class="links"><strong>Mens Tops</strong></a>
172: <li><a href="#r_w_top" class="links"><strong>Womens Tops</strong></a>
173: </ul>
174: <a name="n_m_jks"></a><strong><font size="2" face="Arial, Helvetica, sans-serif" color="#000099">Nomad
175: Mens Jackets.</font></strong> <br> <br> <font color="#000000" size="2" face="Arial, Helvetica, sans-serif">
176: <table width="75%" border="1">
177: <!--DWLayoutTable-->
178: <tr>
179: <td height="20" colspan="5" valign="top"><div align="center"><font size="2" face="Arial">Nomad
180: Mens Jackets sized Medium - Extra Extra Large</font></div></td>
181: </tr>
182: <tr>
183: <td width="111" height="20" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
184: <td width="111" valign="top"><div align="center"><font size="2" face="Arial">Medium</font></div></td>
185: <td width="111" valign="top"><div align="center"><font size="2" face="Arial">Large</font></div></td>

[isitreal]

What doc type is your document? If it's xhtml 1 strict, I believe you can't have an inline element not contained within a block level element, the <a...> in this case, but it's easier to answer this question knowing what doc type.

[rob_fearn]

Doc Type is HTML 4.01 Transitional

[isitreal]

A lot of times the w3c validation error messages don't actually mean anything, there is a cascading affect on errors, if you sticky me your site url I can take a look at the whole page, it's probably a tag somewhere else that isn't closed or something.

Are you getting a lot of errors on the validation? Is this the first error, if not, what is the first error?

[grahamstewart]

Hi Rob,

I don't think the validator will like you putting a table inside a font tag. That probably what is causing the problem.

You should also consider ditching font tags altogether and handling your fonts with CSS. This is the first and easiest step towards CSS - it will make you page smaller and more search engine friendly.

Besides the <font> tag was officially deprecated in 1997!

[tedster]

grahamstewart has it right. One of the most common validation errors comes from nesting a block element inside an inline element - in this case <font><table></table></font>

Browsers have long used internal error recovery to handle these situations as best they can, depending on the elements involved. But you will often find that the outer element does not "work" the way you want it to in these invalid, error recovery situations.

For example, it's common in "street code" to place a <font></font> or <strong></strong> tags surrounding a whole stretch of <p> tags -- it works in many browsers but the <p> is a block level so this construction is a similar error to the one reported above.

[edited by: tedster at 12:03 am (utc) on Mar. 8, 2004]

[isitreal]

Graham stewart got that exactly right, this is one of the biggest reasons not to use products like dreamweaver, they scatter font tags at random, follow his advice, pull out all the font tags and your page will validate fine, I checked your page on w3c, made a working copy, deleted the extra font tags and it validates fine, but you have a lot of extra ones, look for the ones that open before a table starts, that's what is causing the error.

Also, fix your dreamweaver settings so that nested tables are placed on a new line, currently they come on the same line as your td tags, that makes it almost impossible to read the code.

this was a nice reminder for me why I don't use dreamweaver or any wysinwyg (what you see is NOT what you get) type html editors, their habit of throwing in tags at random makes it harder to create a solid page, not easier as they claim.

[rob_fearn]

Thanks guys,

I've managed to get the page in question to validate, I'm new to style sheets, but i'm gonna have a go at removing all those <font>s and applying styles instead over the weekend.

Once again thanks for the help and advice!

[grahamstewart]

Good man Rob - you won't regret it.

If you are new to CSS then check out Nick_Ws CSS Crash Course [webmasterworld.com] (from the CSS forum library). The first two pages should be enough to sort out fonts for you.

[rob_fearn]

I've had a go at tidying the top 300 lines of the page in question and applied styles, i could do with someone just hving a quick scan to let me know i'm on the right track.

If someone wouldn't mind i'll send them the URL

Much appreciated

Rob

[grahamstewart]

No problem.

[isitreal]

You want to change this kind of thing:

 <td><div align="center"><font size="2" face="Arial">Glove Size</font></div></td>

and add a class, there's actually no need for the div, make a class like this:

td.info1 {
text-align:center;
font-size:90%;
font-family:arial, sans-serif;
}

then apply it like this:
<td class="info1">Glove Size</td>

See how much cleaner that is?
Now you have full control over the page styling from the central stylesheet, you can change the font sizing from one location, much less code on the page.

For things like this:

 <a href="#Top" title="Back to the top"><font color="#666666" size="1" face="Arial, Helvetica, sans-serif">Back 
   to the top.</font></a>

do the same, only for the a tag, like this:
a.page-nav1, a.page-nav1:visited {
color:#666666;
font-size:80%;
font-family:helvetica, arial, sans-serif;
}

then apply it like this:
<a href="#Top" title="Back to the top" class="page-nav1">Back to the top.</a>

Now that's the link is controlled by CSS, you can apply other behaviors to it, like:
a.page-nav1:hover {
text-decoration:none;
color:red;
}

link pseudo classes have to be in this order on your stylesheet:
a, a:link
a:visited [if you want the visited condition to have a different color than the normal link, if you want it the same, put the a:visited together with the a, a:link
a:hover
a:active

[rob_fearn]

Thanks for your help guys,

I've got rid of all <font> & <divs> now, reads much better, the tables work as I want and I'm much more confident using CSS having read the tutorials.

Once again many thanks

Rob

[isitreal]

You'll never regret moving up to CSS, the only real problem with doing it is that it becomes virtually impossible to consider making a non CSS page ever again :)

[g1smd]

Validate your CSS code over at [jigsaw.w3.org...] as there are a number of newbie mistakes to trip the unwary.

.

>> WYSIWYG ==> what you see is NOT what you get <<,

ah, that'll be the old WYGIQWYW.