css - Font and line spacing in different browsers

Question

Is there any reasonable way to control font spacing across all browsers such that text will line up as intended, short of absolute positioning? Take the following example from a project I'm working on:

The first is Firefox 3.5, the second is IE 8, and the third is IE 6. The form being shown is contained within an absolutely positioned div and is laid out using ol/li elements. I have a 5px bottom margin on each list element to provide spacing, but other than that, everything is rendered inline. I'm aware that each browser renders fonts differently and this is what accounts for the creep in spacing, but it can become quite a nuissance (this particular form gave me hell) when trying to lay things out in a fixed area (for something like a modal dialog).

Answer 1

Implement a reset CSS stylesheet, and then explicitly set all of your styles yourself.

This will eliminate the tendency different browsers have to apply slightly different defaults. For example, one browser will use padding-left on bulleted list items, another will use margin-left. (I forget which one does what. That's why I always use reset!) If you reset everything first, you can then make your own decisions about font-sizes, line-heights, margins, etc., and have them come out pretty consistently in the various browsers.

A great place to get started is with Yahoo's reset.css here or try this other one here. A google search for "reset css" will lead you to lots of discussion, pros, and cons with respect to this approach.

Good luck!