Font and line spacing in different browsers

Question

Is there a sensible way to control the spacing between fonts in all browsers so that the text aligns as intended without reaching the absolute positioning? Take the following example from a project I'm working on:

The first is Firefox 3.5, the second is IE 8, the third is IE 6. The displayed form is contained in an absolutely positioned div and laid out using ol / li elements. I have a bottom 5px field for each item in the list to provide an interval, but apart from that, everything is displayed on the line. I know that every browser renders fonts differently, and this is what explains the creep in between, but it can become completely nude (this particular form gave me hell) when I tried to lay things in a fixed area (for something like modal dialogue).

Answer 1

Deploy the CSS reset stylesheet, and then explicitly set all your styles yourself.

This will eliminate the trend that different browsers should apply a bit differently. For example, one browser will use padding-left for bulleted list items, and the other will use margin-left. (I forget that something is doing. Therefore, I always use reset!). If you reset first, you can make your own decisions about font sizes, line heights, fields, etc. And to have them come out quite consistently in different browsers.

A great place to start is Yahoo reset.css here or try this other one here . Searching google reset css "will lead you to a lot of discussions, pros and cons regarding this approach.

Good luck

Answer 2

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

 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 style the same in all browsers.

Answer 3

Another option is to add a height declaration for each parent element. Thus, the height of the contained text will not matter if you take the highest of the three and set it as the default height.