CSS Troubleshooting

Many people asked me about CSS troubleshooting / debugging. This article is specifically written for those who are coding using DIV approach but facing issues and they don't know how to trouble shoot the issues.

1. The first and simplistic method is using Adobe Dreamweaver CSS Panel. Just click on your HTML code and you will able to find all selectors and their values in CSS Panel. You can find CSS Panel from Menu Bar > windows > CSS Style (Shift + F11).
   
   
2. Second Method is also a simple one, Use multi level selectors for defining outlines by uncommeting following code one by one/* * { outline: 2px dotted red }
   
   /* * { outline: 1px solid red }*/
   /* * * { outline: 2px dotted green }*/
   /* * * * { outline: 2px dotted orange }*/
   /* * * * * { outline: 2px dotted blue }*/
   /* * * * * * { outline: 1px solid red }*/
   /* * * * * * * { outline: 1px solid green }*/
   /* * * * * * * * { outline: 1px solid orange }*/
   /* * * * * * * * * { outline: 1px solid blue }*/
   
   
3. Third Method is commonly used by web designers and developers. "Firefox Addon - Web Developer Toolkit" You can download it by following the link above . You can troubleshoot your CSS by enable / disable CSS OR Apply Border Function.
   
   
4. The most widely and my favorite one "Firefox Addon - Firebug", You can download it by following the link above OR visit its official website to explore what can you do with firebug http://getfirebug.com/. You can check any website presentation, user behaviour code , edit it and can even duplicate it with the help of this tool. Firefox also have a Lite version for other browsers such as I.E, Opera and Safari e.t.c you can download it from http://getfirebug.com/lite.html
   

The cascade

Style sheets may have three different origins: author, user, and user agent.

• Author: The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
• User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
• User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.

Note: that the user may modify system settings (e.g. system colors) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.

Cascading Order
To find the value for an element/property combination, user agents must apply the following sorting order:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations
3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Apart from the "!important" setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu. Conformance to UAAG 1.0 checkpoint 4.14 satisfies this condition

A simple solution for IE6 PNG support is
HTML Code:
< div class="iePng_logo" id="ieBg"> <img src="images/logo_png.png" class="ieHide" /> </div>

CSS Code:
.iePng_logo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_png.png',sizingMethod='scale'); width:307px; height:34px;}
.iePng {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/screenshot.png',sizingMethod='scale'); width:438px; height:230px;}
.ieHide {border:0 solid #fff; _display:none;}
#ieBg {border:0;}

You can check its working demo from the following URL, Check top left logo in all browsers its transparent PNG, you can save it and check its transparency
http://expertsdesk.net/novotech/