Trying to use CSS and WC3 compliance

mryang · #1 (**permalink**) 07-21-2008, 01:24 PM

Hi everyone,

I am trying to re-write my site using CSS, but I am getting some errors when I try to validate it - been looking at all the possibilities but seeing as I have only been learning CSS for a couple of weeks I am struggling so thought I would seek some professional help!

My test page I created is -

http://www.dvd-and-media.com/dvd-tem...other+DCP-115C

it is dependant on the follwing files -

http://www.dvd-and-media.com/dvd-sy.css MY STYLE SHEET
http://www.dvd-and-media.com/ink-cartridges.php THE PRODUCT INSERTION

The errors I currently have are -

Validation Output: 4 Errors

1. Error Line 69, Column 205: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.

…userid" type="hidden" value="5177736">

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
2. Error Line 70, Column 93: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.

…d-and-media.com/cartridges_index.php">

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
3. Error Line 72, Column 28: end tag for "TABLE" which is not finished.

<table> </table></form></div>

✉

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.
4. Error Line 121, Column 5: end tag for element "DIV" which is not open.

</div>

✉

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

Any help as to where I am going wrong would be much appreciated.

**wige** · #2 (**permalink**) 07-21-2008, 04:28 PM

The errors you mention are HTML issues, not CSS. Most of them seem to be related to the order of tags. Your best bet would probably be to get Firefox and the HTML Validator Addon, which will allow you to view the page source code with the errors highlighted. But as a basic overview:

1. This error is caused by <input> being in the wrong place. An <input> tag must be inside a block level container, be it a text tage (p, h1, div, etc) in order to be considered valid. Another possibility is that the <input> tag is inside an inline tag such as <a> or <span>.

2. Same as 1.

3. The <table> is empty. A <table> must contain at least one row, and that row must contain one cell for the document to validate.

4. You have an extra </div> tag. Elsewhere in the document, you already closed the <div>.

Unfortunately I can't be much more helpful because when I ran my checker on the page it found several more items.

mryang · #3 (**permalink**) 07-22-2008, 05:50 AM

Thanks Wige your suggestion of the Firefox add-on is really helpfull and pointing out loads of fixes for me, at least it has the tidy tool as well and that saves loads of time.

Thanks again.

mryang · #4 (**permalink**) 07-22-2008, 11:46 AM

OK, so I now have a page that validates - Rom drives for Blu-ray disc playback by LG and Pioneer

However all my prices have Â£ instead of just £ in front of them???? HELP

spiderbait · #5 (**permalink**) 07-22-2008, 11:58 AM

I think this is happening because you've used the pound symbol "£" in the source code instead of the appropriate HTML character entity, which I believe is

PHP Code:


			
&#163;

I had to wrap the character in a php tag to keep it from automatically be converted to the symbol