Solved

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

Posted on 2004-04-14
19
761 Views
Last Modified: 2013-11-19
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><!--
  25:  --><li><a href="index.htm">About Us</a></li><!--
  26:  --><li><a href="index.htm">Customer Service</a></li><!--
  27:  --><li><a href="index.htm">Privacy Policy</a></li><!--  
  28:  --><li><a href="index.htm">Contact Us</a></li><!--
  29:  --><li><a href="index.htm">Links</a></li><!--
  30:  --><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><!-- Row 1 -->
  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><!-- Row 2 -->
  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><!-- Row 3 -->
  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>&copy; 2004 Holiday House - All rights reserved.</h6></center>
  72: </div>
  73:
  74: </font>
  75:
  76: </body>
  77: </html>
0
Comment
Question by:kotecat
  • 8
  • 7
  • 2
  • +2
19 Comments
 
LVL 9

Assisted Solution

by:lombardp
lombardp earned 50 total points
ID: 10830449
Line 18: You should not use <div> inside <font>, replace <font> attributes with CSS
Line 20 and other: You should use <br /> istead of <br></br>

0
 
LVL 17

Accepted Solution

by:
dorward earned 50 total points
ID: 10830462
Actually, you should use:

<p>paragraph</p>

instead of

paragraph<br><br>
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 25 total points
ID: 10832206
On a side note, replace this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

With this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
0
 
LVL 17

Expert Comment

by:dorward
ID: 10832271
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).
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10832412
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><!-- Row 1 -->
    <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><!-- Row 2 -->
    <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><!-- Row 3 -->
    <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>&copy; 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>
0
 
LVL 17

Expert Comment

by:dorward
ID: 10832460
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!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10832510
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.
0
 
LVL 17

Expert Comment

by:dorward
ID: 10832532
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10832630
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...
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 17

Expert Comment

by:dorward
ID: 10832903
*Most* browsers render it incorrectly, but as you want.
A few render it correctly, but this looks nasty.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10833154
Most browsers render what incorrectly?
Which browsers specifically, and what is the rendering issue that you're referring to?
0
 
LVL 17

Expert Comment

by:dorward
ID: 10833231
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10833456
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.
0
 
LVL 17

Expert Comment

by:dorward
ID: 10833529
> 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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10835020
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&
0
 

Author Comment

by:kotecat
ID: 10835276
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).
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10835319
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.
0
 

Author Comment

by:kotecat
ID: 10835400
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)
0
 
LVL 17

Expert Comment

by:dorward
ID: 10837090
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).
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now