asked on

Help with Validator W3C page is not Valid XHTML 1.0 Transitional Result

I am at a loss for how to solve a few errors resulting from the W3C Validator for a draft of a new page for my wife's business. The page is temporarily at http://www.thechaseison.net/HolidayHouseTest/Index2.html (all links are dead for now). You help would be very much appreciated!

The errors are:
Line 18, column 17: document type does not allow element "div" here;
missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<div id="content">
^
Line 20, column 4: end tag for "br" omitted, but OMITTAG NO was specified
<br>
^
Line 20, column 0: start tag was here (explain...).
<br>
^
Line 21, column 4: end tag for element "br" which is not open (explain...).
</br>
^
Line 35, column 4: end tag for "br" omitted, but OMITTAG NO was specified
<br>
^
Line 35, column 0: start tag was here (explain...).
<br>
^
Line 36, column 4: end tag for element "br" which is not open (explain...).
</br>
^
Line 40, column 4: end tag for "br" omitted, but OMITTAG NO was specified
<br>
^
Line 40, column 0: start tag was here (explain...).
<br>
^
Line 41, column 4: end tag for element "br" which is not open (explain...).
</br>
^
Code is:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3:
4: <head><title>Test</title>
5: <link rel="stylesheet" href="Untitled4.css" type="text/css" media="all"/>
6: <style type="text/css" media="all">@import url ("Untitled4.css");
7: a:hover {text-decoration: none; color:#FF0000};</style>
8: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
9: <meta name="MSSmartTagsPreventParsing" content="TRUE"/>
10: <meta http-equiv="expires" content="-1"/>
11: <meta http-equiv= "pragma" content="no-cache"/>
12: <meta name="robots" content="all"/>
13: <meta name="author" content="Matt Chase"/>
14: <meta name="description" content="Draft of New Site."/>
15:
16: </head>
17: <body bgcolor="#FFCC33"><font size="3" face="Verdana, Arial, MS Sans Serif">
18: <div id="content">
19: <center><img src="Images/HHTitlePic.JPG" width="700" height="100" alt="Holiday House www.shopholidayhouse.com" border="0" align="middle"></img></center>
20: <br>
21: </br>
22:
23: <ul id="menunine">
24: <li><a href="HHtest.html">Shopping</a></li><li><a href="index.htm">About Us</a></li><li><a href="index.htm">Customer Service</a></li><li><a href="index.htm">Privacy Policy</a></li><li><a href="index.htm">Contact Us</a></li><li><a href="index.htm">Links</a></li><li><a href="index.htm">Home</a></li>
31: </ul>
32:
33:
34: Welcome to <font color="#669966">HOLIDAY HOUSE</font>. We hope your visit here will be an enjoyable experience and that you find the perfect item you have been searching for, or maybe just something you can't live without! We are very pleased to bring you a great selection of lovingly hand crafted items as well as some special gift ideas. We only select products that we would be proud to own or give to our loved ones. We hope to provide you with some of these wonderful products and make your decorating and/or gift giving experience a good one.
35: <br>
36: </br>
37:
38: Happy Shopping!
39:
40: <br>
41: </br>
42:
43: <div align="center"><table width="100%" cellspacing="0" border="1">
44: <tr>
45: <td align="center"><img src="Images/A Teddy From The Heart.gif" width="150" height="150" alt="A Teddy From The Heart" border="0" align="middle"></img><br></br>
46: <a href="index.html">A Teddy From The Heart</a></td>
47: <td align="center"><img src="Images/Bath and Body.gif" width="150" height="150" alt="Bath and Body" border="0" align="middle"></img><br></br>
48: <a href="index.html">Bath and Body</a></td>
49: <td align="center"><img src="Images/Candles.gif" width="150" height="150" alt="Candles" border="0" align="middle"></img><br></br>
50: <a href="index.html">Candles</a></td>
51: </tr>
52: <tr>
53: <td align="center"><img src="Images/Childrens Gifts.gif" width="150" height="150" alt="Childrens Gifts" border="0" align="middle"></img><br></br>
54: <a href="index.html">Childrens Gifts</a></td>
55: <td align="center"><img src="Images/Gift Baskets Galore.gif" width="150" height="150" alt="Gift Baskets Galore" border="0" align="middle"></img><br></br>
56: <a href="index.html">Gift Baskets Galore</a></td>
57: <td align="center"><img src="Images/Home and Garden Decor.gif" width="150" height="150" alt="Home and Garden Decor" border="0" align="middle"></img><br></br>
58: <a href="index.html">Home and Garden Decor</a></td>
59: </tr>
60: <tr>
61: <td align="center"><img src="Images/Picnic Time.gif" width="150" height="150" alt="Picnic Time" border="0" align="middle"></img><br></br>
62: <a href="index.html">Picnic Time</a></td>
63: <td align="center"><img src="Images/Seasonal and Holiday Decor.gif" width="150" height="150" alt="Seasonal and Holiday Decor" border="0" align="middle"></img><br></br>
64: <a href="index.html">Seasonal and Holiday Decor</a></td>
65: <td align="center"><img src="Images/Yummy Edible Gifts.gif" width="150" height="150" alt="Yummy Edible Gifts" border="0" align="middle"></img><br></br>
66: <a href="index.html">Yummy Edible Gifts</a></td>
67: </tr>
68:
69: </table></div>
70: <br></br>
71: <center><h6>© 2004 Holiday House - All rights reserved.</h6></center>
72: </div>
73:
74: </font>
75:
76: </body>
77: </html>

SOLUTION

lombardp

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

dorward

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dorward

If you are going to switch down to HTML 4.01 Transitional (probably a good idea), then you need to make some other changes.

Most notiably changing all the <tag /> to <tag>

And <img></img> to <img> (which is the same thing as <tag /> is short hand for <tag></tag>).

If you stick with XHTML then you should still change <img></img> to <img /> to conform with Appendix C of the XHTML 1.0 specification. This is the HTML compatability guidelines (which you need as IE doesn't support XHTML yet).

seanpowell

In other words:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Test</title>
<link rel="stylesheet" href="Untitled4.css" type="text/css" media="all">
<style type="text/css">
@import url ("Untitled4.css");
a:hover {text-decoration: none; color:#FF0000};
</style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<meta http-equiv="expires" content="-1">
<meta http-equiv= "pragma" content="no-cache">
<meta name="robots" content="all">
<meta name="author" content="Matt Chase">
<meta name="description" content="Draft of New Site.">
</head>
<body bgcolor="#FFCC33">
<div id="content">
<center><p><img src="Images/HHTitlePic.JPG" width="700" height="100" alt="Holiday House www.shopholidayhouse.com" border="0" align="middle" /></p></center>
<ul id="menunine">
<li><a href="HHtest.html">Shopping</a></li>
<li><a href="index.htm">About Us</a></li>
<li><a href="index.htm">Customer Service</a></li>
<li><a href="index.htm">Privacy Policy</a></li>
<li><a href="index.htm">Contact Us</a></li>
<li><a href="index.htm">Links</a></li>
<li><a href="index.htm">Home</a></li>
</ul>

<p>Welcome to <font color="#669966">HOLIDAY HOUSE</font>. We hope your visit here will be an enjoyable experience and that you find the perfect item you have been searching for, or maybe just something you can't live without! We are very pleased to bring you a great selection of lovingly hand crafted items as well as some special gift ideas. We only select products that we would be proud to own or give to our loved ones. We hope to provide you with some of these wonderful products and make your decorating and/or gift giving experience a good one.</p>

<p>Happy Shopping!</p>

<div align="center">
<table width="100%" cellspacing="0" border="1">
<tr>
<td align="center"><img src="Images/A Teddy From The Heart.gif" width="150" height="150" alt="A Teddy From The Heart" border="0" align="middle" />
<p><a href="index.html">A Teddy From The Heart</a></p></td>
<td align="center"><img src="Images/Bath and Body.gif" width="150" height="150" alt="Bath and Body" border="0" align="middle" />
<p><a href="index.html">Bath and Body</a></p></td>
<td align="center"><img src="Images/Candles.gif" width="150" height="150" alt="Candles" border="0" align="middle" />
<p><a href="index.html">Candles</a></p></td>
</tr>
<tr>
<td align="center"><img src="Images/Childrens Gifts.gif" width="150" height="150" alt="Childrens Gifts" border="0" align="middle" />
<p><a href="index.html">Childrens Gifts</a></p></td>
<td align="center"><img src="Images/Gift Baskets Galore.gif" width="150" height="150" alt="Gift Baskets Galore" border="0" align="middle" />
<p><a href="index.html">Gift Baskets Galore</a></p></td>
<td align="center"><img src="Images/Home and Garden Decor.gif" width="150" height="150" alt="Home and Garden Decor" border="0" align="middle" />
<p><a href="index.html">Home and Garden Decor</a></p></td>
</tr>
<tr>
<td align="center"><img src="Images/Picnic Time.gif" width="150" height="150" alt="Picnic Time" border="0" align="middle" />
<p><a href="index.html">Picnic Time</a></p></td>
<td align="center"><img src="Images/Seasonal and Holiday Decor.gif" width="150" height="150" alt="Seasonal and Holiday Decor" border="0" align="middle" />
<p><a href="index.html">Seasonal and Holiday Decor</a></p></td>
<td align="center"><img src="Images/Yummy Edible Gifts.gif" width="150" height="150" alt="Yummy Edible Gifts" border="0" align="middle" />
<p><a href="index.html">Yummy Edible Gifts</a></p></td>
</tr>
</table>
</div>

<center><h6>© 2004 Holiday House - All rights reserved.</h6></center>

<p>
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>

</div>

</body>

dorward

seanpowell: You appear to have forgotten to remove the "/" at the end of the <img> tags. You also have left the "Valid XHTML 1.0" message!

seanpowell

You're right, I forgot about the icon:
<a href="http://validator.w3.org/check/referer"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>

But I didn't forget about the tag, that was on purpose.

dorward

Why?

In HTML <img src="star.jpeg" alt="*" /> is supposed to be rendered as "*>"

Very few browsers get this right, but its a bad idea to depend on errors in the browsers HTML handling to get the effect you want - especially when it is so easy to do The Right Thing and not introduce any problems.

seanpowell

Because it renders correctly, fully validates against the 4.01 spec and means less code rewrite in the future.
Perhaps it's just a personal preference...

dorward

*Most* browsers render it incorrectly, but as you want.
A few render it correctly, but this looks nasty.

seanpowell

Most browsers render what incorrectly?
Which browsers specifically, and what is the rendering issue that you're referring to?

dorward

the rendering issue I mentioned when I asked you why you were using XML style self-closing tags in an HTML document:
In HTML <img src="star.jpeg" alt="*" /> is supposed to be rendered as "*>"

I've seen it occur in w3m and have heard that it also occurs in the web browser component for emacs.

http://www.cs.tut.fi/~jkorpela/html/empty.html is probably worth a read.

seanpowell

Well, I'm not sure how you get from *Most* browsers render it incorrectly to hearing that it was a problem for the Emacs/W3 browser.

<img src="image.gif" alt="myimage" /> will render perfectly well cross browser and there are no known rendering issues that I'm aware of. It's certyainly not an issue on the code above because it's transitional validation, not strict.
Be that as it may, <img src="image.gif" alt="myimage"> is fine as well, it will make little difference.

dorward

> Well, I'm not sure how you get from *Most* browsers render it incorrectly to hearing that it was a problem for the Emacs/W3 browser.

Becuase incorrectly is what you WANT. Otherwise every image would have a greater then sign rendered after it.

> <img src="image.gif" alt="myimage" /> will render perfectly well cross browser and there are no known rendering issues that I'm aware of.

I've just tried to make you aware of them.

> Be that as it may, <img src="image.gif" alt="myimage"> is fine as well, it will make little difference.

That syntax is *correct* and valud.
<img src="image.gif" alt="myimage" />, while *valid*, does not mean what most people want it to mean.

COBOLdinosaur

I'm going to stick my nose in long enough to agree with Sean. If oddball browsers decide not to follow the lead of ALL the mainstream browsers and support forward compatibility why should developers take the same backward approach to maintainability? If you are going to support every browser in the universe then best to quit using CSS because someone; somewhere might still be using Netscrap 3. I guarantee that most of pages on the Internet will not render it as intended, with every browser you can find.

Cd&

kotecat

ASKER

Thanks everyone for the suggestions and advice. I have made changes based on the first two suggestions following my post, and everything validated. I appreciate the suggestions to switch down to HTML 4.01 Transitional...I was using a defaulted document setting. What are the benefits to doing so? More accessibility? I would really like to not have potential site visitors and customers run screaming due to browser/OS incombatibilities and rendering issues. As one of you mentioned, someone somewhere will show up to the site with netscape 3 or 4. I am at work now, but when I get home I'll play around some more, and test on browsercam.com. BTW, the new draft validated fully as XHTML 1.0 Transitional...thanks again (now at www.thechaseison.net/HolidayHouseTest/Index2.html).

seanpowell

If you're not using xml, then there's no need or benefit to using and validating against xhtml.
Standard html will be available for many, many years to come.

If someone shows up with some old browser version, I can guarantee you that "your" site will not be an issue. They will be unable to view most of the correctly designed sites on the web today. Coding for and accommodating those people is (IMHO) a waste of time and effort. In much the same way that you no longer see watering stations at the side of the street for horses.

If someone calls you and says they can't view your site with Netscape 4, I'll gladly send you a list of other sites that they can't view either. A very long list.

kotecat

ASKER

BTW, I am sorry if this was the wrong forum to post this. I debated for a while and thought perhaps my use of CSS tags in my HTML was the root cause of my problems, and so posted here instead of in HTML. I appreciate your resistance to running me off, and for your fantastic responses. I tried to split the points up for everyone.

Matt (kotecat)

dorward

I'm of the opinion that if you are going to code to a standard you should code to that standard and you shouldn't use bits from a different standard just becuase you can get away with it.

Using XHTML style closing tags brings you no benefits if you are working with HTML, and migration to XHTML from HTML is trivial to automate with a script so you don't save yourself any work (unless you want to manaully change all the other self-closing tags over).