Forum Moderators: open
A lot of them are with table tags and stuff like that that I jus need to figure out, but lots have to do with META stuff, doc type and all that, and problems with the < p > tag (which I can't understand how that could be a problem)...
I don't know, I was just hoping for some help :)
Thanks in advance!
Keep at it. You'll find that when you identify and correct one error, often several cascading errors will be resolved. Use the validator together with your favorite search engine and research your solutions. In the process you'll learn volumes. Then, of course, you have to return here and share all that newly found knowledge by helping others ;)
The first thing to do is to make sure you are using the correct Doc type for your documents. If the doc type isn't correct it will be difficult to decipher the error codes and what they mean.
Next, click on the underlined links in the validator results and try to understand what they mean.
If you are using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> or <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and you are getting META tag errors, check to be sure you have closed the tags with an > and that there are beginning and ending quote marks.
If that wasn't a typo and you actually have an error for < p >, it is because no spaces are allowed after the < and before the beginning character of the tag.
Regards,
R.
Learn how to fix those 20 errors and you can fix 99% of all the problems that you will ever see.
Most of the errors are down to incorrect nesting, missing quotes on attributes, non-standard code (tags which only work with IE), and incorrect values for attributes (especially in align and valign {the validator actually tells you what values are allowed}).
A few tips:
Try to learn CSS. You can remove all the font tags from your documents and have just a few lines of CSS in an external file that style the whole site. The CSS defines what the headings, paragraphs, lists, tables and forms look like, and for content that is going to be different to the default you can add a "class" name to that content and style that.
Therefore: Try to make your pages out of headings, paragraphs, lists, tables, and forms. These are the basic semantic building blocks for content.
Do NOT use a single <p> in between blocks of text to add spacing. Use the <p>...</p> tag pair to enclose a paragraph of text instead.
Use heading tags for headings. A heading is a small piece of text that sites above, and introduces, a paragraph, list, table, or form.
Avoid the <center> tag. You can replace <p><center>....</center></p> with the simpler <p align="center">...</p> instead.
Don't be afraid of putting a few blank lines in the source code to space things out to make it easier for you to read the HTML code.
<snip>
[edited by: encyclo at 1:46 am (utc) on July 20, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
You have a load of meta tags that are useless. Remove them. See some of my earlier postings for a list of what you actually need.
Get that big chunk of JavaScript out into an external file.
Why do you have an empty div right after the <body> tag?
Get the next big chunk of Javascript out into an external file.
I hate multiple-nested <div> tags. I hate them even more when used with inline styles. That is too much code bloat. Get the styles out into your stylesheet #*$!.
<div> is a block element. As far as I know, you can't have a <div> inside a table. That would be a job for <span> instead.
IDs cannot start with a number. They can include a number but the first character must be a letter.
There is no such tag as <spacer>. Remove that.
Your nesting of table elements is incorrect.
You must have a minimum of alt="" on every <img> tag.
For every & in a URL, you MUST replace it with & every single time.
Does that get you started? They are all easy errors to fix.
<ul class="right">
<li> ..... </li>
</ul>
<ul class="right">
<li> ..... </li>
</ul>
over and over and over again can be much simplified. Change it to:
<div class="right">
<ul>
<li> ..... </li>
</ul>
<ul>
<li> ..... </li>
</ul>
<div>
and use the
.right ul { style info here }
CSS selector to style it.
Rule of thumb: If you find yourself repeating a class name over and over and over again in the HTML code, then you should be attaching that class name to a parent HTML element and using a different type of selector to style the child HTML elements.
[edited by: jatar_k at 4:59 pm (utc) on July 20, 2005]
[edit reason] please check your stickymail [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
If you use XHTML then you need some extra stuff at the top too. Additionally all of your XHTML tags must be "closed" like <meta ..... /> and so on. You must omit those closings if you only use HTML code. The rest of this post assumes HTML. You must add the / if you use XHTML instead.
For your page to actually be valid you MUST declare the character encoding (lets the browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic script, or some other character set) used for the page, with something like:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
There are also other schemes such as UTF-8 and many others.
It is also a good idea to declare what human language the page is in, using:
<meta http-equiv="Content-Language" content="EN-GB">
The language and country codes come from ISO 4217 and ISO 3166. This is useful for online translation tools as well. Change the "en" and "gb" to whatever language and country you need.
You need a <title> element for the page:
<title> Your Title Here </title>
This is displayed at the top of the browser window, and stored as the name of the bookmark if someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag that is indexed and displayed by search engines in the search results page (SERPs).
You need the meta description tag, as this is very important for search engines, and it is useful but not vital to have a meta keywords tag:
<meta name="Description" content=" Your Description Here. ">
<meta name="Keywords" content=" your, keyword, list, here ">
Most search engines do obey the robots meta tag. The default robots action is index, follow (index the page, follow all outbound links) so if you want something else (3 possibilities) then add the robots tag to the page in question. If you want to exclude whole directories then use the robots.txt file for this instead of marking every HTML file with the tag.
<meta name="robots" content="noindex,follow">
The last parts of your header should have your links to external style sheets and external javascript files:
Use this if the stylesheet is for all browsers:
<link type="text/css" rel="stylesheet" src="/path/file.css">
Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS:
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"> @import url(/path/file.css); </style>
Use this for the javascript:
<script type="text/javascript" language="javascript" src="/path/file.js"></script>
End the header with this:
</head>
<body>
and then continue with the body page code.
It is as simple as that.
Code within the page:
I use: <a href="somepage.html" title="some text here"></a> for links.
I use <img src="somefile.png" alt="some text"> for images.
Headings are done with <hx></hx> tags, properly used from <h1></h1> downwards.
More answers as I get to them!
[edited by: encyclo at 5:27 pm (utc) on July 20, 2005]
[edit reason] check your sticky mail [/edit]
CSS can fix that. Worry about that last. Fix the other stuff first.
Then you have to get to grips with missing tags/wrongly nested tags in the tables.
The & should be & in every case.
<p> ...........
............ <strong></p>
<p> ........... </strong></p>
The opening of <strong> is in the wrong place. It is in the wrong paragraph.
>> value of attribute "method" cannot be POST; must be one of "get", "post".
Change method=POST to be method="post" instead.
That is, in quotes, and in lower case.
Add the alt="" attribute to ALL of the <img> tags.
The input tags need to be closed: <input ....... />
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000714.shtml"><strong>Intellivision</strong></a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000699.shtml">12 Hip-Hop Classics that All Sample the Same Damn Song v3.0</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000668.shtml"><strong>Graphically Delicious</strong></a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000659.shtml">"It's a Fact." (2 of 2)</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000658.shtml">"It's a Fact." (1 of 2)</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000655.shtml"><strong>Top Twelve Hooker Flicks...</strong></a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000636.shtml">12 television neighbors.</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000615.shtml"><strong>12 Reasons Why Public Enemy ('87-'90) is the best rap group of all time.</strong></a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000603.shtml">Conversion Table.</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000597.shtml"><strong>I Love TV!</strong> - <em>Early 90's Edition</em></a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000587.shtml"><strong>GTA San Andreas </strong> - <em>The Lost Radio Stations</em> Part 3</a></li>
</ul>
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000585.shtml"><strong>GTA San Andreas </strong> - <em>The Lost Radio Stations </em> Part 2</a></li>
</ul>
But not when it's like this:
<ul class="right">
<li><a href="http://www.example.com/twelves/archives/000714.shtml"><strong>Intellivision</strong></a></li>
<li><a href="http://www.example.com/twelves/archives/000699.shtml">12 Hip-Hop Classics that All Sample the Same Damn Song v3.0</a></li>
<li><a href="http://www.example.com/twelves/archives/000668.shtml"><strong>Graphically Delicious</strong></a></li>
<li><a href="http://www.example.com/twelves/archives/000659.shtml">"It's a Fact." (2 of 2)</a></li>
<li><a href="http://www.example.com/twelves/archives/000658.shtml">"It's a Fact." (1 of 2)</a></li>
<li><a href="http://www.example.com/twelves/archives/000655.shtml"><strong>Top Twelve Hooker Flicks...</strong></a></li>
<li><a href="http://www.example.com/twelves/archives/000636.shtml">12 television neighbors.</a></li>
<li><a href="http://www.example.com/twelves/archives/000615.shtml"><strong>12 Reasons Why Public Enemy ('87-'90) is the best rap group of all time.</strong></a></li>
<li><a href="http://www.example.com/twelves/archives/000603.shtml">Conversion Table.</a></li>
<li><a href="http://www.example.com/twelves/archives/000597.shtml"><strong>I Love TV!</strong> - <em>Early 90's Edition</em></a></li>
<li><a href="http://www.example.com/twelves/archives/000587.shtml"><strong>GTA San Andreas </strong> - <em>The Lost Radio Stations</em> Part 3</a></li>
<li><a href="http://www.example.com/twelves/archives/000585.shtml"><strong>GTA San Andreas </strong> - <em>The Lost Radio Stations </em> Part 2</a></li>
</ul>
Here is the CSS code:
ul.right {
list-style: none;
line-height:12px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
margin-top:0px;
margin-bottom: 0px;
padding-top: 3px;
padding-bottom: 3px;
border-bottom: #CCCCCC 1px dashed;
}
Any ideas as to why?
[edited by: jatar_k at 8:33 pm (utc) on July 20, 2005]
[edit reason] generalized urls [/edit]
.right li
in your CSS file, NOT
li.right
That is, li.right { ... } styles the HTML <li class="right">
but the CSS selector: .right li { ... } styles:
<div class="right">
<ul>
<li> I am styled </li>
...
In your bottom example you would need .right ul { ..... } for the CSS selector in the stylesheet.
Do any of you guys that have been helping me have a copy that you've downloaded or that's in your cache?
I am such an idiot!
If you have it please sticky me
[edited by: jatar_k at 11:35 pm (utc) on July 20, 2005]
[edit reason] no email addresses thx [/edit]
Inside the "My Documents" folder on my computer, I have a folder called "WebSites".
Inside that is a folder for each site that I am involved with.
Inside that is a set of folders with each one named as the date, like "2005.07.20" (in that format so that they sort into date order), as well as one called "latest" which is the one I am editing, and a folder called "stuff" into which all sorts of left overs, snippets and ideas are thrown.
When I start work, I make a folder with today's date and copy the whole of "latest" into it before starting work. I backup often, and throw very little away.
The whole "My Documents" folder is backed up every few days to an external drive too.
I can find any version of any of the sites, going back years. You gotta have a system.
<p>
<p>spandivIf you've got errors marked as there is no attribute "something" just ignore those until the others are fixed. Once your spans are changed to divs, a lot of your errors will disappear.
<span class="something"><p> ... some text ... </p></span>
Do any of you guys that have been helping me have a copy that you've downloaded or that's in your cache?
Man, that is funny. That literally made my day. I don't feel like such an idiot for what I did. Wait a minute, I got canned for what I did ... nevermind.
CaboWabo
