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

One other option is to add a height declaration to each parent element. That way the height of the contained text won't matter so long as you take the tallest of the three and set that as the default height.

Answer 2

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!

Answer 3

Include something like this to the top of your main CSS file, or include it in a CSS file of its own:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,
td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;
font-size:100%;font-family:inherit;vertical-align:baseline;}

This will clear all browser-based styles, making your CSS styling appear identical in all browsers.