Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Some information is obscured by other text on webpage

  • 21 replies
  • 2 have this problem
  • 9 views
  • Last reply by Figgerty

more options

Part of a webpage obscures a previous part. The webpage owner tells me its my browser and I accessed the same webpage using Google and it was ok. So it appears to be the fault of Firefox. How do I fix it. I restarted in safe mode but the website is the same.

Part of a webpage obscures a previous part. The webpage owner tells me its my browser and I accessed the same webpage using Google and it was ok. So it appears to be the fault of Firefox. How do I fix it. I restarted in safe mode but the website is the same.

Chosen solution

You're welcome.

Websites that use absolute dimensions, and then especially the height, for (text) containers are usually very sensitive for any changes in font size. You usually notice immediately that there are issues if you lean to recognize its effect and then you will have to undo the changes (temporarily) if it is really worse like in your case and content get lost.

Using full page zoom won't cause problems in most cases, but I've sen cases when even zooming causes issues. If it is on sites that you visit daily then you can invest some time to see if you can come up with a stylesheet with code for userContent.css or Stylish to disable specific height settings (i.e. apply height:auto!important;) and/or set font-size settings. Zooming has the disadvantage that content that is already large will even get larger (this forum is an example: some text is extra large and some smaller that 100%).

Read this answer in context 👍 0

All Replies (20)

more options

Reload the webpage while bypassing the cache using one of the following steps:

  • Hold down the Shift key and click the Reload button with a left click.

OR

  • Press Ctrl + F5 or Ctrl + Shift + R (Windows and Linux)
  • Press Command + Shift + R (Mac)

Let us know if this solves the issues you are having.

more options

I have uploaded an image of the page concerned. You can see the top right text second paragraph is obscured by the blue van. In fact there is another paragraph below it which is not visible.

Modified by Figgerty

more options

If you have made changes to Advanced font settings like increasing the minimum font size then try the default setting "none" in case the current setting is causing problems.

  • Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)

Make sure that you allow pages to choose their own fonts.

  • Tools > Options > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"

It is better not to increase the minimum font size, but to use an extension to set the default page zoom to prevent issues with text not being displayed properly.

You can use an extension to set a default font size and page zoom on web pages.

more options

Tried it all nothing worked.

I have not changed font sizes and pages select their own. The only difference is using this EDF website for my energy meter readings. I last used it in May and I did not notice a problem then. Provided this problem does not effect my regular sites then it wont worry me to much but I do hate not knowing what is going on.

more options

This is what the web page should look like.

Modified by Figgerty

more options

Have you zoomed the webpage out or use Ctrl + 0.

  • To make things bigger, press Ctrl and &#43 at the same time.
  • To make things smaller, press Ctrl and - at the same time.
  • To reset the size back to normal, press Ctrl and 0 at the same time.
more options

Okay, this is a guess.

As you may have noticed, Firefox 22 and later adjust the page zoom level according to your Windows settings, to better supporting high DPI displays. Some sites which try to rejigger the page layout in a script do not work correctly with this new feature.

If your Windows zoom level is higher than 100%, in order to get such pages to lay out correctly, you need to "unzoom" the page just enough to return to the equivalent of 100%, then reload the page. Then the script will recompute the layout and it should return to how it appeared in Firefox 21.

To determine how many steps to zoom out, you can use this test page and see how many times you need to Ctrl- to get the devicePixelRatio=1:

http://dev.jeffersonscher.com/resolution.html

Then on the problem page, reset zoom to default (Ctrl+0) and apply Ctrl- the same number of times as on the test page, then reload (Ctrl+r).

Does that make any difference?

more options

I use this occasionally when I have difficulty seeing anything small. I know how to reset to normal so that is not the problem. I am on normal settings and still have this problem.

I don't understand what I'm supposed to do in the linked page. By default (Ctrl 0) the page fills the screen nicely. When I return to the problem webpage and reload the page nothing changes - apart from being logged out - but when I log back in and return to the same page the problem is still there. If I reduce the size (Ctrl -) everything gets smaller including the problem. Because I only use this website every three months for supplying my energy usage figures and examine my bill I can't say how long the problem has existed. I am not having problems on other sites.

I really appreciate all your help in trying to resolve the problem but it seems to be unresolveable, at least in Firefox 23. Perhaps someone could look at the two copies of my print screen and let me know if what is shown as the problem is the sme as others are experiencing as a result of changes to Firefox 22 +

Modified by Figgerty

more options

Is zoom text enabled or are you using full page zoom?

  • View > Zoom

If I compare the GC screenshot and the Firefox screenshot then the page looks slightly zoomed out and the columns are smaller like a larger font is used.

If you open the built-in Inspector via the right-click context menu, what gets selected if you right click the image?


You can remove all data stored in Firefox from a specific domain via "Forget About This Site" in the right-click context menu of an history entry ("History > Show All History" or "View > Sidebar > History") or via the about:permissions page.

Using "Forget About This Site" will remove all data stored in Firefox from that domain like bookmarks, cookies, passwords, cache, history, and exceptions, so be cautious and if you have a password or other data from that domain that you do not want to lose then make a note of those passwords and bookmarks.

You can't recover from this 'forget' unless you have a backup of the involved files.

It doesn't have any lasting effect, so if you revisit such a 'forgotten' website then data from that website will be saved once again.

Modified by cor-el

more options

The zoom setting in GC was 125% but when I checked View Zoom in Firefox Zoom Text Only was not selected, I reset zoom and reloaded the problem page and the problem still existed, no change.

The second part of your post about Page Inspector. I clicked your link and did not know where to go from there:

"choose the "Inspector" option from the "Web Developer" menu" The menu on RH side, is that the one?

I have right clicked on the problem page and selected Inspect Element and a whole lot of programming popped up in the bottom third of the screen. Is this what you want to check?

I have selected 'Forget about this Site' , returned to the EDF problem site and nothing has changed. That is the history eliminated.

Modified by Figgerty

more options

OK a supplementary question regarding Zooming. On GC I can easily see a zoom level of 125%, where can I check my zoom percentage in Firefox?

What is the default font size in Firefox, mine is set to 18 but I have now changed it to 16. I see GC is set to 16. So both are now the same.

Hey presto, changing default font size from 18 to 16 seems to have solved the problem. And this is with sites allowing to choose their own options. I have set it to 18, checked the site and the problem exists, once I set it to 16, the webpage is fine. So is zooming, to plus 4. Again, where can I select a percentage zoom in Firefox..

How on earth can I know if text size or zoom level is compatible for a site. This is the only site I have had a problem with. I thought allowing sites to choose their own options was supposed to prevent problems like this. I'm glad I didn't have to go into Inspecting Elements!!

Modified by Figgerty

more options

Try to set the minimum font size to none like suggested in one of my above replies.

The minimum font size can affect margins and white space and text can run out containers and cause issues like this.

  • Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)

You would need an extension to see the current zoom level.

more options

cor-el

I did not give this post enough attention because it was about setting a minimum text size and allowing websites to set their own fonts. None applied to me. Now I need to look into it more because I may have other problems in the future relating to font size and both of the links supplied may be the answer. I try not to have too many add-ons as the first thing suspected in a problem is an add-on, so it's easier not to have too many.

Thanks for your help.

more options

cor-el

The Minimum Font Size is and has always been set at None under Advanced. I checked that when you mentioned it first. It is on that page that sites are allowed to set their own fonts instead of my settings. On the first page under Content the default font is set to Times New Roman, size 16 (was 18) the minimum on that setting is size 9 which is far too small.

more options

cor-el

I am amazed that something as simple as having my font size of 18 should make such a difference. Just 2 points difference. How do I know that a different website will have issues with size 16 font. It seems ridiculous that all websites are not able to use my settings or allow their settings to override mine.

I have downloaded the Zoom and Nosquint Add-ons and I'm sure I will find them really useful. Thanks again for your help.

Modified by Figgerty

more options

Chosen Solution

You're welcome.

Websites that use absolute dimensions, and then especially the height, for (text) containers are usually very sensitive for any changes in font size. You usually notice immediately that there are issues if you lean to recognize its effect and then you will have to undo the changes (temporarily) if it is really worse like in your case and content get lost.

Using full page zoom won't cause problems in most cases, but I've sen cases when even zooming causes issues. If it is on sites that you visit daily then you can invest some time to see if you can come up with a stylesheet with code for userContent.css or Stylish to disable specific height settings (i.e. apply height:auto!important;) and/or set font-size settings. Zooming has the disadvantage that content that is already large will even get larger (this forum is an example: some text is extra large and some smaller that 100%).

more options

cor-el

I have downloaded Full Page Zoom and Nosquint Add-ons and am now using Nosquint with the other disabled. I will eventually decide which one to keep.

My main problem when I need to zoom is when I am entering logins and passwords and especially when I have to check if I entered a full stop or a comma in .co.uk for instance. Depends on if I'm sitting straight at the keyboard.

I'm surprised this is the only site I have had this problem with.

Thanks again for your help and for staying with me to reach a solution.

more options

A mono-space font is useful to enter text more easily.

I can't remember if NoSquint as a setting for the font used in input fields and text areas.

more options

Hi Figgerty, you wrote:

I am amazed that something as simple as having my font size of 18 should make such a difference. Just 2 points difference.

Website developers typically work at the default setting (16 pixels) and may assume that it won't change. There are numerous way to specify the sizes of elements in HTML, including absolute measurements such as pixels, and multiples of the default. Either works, but mixing them may cause the problem you saw. For example, paragraph text set to the default size, but images placed based on a specific number of pixels from the top of the column. Once the font size increases, the image would be too high up relative to the intended spot.

I haven't gone searching for that site to examine its code, so that's just a guess on my part as to what went wrong.

more options

This was the only time I have experienced the problem and by having selected 'allow pages to choose their own font' I am still puzzled as to why it happened. Users like me change settings to suit their use and it is worrying that their settings or mine can cause this problem.

Size 16 font will remain my default and the Advanced minimum font size will remain None as always. I will use Nosquint to zoom in and out for hard to see stuff.

Thanks for your interest.

Modified by Figgerty

  1. 1
  2. 2