Writing cross-browser CSS

Almost without exception, web professionals new to CSS run into problems trying to get their CSS to work as expected in all browsers. It doesn't have to be like that though.

By reading Emil Stenström's Cross-browser strategies for CSS and following the basic but excellent advice in the article, you will greatly reduce browser inconsistencies.

Emil's tips are these (with my comments added):

  • Validate your site. If you don't get your HTML and CSS right, don't be surprised when different browsers have different interpretetations of what your code should do. Also make sure that the CSS properties you use are not browser specific.
  • Stay in standards mode. The requests for Microsoft to "fix the box model" in Internet Explorer would go away if everybody would make sure to force all browsers, including IE/Win, to use their standards mode. The box model is fixed in IE6. Let's say that again: Internet Explorer 6 uses W3C's CSS box model when it is in standards mode.
  • Remove default styling of elements. Also a good idea. I used to use the Global White Space Reset trick to reset margin and padding for all element types. However, since that will also mess with browsers' default settings for form controls, I now prefer doing that only for certain element types, much along the lines of what is described in Starting with CSS: revisited.
  • Browser bugs. Like Emil says in his article, this can cause a lot of problems for somebody inexperienced with CSS. The browser that has the most serious bugs related to CSS is, as most of you know, Internet Explorer for Windows. Reading up on its various CSS bugs at places like Position is Everything is time well spent, and I recommend you start there when you need to fix a bug.

If you're too impatient to read through all of the articles at Position is Everything, my experience from fighting IE bugs has taught me that many problems can be fixed by specifying height:1px for the troublesome element (using your preferred method of feeding that to IE 6 and lower only). If that doesn't help, try display:inline, especially if the element is floated.

Obviously it's better to know why you're doing it, so I highly recommend you do some reading.

I'd like to add two more things that can help keep you out of trouble:

  • Use a standards compliant browser. Avoid developing for a specific browser by using the browser that currently has the best support for CSS as your primary browser while creating the CSS (and preferably the rest of the time as well). Once you're happy with the results, check in less compliant browsers. In practice, this means that you should use Firefox, Opera, Safari, or a browser that uses the same rendering engine as one of them during development, and then check in Internet Explorer and make any necessary workarounds.
  • Keep use of CSS hacks to a minimum. Use hacks or alternative stylesheets as a last resort only. First try to find a workaround that uses the same CSS for all browsers. Some developers go about this the other way around and sprinkle CSS hacks all over their CSS files as soon as any two browsers differ in their interpretation, adding unnecessary complexity.

Keep all of this in mind and you will run into fewer inconsistencies and avoid becoming overly frustrated while learning how to create CSS-based layouts.

Posted on February 7, 2006 in CSS