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

Text is too large and doesn't render well.

Posted

I have created a web page an in Internet Explorer, Sfari, Chrome and Opera all the text fits perfectly and renders well. But in Firefox the text (font is suppose to be Arial 12pt) is too big and the last line gets cut off as it exceeds the allocated space and the way the text is renders looks harsh.

You can see a screenshot at the url below http://www.roadtotheweb.co.uk/bug.jpg

Modified by jimbola

Additional System Details

Application

  • User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

More Information

Application Basics
Name
Firefox
Version
18.0.1
User Agent
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0
Build Configuration
about:buildconfig
Extensions
Name
Version
Enabled
ID
Firebug
1.11.1
true
firebug@software.joehewitt.com
Web Developer
1.2.2
true
{c45c406e-ab73-11d8-be73-000a95be3b12}
Free Download Manager plugin
1.5.7.9
false
fdm_ffext@freedownloadmanager.org
Important Modified Preferences
Name
Value
accessibility.typeaheadfind.flashBar
0
browser.cache.disk.capacity
1048576
browser.cache.disk.smart_size.first_run
false
browser.cache.disk.smart_size_cached_value
286720
browser.places.smartBookmarksVersion
4
browser.privatebrowsing.autostart
true
browser.startup.homepage
https://www.1and1.co.uk/login
browser.startup.homepage_override.buildID
20130116073211
browser.startup.homepage_override.mstone
18.0.1
extensions.lastAppVersion
18.0.1
gfx.direct3d.prefer_10_1
true
network.cookie.prefsMigrated
true
places.database.lastMaintenance
1358612909
places.history.expiration.transient_current_max_pages
21367
privacy.sanitize.migrateFx3Prefs
true
privacy.sanitize.sanitizeOnShutdown
true
security.warn_viewing_mixed
false
Graphics
Adapter Description
NVIDIA GeForce GTS 450
Adapter Drivers
nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
Adapter RAM
1023
Device ID
0x0dc4
Direct2D Enabled
true
DirectWrite Enabled
true (6.1.7601.17789)
Driver Date
10-2-2012
Driver Version
9.18.13.697
GPU #2 Active
false
GPU Accelerated Windows
1/1 Direct3D 10
Vendor ID
0x10de
WebGL Renderer
Google Inc. -- ANGLE (NVIDIA GeForce GTS 450)
AzureCanvasBackend
direct2d
AzureContentBackend
direct2d
AzureFallbackCanvasBackend
cairo
JavaScript
Incremental GC
true
Accessibility
Activated
false
Prevent Accessibility
0
Library Versions
Expected minimum version
Version in use
NSPR
4.9.4
4.9.4
NSS
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSSMIME
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSSSL
3.14.1.0 Basic ECC
3.14.1.0 Basic ECC
NSSUTIL
3.14.1.0
3.14.1.0

cor-el
  • Top 10 Contributor
  • Moderator
10742 solutions 96657 answers

Text will only get cut off if you specify the height of the container or position elements absolutely and that is usually not a good idea.
It is always best to let the browser manage the height to avoid such issues in case the visitor wants to use a different font family or font size.
It also looks that the text in Firefox is bolder or another font is used.

You can use this extension to see which fonts are used for text that is selected (right-click context menu: Show fonts in selection).

As this is a local page it is not possible to check what is happening in this case.
You can use the build-in inspector to see which rules are applied to the text.

Current Firefox versions have a lot of web developer tools build-in.

Question owner

The application that I have to use is WYSIWYG so i have to use absolute positioning and define the height. But again it works fine on all other browsers.

I have put the page on a test server http://www.roadtotheweb.co.uk/student.html

But the font is the same throughout browsers Arial 16px, I never use to have a problem with FireFox doing this..

cor-el
  • Top 10 Contributor
  • Moderator
10742 solutions 96657 answers

I'm not having any problem with the test page unless I zoom in the page with zoom text only or set the minimum font size to larger than 16.

Try to reset the page zoom.

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

Question owner

I tried resetting the View but it did nothing it's already at the right level. I have noticed that if I start FF in Safe mode it works just right, but not in the normal mode, I have disabled all Add-on, Plugin-in, reset FF and even uninstalled and re-installed it but to no avail.

How can I debug from Safe mode to figure out the cause of the issue?

cor-el
  • Top 10 Contributor
  • Moderator
10742 solutions 96657 answers

Try to disable hardware acceleration in Firefox.