Question

I have recently coded a website and tested on all browsers as normal to ensure consistancy across browsers. I have tested on IE 7, IE 8, Chrome and Firefox 3.6.

However, it has been pointed out to me by a user using Firefox 4, that some parts of the CSS are broken. After looking into it, it looks like the font-size is ever so slightly bigger on Firefox 4 than on any other browser, causing text to be pushed down and breaking some of the layout.

I have managed to workaround most of the problems, but the final outstanding issue is that I have a textbox floated to the left with a span, with smaller text inside, floated to the right of it. The span has a border around it and lines up exactly with the height of the textbox. Because of the font-size difference in Firefox 4, the textbox is appearing deeper than it should, meaning that the span no longer lines up at the bottom.

I have had a look around to see if anyone else has experienced any problems with Firefox 4 displaying text bigger than other browsers, but no luck. Has anyone else had the same problem? I don’t like “workarounds” – I would rather find a decent solution to this problem – I must be doing something strange!

Thanks in advance for your help!

EDIT
Code for body to default all font-sizes:

body 
{
    font-size: 69.5%;
    font-family: Tahoma, Verdana, Sans-Serif;
    margin: 0;
    padding: 0;
    background: #4997C4 url(/Images/main_bg.gif) repeat-x left top;
}

Code for one of the problem areas of text:

.content .banner p.content_text
{
    margin: 5px 0 2px 12px;
    font-size: 1.2em;
    color: #38393C;
    width: 374px;
    line-height: 1.3em;
}

Answer 1

You are using relative font-sizes (%, em), so if a user has specified a different default font-size in the browser, the font-size on the page differs. As a solution you could use an absolute font-size, like px. (Same problem with line-height property)

Another problem could be the graphic hardware acceleration in FF 4 (I had some other problems with this), it has some influence on font rendering.