X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

Why is text spacing bigger in Firefox than all other browsers?

Posted

I am a web designer and while testing our site since the last 2 updates to Firefox (including the latest 14.0.1) I am experiencing large text sizes for custom text, even when using pixels, pt or em.

Internet Explorer and Google Chrome have kept the same webkit/text size but Firefox has not, so my layout is broken!

We need a standardised display kit here, not browser individualisation like this. Can you actually fix this issue so us designers don't have to work around you?

Thank you for your attention.

Additional System Details

This happened

Every time Firefox opened

This started when...

Since the penultimate update

Installed Plug-ins

  • Google Update

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0.1

More Information

Large text size/spacing destroys layout.
Devices: Laptop, Desktop.
Affects: *Windows.
Tested on: XP, Vista, 7.
*Not tested on other operating systems.

jscher2000
  • Top 10 Contributor
2344 solutions 20793 answers

The support volunteers aren't the programmers, but we can help identify whether something is a known or new bug in Firefox, a configuration issue (i.e., you are helpless because it's up to the user), or a coding issue.

Can you provide the URL for the problem page and indicate which fonts have the issue?

the-edmeister
  • Top 10 Contributor
  • Moderator
3193 solutions 24375 answers

"...when using pixels, pt or em"

How about relative-size values so the you don't inadvertently override the users preferences?

As explained here: http://www.w3.org/TR/CSS21/fonts.html#font-size-props

cor-el
  • Top 10 Contributor
  • Moderator
10737 solutions 96600 answers

Which font is used for that text?

You can use this extension to see which fonts are used for selected text.

We've seen issues reported that some fonts increase the (vertical) spacing in Firefox.

  • bug 739804 - ⇓ character entity and similar symbols cause excessive line-spacing under GDI

(this should be fixed in Firefox 14)

Question owner

@jscher2000 I didn't mean to sound rude as I was unaware that this forum was purely for volunteers and wouldn't include Mozilla staff also!

The URL in question is: http://www.bellsdomestics.co.uk/help.html

The second and third left hand boxes, entitled "Company policy" and "Payment methods" are the problem.

@the-edmeister Well, I presume that this would be even more of a wildcard as these sizes are not accurate like pixels or pts. Nevertheless, the display is still reliant on using the Firefox browser webkit which has obviously been altered since the last 2 updates as the text size has increased while Chrome and IE are the same.

@cor-el the font is a standard font written in a separate css file as: font-family:"Arial", Helvetica, sans-serif;

Character wise, apart from the dashes, there’s isn't anything special going on. Just Arial with some custom colours, here’s an example from the css;

span.txt_style_2 {font-family:"Arial", Helvetica, sans-serif; font-size:10pt; color: #2d2d2d;}

That’s about as complicated as it gets. However, the text is contained within a div in a div which has a 1px border. Maybe this is where Firefox is failing?

Modified by gcmax

cor-el
  • Top 10 Contributor
  • Moderator
10737 solutions 96600 answers

Can you attach a screenshot to show how you see it?

Use a compressed image type like PNG or JPG to save the screenshot.

Did you try to use the Inspector (right-click: Inspect Element) to see if there are any problems with that part?

I'm not seeing anything that looks wrong with the .
That text seems to have this style rule:

span.txt_style_10 {font-family:"Arial", Helvetica, sans-serif; font-size:10pt; color:#000000;}

Reset the page zoom on pages that cause problems.

  • View > Zoom > Reset (Ctrl+0 (zero); Cmd+0 on Mac)

Also make sure that you aren't using an increased minimum font setting.

  • Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
jscher2000
  • Top 10 Contributor
2344 solutions 20793 answers

Helpful Reply

The difference I see between Firefox 14 and IE9 is the implicit/computed line-height. This might be related to the conversion of point measurements to pixel measurements. I'm not sure how the font-size on a span element affects line-height; you might need to set that on its container.

cermix 0 solutions 1 answers

I've solved this problem in my case. Try to check your DOCTYPE declaration. I had this declaration in two rows (line breaked):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Web service which parsed my source cutted the second line. Line height in Firefox has grown twice more than in other browsers.