PDA

View Full Version : Help with W3C validation

grungee
20-07-2005, 16:57/04:57PM
Before I ask for a site review I thought I would try some hints and tips from this forum one of them has been to validate the html as I am not a coder of any kind, I am always willing to give anything a go, my site which had 43 validation errors is down to just one but when I try change that one it changes the complete look of the site?

the error is
Below are the results of attempting to parse this document with an SGML parser.

Line 275, column 16: document type does not allow element "TD" here; assuming missing "TR" start-tag

<td valign="top"><img src="


now if I try there TR it changes the look of everything on the page. Is there anyway to fix this??

Hoping someone can help

Thanks Tony
Quadrille
20-07-2005, 17:04/05:04PM
If you need a TR, then you need it - else the page may already look wrong in someone's browser.

It's probably a simple matter of math - closing items must= opening items; or a nesting problem. But no way to know without seeing the page - or at least all the code for the table (take the content out, if that'll help).
g1smd
20-07-2005, 17:11/05:11PM
<li> .... </li>
<li> .... </li>
</ul>
Where is the <table> and <tr> tag? or else a closing </td> tag? - Note you also have only one <td> in this row, but two in the row below.
<td width="13" valign="top">&amp;nbsp;</td></tr>
Where is the <tr> tag?
<td valign="top"><img src="PeterMooreIndex_files/PeterMooreIndex_leftcolumn_bottom.gif" border="0" alt="D.I.Y. Flatpack Kitchens" /></td>
<td align="center" valign="top" class="footer">
<table cellSpacing="0" cellPadding="0" width="98%" align="center" id="table1">
<tr vAlign="top">
<td colSpan="4">
<table cellSpacing="0" cellPadding="0" width="100%" id="table2">
<tr>
<td class="footer" vAlign="top" align="center">
g1smd
20-07-2005, 17:23/05:23PM
Your 40 line list with each line coded like this:

<li><b><font size="2" color="#CC0000">Polished Blackwood.</font></b></li>

can be reduced to:

<li>Polished Blackwood.</li>

for each line, and then ONE line of CSS in the <head> section to style the whole list:

<style type="text/css">
li {font-size: 60%; color: #CC0000; font-weight: bold;}
</style>

Experiment with the 60% to get the size you want.
grungee
20-07-2005, 17:29/05:29PM
Thanks guys I just realised its 6am here so I am going to go to sleep and have a look tomorrow I think I did ok to get it to 1 line of unvalidation and will throw some weight at it when I am refreshed, thanks for the help tho I really appreciate it

cheers Tony
g1smd
20-07-2005, 17:34/05:34PM
Using CSS will cut 75% of the HTML code from the page.

Start with the list, and I'll help you with the rest sometime.
g1smd
20-07-2005, 17:40/05:40PM
Your code:

<p align="center"><font size="3" color="#CC0000"><b>KNOB STYLES</b></font></p>

is a short piece of text that sits above, and introduces, a list.


That short text is in a larger size compared to the text in the list itself.


What is that piece of text?


...



yes



...



yes



...



It's a HEADING.


Therefore the HTML becomes:

<h3 align="center">KNOB STYLES</h3>

and the CSS for it, and all the other headings, is simply:

h3 {font-size: 100%; color:#CC0000; font-weight: bold;}

Gone is the <font> tag, and all the other clutter.

You could even put the align in the CSS, but I prefer to leave it in the HTML for older browsers to see.
g1smd
20-07-2005, 19:11/07:11PM
C'mon, wake up.... there's coding to be done.
Quadrille
20-07-2005, 19:18/07:18PM
You're a hard man, G1, a hard man 8)
g1smd
20-07-2005, 19:42/07:42PM
LOL

It's nearly midnight here.
grungee
21-07-2005, 01:41/01:41AM
Thanks Guys, my site now validates and I have cut the code bloat that you recommended, any other suggestions would be greatly appreciated. I have 2 little problems as well

1. In ie6 on the far right of the site, where you mentioned I should use the header tags <h3> the little graphics to the left of them are not in line with the header is there anyway to overcome this?? (not from using the header tags it happended before that)

2. Also when the page loads fresh again in ie6 the text under the javascript menu is half showing as soon as I move the mouse over the javascript menu it shows up full. Is there anyway I can over come this??

Neither of this is any major concern but I would like the site to look half professional if I could and any other suggestions would be greatly appreciated.

Cheers Tony
g1smd
21-07-2005, 06:00/06:00AM
Look at the OUTLINE (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.flatpackitchens.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&verbose=1) section.

See the stuff about the h2, h3, h4 tags being missing?

Change the <h5> tag to be <h2 class="note">

then do

h2.note {font-size: 40%;}

in your CSS.
g1smd
21-07-2005, 06:03/06:03AM
Next, have a look and see how many different styles you have used for paragraphs.

Cut out all the font tags, and style:

p { .... } in your CSS for the main style.


Add classes for the other styles that you want to use:

p.copyright

p.footer

p.address

etc.
g1smd
21-07-2005, 06:11/06:11AM
Help yourself to make your source code more readable:

- put two blank lines in the source code before every <hx> tag.

- put one blank line before each <ul> or <ol> tag.

- start each new <td> on a new line.
(Make sure that you always have the <td> and </td> on the same line as the actual content itself, too.)
g1smd
21-07-2005, 06:13/06:13AM
Your text "Site Map" should be a heading, not part of your product list.



Delete this bit:

<style type=text/javascript>
</style>

It isn't needed, and spot the error anyway (an error I often make too).



You have <h2><font...> ..... </font></h2>.
Use CSS to style the heading!



Don't use <br><br><br> to create a space between content. Enclose both parts in <p>...</p> and <p>...</p> tags instead. If the gap still isn't big enough then add a class to the first paragraph and set the margin-bottom for that class to a larger size using CSS.



Try not to use <p>&amp;nbsp;</p> to create a larger gap. Instead set the margn-bottom of the element before that to be a larger size (or set the margin-top of the element below). This isn't always easy to do. You have to be very clear in your semantic markup to get your head round this.



.
grungee
21-07-2005, 06:48/06:48AM
Thanks g1smd, I will attempt to do what you suggest, its a bit daunting because half of what you say I have no idea what you mean haha but I will check the code then check this message to see what you mean, I have no training in code I just do what I can and if it doesn't work I try again so all of that above might take me a bit of time but I will get through it all, you have taken the time to help and explain stuff to me so I will take the time to learn what you are saying once again thanks heaps.

Cheers Tony
g1smd
21-07-2005, 07:00/07:00AM
You are doing very well so far.

Some of the stuff that I just said to you, took me 4 or 5 years to have the lightbulb flicker on.

You're short-cutting your learning by 4 years. Hope it helps.


I think you already see the advantage of cutting all the <font> tags out of the <li> tags. Now do the same with the whole document. For paragraphs, you can't have just one style - because you have several different types (classes) of paragraph. You'll need to have several p.class in your CSS.

Even so, the CSS file isn't likely to have more than 10 or 12 items in it, I guess.
g1smd
21-07-2005, 07:12/07:12AM
The stuff at the very bottom of the page isn't "enclosed", and cannot be styled as it is.

Put it all in a <p>....</p> tag pair, and perhaps use the class name "footer" for it.
g1smd
21-07-2005, 19:48/07:48PM
Dang! Musta got an early night in, or else fell asleep at the keyboard.....
Quadrille
21-07-2005, 20:03/08:03PM
You mean he escaped? :rolleyes:

Don't worry, we'll send The Boys out to retrieve him, and deliver him tomorrow am ... :D
Connie
21-07-2005, 22:01/10:01PM
Originally posted by g1smd
, or else fell asleep at the keyboard.....
I do that a lot. :D
a12c4magic
21-07-2005, 23:36/11:36PM
Originally posted by g1smd
Dang! Musta got an early night in, or else fell asleep at the keyboard.....

What was it you said earlier on the old dog and bone oh yes “Wake up there’s coding to be done” *EG
g1smd
22-07-2005, 11:17/11:17AM
Well, the code is now valid, but it still contains a large amount of bloat that can easily be removed.
grungee
22-07-2005, 12:28/12:28PM
Originally posted by g1smd
Well, the code is now valid, but it still contains a large amount of bloat that can easily be removed.

Yep it sure is I am doing it on my test domain once I have what I think is all the bloat gone and the page still loads fine I will upload it and ask for your guidance again hopefully tonite is the nite to finish it off.

Cheers
g1smd
22-07-2005, 14:37/02:37PM
Good job! I am guessing you now know a LOT more about HTML than you did 3 days ago. It isn't really difficult at all.

Fixing your next page will take half the time, as you'll already know what to do for 90% of the errors that you'll find.
grungee
25-07-2005, 08:09/08:09AM
Originally posted by g1smd

Delete this bit:

<style type=text/javascript>
</style>

It isn't needed, and spot the error anyway (an error I often make too).

[/B]


Is the error style?? otherwise I got no idea.
grungee
25-07-2005, 08:10/08:10AM
Originally posted by g1smd - start each new <td> on a new line.
(Make sure that you always have the <td> and </td> on the same line as the actual content itself, too.)

Ok when I add a </td> to any of the lines it then won't validate keeps telling me the </td> is the error
Quadrille
25-07-2005, 08:12/08:12AM
I've been using:

<script language="JavaScript" type="text/javascript">
...
</script>

But I make no claims for its authenticity!
grungee
25-07-2005, 08:50/08:50AM
Okay I have most of what you have suggested to me completed, two bits I am not sure of are the </td> references when I add that to the end of the line the website then does not validate (i have also checked the css and it validates at the moment) the other part is the footer I thought I had added a footer class but not sure what you mean by adding it to the <p> tags??

Thanks for your help so far cut the mess from 17k down to 10k so far nearly half as small

Cheers Tony
grungee
25-07-2005, 08:53/08:53AM
Originally posted by Quadrille
I've been using:

<script language="JavaScript" type="text/javascript">
...
</script>

But I make no claims for its authenticity!

I have no idea quadrille but thanks for the tip, the website worked without that line so not sure even what it did or does

Cheers
g1smd
25-07-2005, 11:24/11:24AM
This tag is empty so it can be deleted:

<style type=text/javascript>
</style>


However, there is no such thing as a javascript style anyway.

It should have been either:

<style type=text/"css">
</style>

or

<script type="text/javascript">
</script>
g1smd
25-07-2005, 11:28/11:28AM
Regarding the <td> tags:

You have:
<td>

... some text here ...

</td>

in your pages, and I was simply suggesting to tidy it up to:

<td> ... some text here ... </td>

instead. There are no extra tags to add, only the positioning to alter.
g1smd
25-07-2005, 11:34/11:34AM
All these meta tags do NOTHING for you. They can safely be deleted:

<meta name="subject" content="D.I.Y. Flat Pack Kitchens Adelaide, SA, Australia search engine optimisation">
<meta name="Content-Language" content="english">
<meta name="resource-type" content="document">
<meta name="robots" content="all,index,follow">
<meta name="rating" content="general">
<meta name="revisit-after" content="10 days">
grungee
25-07-2005, 11:35/11:35AM
Originally posted by g1smd
Regarding the <td> tags:

You have:
<td>

... some text here ...

</td>

in your pages, and I was simply suggesting to tidy it up to:

<td> ... some text here ... </td>

instead. There are no extra tags to add, only the positioning to alter.

Yeah I can understand that when you open a tag you close it, which means they would be closed now, so I know I need to delete one </td> but when I do that it won't validate I will keep trying tho thanks for your heelp is there any other code there you think I could modify??

Cheers
g1smd
25-07-2005, 11:43/11:43AM
Don't forget to put the attribute values in quotes too:

note ---> "note"

text/javascript ---> "text/javascript"

and so on.
grungee
28-07-2005, 01:58/01:58AM
I am still having trouble with the <td></td> in the file but am slowly getting through them (making sure it is w3c compliant at the same time). I want to thank you heaps for all your help, and if there is anything left to optimize I would be grateful for any more tips.

If not would it be a good time to ask for a site review now?

Cheers Tony
g1smd
28-07-2005, 16:48/04:48PM
There are a few places where the source code could be made more readable, but nothing major.

I think you'll agree that simply getting rid of all the <font> tags and using CSS in an external file has made a huge difference to the readability, and to your understanding, of the code, as has the addition of the heading tags to things that are actually headings.

Check all my posts in this thread again for anything that you might have missed doing.


Now to do the same for the rest of the site...