" " displays differently from Chrome in various versions of Firefox. Why?
I have an ASCII banner on my website that is not displaying correctly in Firefox. Certain versions of Firefox display the banner differently that other versions. To me this suggests that various versions of Firefox handle " " differently. I am really unsure how to resolve the issue, particularly since different versions of Firefox appear to have issues with the banner in different ways.
A test page is located at www.shasharala.net/fxIssue for your perusal.
All Replies (3)
Seems to be working fine here.
Can you attach a screenshot?
- 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
- Make sure that you do not exceed the maximum size of 1 MB
You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer). You can check the font used for selected text in the Font tab in the right pane of the Inspector to make sure that the specified monospace font is used and not a proportional font.
- font-family: "ubuntu_mono",sans-serif;
Make sure that you allow pages to choose their own fonts and haven't changed the default font settings in case that is causing the problem. .
- Edit > Preferences > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
You may have zoomed web page(s) by accident. Reset the page zoom on pages that cause problems.
- View > Zoom > Reset (Ctrl/Command+0 (zero))
I have checked what you have suggested but everything is checking out. The page zoom is set to 100%, the .banner element is using ubuntu_mono as its font, and Firefox's preferences are set to allow a page to choose its own font.
I've updated the page some and provided images in this post to illustrate what I am seeing on Firefox 35.0.1. I do receive similar issues with other versions of Firefox.
Upon further testing it seems that when I remove "font-weight: bold" from the .banner element that the banner displays correctly in Firefox.
It also will display with only small problems near the bottom if the font-weight is left alone but the width of the banner element is removed. This issue is more akin to what I see when I use Firefox on Windows.
This is quite curious to me. Is it possible that Firefox is handling font-weight in an odd way? I have checked Firefox's Inspector and the .banner element is certainly set to match the supplied CSS.
I have attached an image of what happens when the width of the banner element is removed.
Modified by shasharala