Debugging CSS - HTML validation

It is useless to start debugging a page when the HTML is not valid.

The page that will be used as an example was posted by its author in a help forum. It has been reduced to a test case, borders have been added and three versions can be displayed here:

The screenshots below show the differences between browsers.

Using HTML Validator

Validation results SGML :

validation sgml

This validation, done locally, gives the same results as the W3C online service.

HTML Validation Result
----------------------
file://localhost/E:/css.tests/exemple_1a.html

line 149 column 66 - Error: literal is missing closing delimiter
line 149 column 84 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 149 column 22 - Info: start tag was here
line 151 column 5 - Error: end tag for element "h2" which is not open
line 151 column 17 - Error: end tag for element "h2" which is not open
line 155 column 27 - Error: end tag for "a" omitted, but OMITTAG NO was specified
line 155 column 5 - Info: start tag was here
line 157 column 12 - Error: document type does not allow element "a" here; assuming missing "li" start-tag
line 159 column 5 - Error: end tag for "li" omitted, but OMITTAG NO was specified
line 157 column 1 - Info: start tag was here
7 errors / 0 warnings

Validation results HTML Tidy :

validation tidy

HTML Validation Result
----------------------
file://localhost/E:/css.tests/exemple_1a.html

line 75 column 22 - Warning: <img> attribute with missing trailing quote mark
line 76 column 1 - Warning: discarding unexpected </h2>
line 76 column 13 - Warning: discarding unexpected </h2>
line 78 column 5 - Warning: missing </a> before </li>
line 79 column 1 - Warning: missing <li>
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Strict
0 errors / 5 warnings

HTML Validator proposes to correct the HTML with interesting options in other situations or to go from one error to the next one so that you can to edit the source code.

Thus we can sort out the syntax errors. The best is to start with the ones displayed by HTML Tidy.

A few display problems disappear and then we validate the CSS.