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
- All posts
- Helpful Solutions
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.
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..
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)
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?
Try to disable hardware acceleration in Firefox.
- Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"