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
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:
- in November 2002: 53,5 %
- in August 2008: 24,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.