29 Dec 2008

Modernizing a web page (2): the CSS pitfalls

Once you completely chuck out HTML tables (at least for layout purposes) and go for a pure CSS approach, you have to account for the problem that not every browser (Internet Explorer, Firefox, Google Chrome, Opera etc etc) respectively not all browser version do render the page the same -- and in particular the Internet Explorer versions 5.x and 6 are likely to get you in lots of trouble due to a variety of infamous and significant CSS rendering bugs.

Wanna see an example of how badly the CSS rendering differences can affect a page ?

1. Here´s how the standards compliant browsers Firefox 3, Opera 9, Google Chrome and Internet Explorer 7 render the page:



2. and here you can see how the Internet Explorer versions 5.5 and 6 manage to bump down the central "mainContent" container by approx. 4oo pixel:




Fortunately enough there´s the possibility to make use of the so-called Internet Explorer Conditional Comments which tell this browser to conditionally include a different stylesheet file and/or override the existing values of defined CSS properties with values which are getting interpreted by IE only. In this case I used a Conditional Comment which...
  • is meant to affect the IE versions equal to / lower than 6 ([if lte IE 6])
  • will apply a negative value of -400 px to the CSS property "margin-top" for the #mainContent - ID selector
As IE 5.5 renders stuff differently from IE 6, it´s needless to mention that I - strictly speaking - would have had to apply a slightly different "margin-top" value for IE 5.5 -- but then again the display differences have not been that significant, and the IE 5.x versions are on their way out, while the version 6 is still installed on many PCs.

Care for some browser usage stats ? Although it´s debatable if the browser statistics published on sites such as W3schools.com are really 100% representative, they certainly do provide some helpful clues:

IE 6:
  • in November 2002: 53,5 %
  • in August 2008: 24,5 %

IE 5:
  • in November 2002: 29,9 %
  • in August 2008: 0,1 %


With great power comes great responsibility. The more CSS rules a web developer/designer throws into a page, the more he/she is actually required to test the page in a variety of commonly used browsers and (if possible) browser versions in order to ensure that the page layout will at least, err... *work* in all relevant browsers.

Did you note that I didn´t say "look exactly the same" ? Well, this simply isn´t possible, and all you can do is to make sure that the CSS rendering differences are as insignificant as possible.

No comments: