Recipe 11.8. Diagnosing CSS Bugs and Browser Issues

Problem

You want to troubleshoot an issue with either your code or a browser's rendering of CSS.

Solution

Follow the follow the steps in an effort to isolate issues with CSS-enabled designs:

1. Validate the HTML. Go to http://validator.w3.org/ and check the markup.

2. Validate the CSS. Go to http://jigsaw.w3.org/css-validator/ and check the CSS.

3. Streamline the values of properties. Add a new CSS rule at the end of the style sheet(s), using the universal selector and set properties for all elements:

4. * { margin: 0; padding: 0; }

   
   

5. Border every block-level element:

6. * { margin: 0; padding: 0; border: 1px solid red; }

   
   

7. Try different values for properties.

8. Comment out CSS rules and/or properties that are causing the problem. Uncomment CSS properties one by one until the problem recurs. For information on how to add comments within CSS, see Recipe 1.9.

9. Research similar problems through Google and http://www.positioniseverything.net, a well-documented collection of CSS bugs.

Discussion

Based on personal experience, 90% of the time issues with a CSS-enabled design come from typos in the CSS syntax or malformed markup.

After going through this list, you are still having troubles, do a search through Google or a site devoted to CSS bugs to determine if anyone else has written and/or discovered a similar problem.

See Also

Read Cascading Style Sheets: The Definitive Guide, by Eric A. Meyer (O'Reilly Media) to learn more about the CSS specification.