Some Tips for Troubleshooting CSS Problems


Tip 1Make sure you validate your HTML and CSS files. Seven of the twelve problems listed previously would be immediately picked up by the CSS validator.

You can find the W3C HTML validator at http://validator.w3.org/. The W3C CSS validator is at http://jigsaw.w3.org/css-validator/.

Tip 2The best way to avoid problems, especially when you are new to CSS, is to build your layouts in stages and test each stage across a range of browsers. Start with the overall framework, position these elements, and test across browsers. When you feel confident that the framework is stable, you can start styling more detailed elements.

Tip 3If there is a specific problem on a page, it often helps to turn on borders so that you can identify the elements and see how they interact. An example of turning on borders is shown in Listing 22.26.

Listing 22.26. CSS Code Showing a Rule Set to Turn On Borders
 li a { border: 1px solid red; } 

Tip 4A quick technique for finding major errors in the CSS is to comment out one rule set at a time (as shown in Listing 22.27) and observe the results. When you have found the offending rule sets, you can begin commenting out declarations within these sets to find the culprit.

Listing 22.27. CSS Code Showing a Commented-Out Rule Set
 h2 {     font-size: 120%;     font-weight: normal;     color: #34a323; } /* p, ul, {     font-size: 80%;     color: #333; } */ 

Tip 5Whenever possible, use a full and complete doctype at the top of your (X)HTML document. All (X)HTML documents must have a doctype declaration to be valid. The doctype states the version of (X)HTML being used in the document. Web browsers use doctypes to determine which rendering mode to use. If a correct and full doctype is present in a document, many web browsers will switch to Standards mode, which means they will follow the CSS specification more closely.

The main doctypes are shown in Listings 22.28 to 22.32.

Listing 22.28. HTML Code Showing HTML 4.01 Strict Doctype
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> 

Listing 22.29. HTML Code Showing HTML 4.01 Transitional Doctype
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 

Listing 22.30. HTML Code Showing XHTML 1.0 Strict Doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Listing 22.31. HTML Code Showing XHTML 1.0 Transitional Doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Listing 22.32. HTML Code Showing XHTML 1.1 Doctype
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 




Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net