Monday, June 1, 2009

CSS Display Troubleshooting

Use the following web site to troubleshoot CSS (Cascading Style Sheet) web sites.

Jigsaw W3C CSS Validator
http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/

I have a web site that I maintain with Adobe Dreamweaver. It uses CSS. Today, after upgrading to Internet Explorer 8, it no longer displayed correctly. I double checked the site using Mozilla Firefox and noticed similar issues. First, I tried Dreamweaver's error checker, it returned no errors. Then, I ran the site through the css-validator, also with this tool, there were no errors displayed. However, the css-validator listed 5 warnings. It turns out that 2 of the 5 warnings were creating the display issues. After correcting the warnings, all is well now.

Below is a listing of the current site output. The remaining warnings are not an issue because I am only using them with image elements which have an intrinsic width. The two warnings that were creating the issues were used on floated elements that did not have an intrinsic width. I don't know how I would have found and fixed the problems without the css-validator. Eventually, I will get around to fixing the remaining 3 warnings so they won't have a chance to create issues in the future.

Congratulations! No Error Found.
This document validates as CSS level 2.1 !

Warnings (3)

182
.float_left
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
185
.float_right
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
188
.float_R_PadL-R
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

No comments: