Why is text spacing bigger in Firefox than all other browsers?
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.
Alla svar (7)
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?
"...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
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)
@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?
Ändrad av gcmax
Can you attach a screenshot to show how you see it?
- http://en.wikipedia.org/wiki/Screenshot
- https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
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)
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.
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.