Pro HTML5 and CSS3 Design Patterns

CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

28

Troubleshooting CSS

You can use the following steps to troubleshoot a style sheet that is not working. I listed the steps in the

order that will most likely help you find the problem quickly.

1. Validate the HTML document. This ensures you have no syntax problems
   that may cause a browser to interpret the structure of the document differently
   than you expect. Developers can use the W3C Validation Service
   (http://validator.w3.org/), the W3C Unicorn Validator
   (http://validator.w3.org/unicorn/), or one of the various browser plug-ins
   that provide markup and style validation.


2. Validate each CSS style sheet. This ensures you have no syntax problems,
   which would cause one or more rules to be ignored.
   
   
   • Make sure a proper unit of measure (UOM) follows nonzero
     measurements and that no space occurs between the number and its UOM,
     such as 1em or 100%. (line-height is an exception; it allows a nonzero
     measurement without a UOM.)
   
   
   • Make sure only a colon (:) and optional whitespace occur between a
     property name and its value, such as width:100% or width : 100%.
   
   
   • Make sure a semicolon (;) closes each rule, such as width:100%;.
   
   
   
   


3. Review the list of CSS parsing errors using the Error Console in Mozilla
   browsers. Browsers ignore each rule that has a parsing error, but unlike many
   other programming languages, they continue parsing and applying the
   remaining rules.


4. Verify a selector is selecting all the elements you think it should be selecting,
   and only those elements. You can easily see the results of a selector by putting
   outline:2px solid invert; in the selector. (Note that outline does not work
   in Internet Explorer 7, but border does.)


5. Look carefully at the cascade priority of each rule that fails to be applied.
   Cascade priority takes precedence over document order. For example,
   #myid{color:red;} takes priority over .myclass{color:blue;}, and #myid
   .myclass{color:green;} takes priority over both—no matter where they
   occur in a style sheet and no matter if they occur in a style sheet that was
   loaded before or after the current style sheet. I find this to be a common cause
   of trouble because a rule with higher cascade priority can be anywhere in any
   style sheet. Assuming you have already validated your style sheet, you can
   often tell when cascade priority is the problem when some properties in a
   selector work, but others do not—no matter what values you use. This typically
   happens when properties are being overridden by another rule with a higher
   cascade priority. You can usually verify this is the case by adding !important
   after a property. !important gives a property a higher priority than all non-
   !important properties. If !important makes a property work, you probably
   have a cascading priority problem.


6. Verify the case of elements, classes, and IDs in the style sheet exactly
   matches their case in the HTML document. This is important because XHTML
   is case-sensitive. You may want to use lowercase values at all times to avoid
   accidental mismatches.