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):

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:

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