Text too big in Firefox

[bestman233]

Hi all,

I have a website that works great in all version of IE, but when we tested it in Firefox recently, the CSS text was too big? This resulted in some of the text pushing text below it down the page - and as a result messing up the layout slightly.

Does anyone have any ideas? I thought the CSS text should stay the same size, regarless of browser? I've had a look around the site but couldn't find anything - apologies if this is a quick fix. The website is <snip>

Thanks for your help!

[edited by: limbo at 9:21 am (utc) on Apr 13, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

[tangor]

Make sure text zoom is set to normal in Firefox. I've had that happen before.

[bestman233]

Thanks Tangor - it's not a zooming error.

Most of the text (and graphics) on the site are fine. But the text that has been written using CSS is misplaced.

[limbo]

Hi bestmain233

Welcome to WebmasterWorld [webmasterworld.com] :)

Do you have font tags in the HTML? If so they could be opposing the CSS - causing a conflict in the way browser handle the text rendering.

Also, If you haven't done so already, ensure your pages are valid CSS [jigsaw.w3.org]/HTML [validator.w3.org] and that you have included a CSS [developer.yahoo.com] reset in your document head. If there's still a problem then strip you HTML and CSS down the bare basics and we'll have another look.

[Xapti]

Firefox has a minimum font size feature. It will not put any font size smaller than the one set.

You should always design webpages so that it will render in many different circumstances, such as with larger font sizes. Some people may not be able to read the font size you chose, and it doesn't mean they have bad vision, just possibly very high resolution.

The easiest way to do this is to set element size in the EM unit for your container heights and/or widths.
The only reason the page is breaking is because you set a fixed height (or in some cases a width) to a container, so that it will only hold a certain amount of a certain text size.

Because Internet Explorer 6 and 7 are not as standards compliant as other browsers, you should test design under a standards-compliant browser first, then do minor tweaking to Internet Explorer when it doesn't render something properly.

Another reason the text size might be different is if you have a different non-standard DPI setting on the computer, and are using points (pt), inches, centimeter, pica, etc. for your font size. You should not be doing this for webpages, only documents that are designed exclusively or almost exclusively for physical printing.

EM is the best font unit to be using. It will use whatever the default font the browser has set, and scale it from there (1.1 is 10% larger, 0.8 would be 20% less)