Text Boxes not displaying correctly. Linux
Hello, I am having trouble with Firefox not wanting to display fonts or text boxes correctly in some situations. I am providing two screen shots from a client bridge configuration page to illustrate the problem. One shot is of Firefox and the other is from the Chromium browser that came with Zorin. The boxes display perfectly in Chromium but, as you can see, there are issues in Firefox (font color is grey, font too big, box background transparent, box not large enough for text). I have tried playing with the font and color settings in preferences but all i managed to do was get the background of the text boxes to display white, unfortunately, this also caused many more appearance problems with other websites so i changed it back... I am using distro of Linux called Zorin OS 12.4. and a fresh install of Firefox 63.0.3.
I guess I could use the Chromium browser instead, but I'm a big fan of Firefox and would rather use it ;) ANy help would be much appreciate Thanks, Derek
Modified by James
All Replies (10)
Hi Kingsnake
You wrote: "I am having trouble with Firefox not wanting to display fonts or text boxes correctly in some situations."
I tried typing in: http://192.168.1.254/cgi-bin/luci/;stok=be3c45a9eb709493efc32c72543edd16
but this didn't work for me because I guess it's an internal URL, please reply with another publicly accessible URL with a similar problem (we can't troubleshoot without a public URL) so we can help further.
Cheers!
...Roland
This can happen if a font or font-size is used that takes more space then the page provides.
If you have made changes to Advanced font size settings like increasing the minimum/default font size then try the Default font size setting "16" and the Minimum font size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> General: Fonts & Colors -> Advanced -> Minimum Font Size (none)
Make sure you allow pages to choose their own fonts.
- Options/Preferences -> General: Fonts & Colors -> Advanced
[X] "Allow pages to choose their own fonts, instead of my selections above"
Did you try to zoom out the page? You can also try to use "Zoom > Zoom Text Only"
You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected. You can check the font used for selected text in the Font tab in the right pane of the Inspector.
Note that this is not about the font-family CSS rule, but about the font that Firefox actually uses as shown in the Font tab.
Thank you for your suggestions, I checked all of the options you mentioned and found them to be the default settings... I clicked Inspect Element and i think I am seeing where the font size is supposed to be 12pt, but Firefox is displaying a much bigger font... Check it out. It's almost like the option to "allow pages to select their own fonts" is not registering somehow... -Derek
Hi Derek, can you inspect the font details for the individual inputs that are further down the screen?
Like this?
In your second screenshot, it shows the text input for the 3 digits should be 30 pixels wide. In the Layout diagram, it shows an inner width for content of only 14 pixels, and a border width of 7 pixels. That's very strange for a text input.
Hi again Kingsnake:
Again debugging via screenshot is really difficult :-) Amazing that jscher2000 can help so much, thanks jscher!
A public website with a similar problem would be best if you can post one please :-)
I would also suggest filing a support request with Engenius
Cheers and happy holidays!
...Roland
Yeah, I have been looking around for a public website that doesn't display correctly. My main concern is www.prodemand.com that doesn't display correctly... But it is a subscription service, so that doesn't do me much good either... As soon as i find something ill post back. THanks again for your help! -Derek
On the Computed tab you can see what rules set specific properties, so maybe check where this big border comes from. You can tick the box to show all browser styles. You can click a horizontal twisty next to a property to expand a specific rule for more information.
Ok here is screen shots of that from both the linux machine and my Windows machine...
