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
- Mozilla
- MSIE 6
- Opera 9
Validation results 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 :
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.