cancel
Showing results for 
Search instead for 
Did you mean: 

Text is too large and doesn't render well.

Highlighted
New Contributor

Text is too large and doesn't render well.

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

Tags (2)
5 REPLIES
Site Moderator

Re: Text is too large and doesn't render well.

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.

New Contributor

Re: Text is too large and doesn't render well.

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..

Site Moderator

Re: Text is too large and doesn't render well.

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)
New Contributor

Re: Text is too large and doesn't render well.

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?

Site Moderator

Re: Text is too large and doesn't render well.

Try to disable hardware acceleration in Firefox.