Debugging CSS - introduction

CSS layouts sometimes give unexpected results.

Cross browser compatibility is not guaranteed. Thus it is necessary to verify that our HTML is valid and semantically correct.

The best way not to restart from scratch is to use a full DOCTYPE to be in "Standards Compliance mode", to program with a compliant browser such as Firefox or Opera and to check with MSIE. When issues with MSIE are not too serious, we can deal with them later.

Once HTML validation has been done with HTML Tidy or the W3C online service, we must validate the CSS with the W3C online service or with a Mozilla extension.

If a few issues are left with a browser or an other, a few tools should allow us to find a solution.

Thus three steps illustrated by an example:

  1.  HTML validation 
  2.  CSS validation 
  3.  Debugging 

The other examples only deal with the last step for Internet Explorer or for any browser.

The most usual issues are different positionings, extra margins, jumping divisions, extra text or disappearing text, unwanted gaps, disasters when the screen is resized or text size modified, unenclosing divisions...

The names of the most frequent bugs are: the whitespace bug, the peekaboo bug, the double-margin bug, the duplicate content bug, guillotine bug, multiple class hyphen bug, line-height bug, disappearing list-background bug, unscrollable content bug, three pixel text jog, bugs with pseudo-elements...

We have to add display problems caused by rounding errors or proprietary interpretations of specifications: height/min-height, min-width, max-width, position...

Moreover, a part of the specifications are not supported for a browser or another.

Therefore we have two types of problems: the ones which are specific to Internet Explorer and those that may affect any browser.

To illustrate this page you will find a few examples of bugs and how to use tools to locate the issue and find workarounds.