We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

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

Why do elements display larger than specified?

  • 2 replies
  • 2 have this problem
  • 4 views
  • Last reply by cor-el

more options

I am developing a website (my first) and I wish it to display much the same on the major browsers. With Firefox, things are 25% larger than I specify. I did a simple test with a div element: < body >< div style="background-color:red; width:300px;" >This is 300px div< /div >< /body >. (Spaces added in this question as otherwise the tags are not displayed.) The size of the div element on my screen is 375px (as determined by pasting an image of the screen into Paint).

My Firefox setting is 100%. I have a 1680x1050 screen and I wondered whether Firefox was making an adjustment based on my screen resolution. I changed the resolution to 1440x900, 1360x768, 1280x1024, 1280x800 and even 800x600 and got the same result.

I could adjust the zoom setting to compensate on my screen, however that is not a solution because I clearly can't do that to visitors to my website.

What is causing Firefox to display larger than I expect and how do I compensate?

PS. When the browser window is maximized and the screen resolution is 1680X1050, document.body.clientWidth and document.body.offsetWidth are both 1311 - giving a ratio of roughly 1.25. Why are clientWidth and offsetWidth not roughly equal to the width of the screen.

I am developing a website (my first) and I wish it to display much the same on the major browsers. With Firefox, things are 25% larger than I specify. I did a simple test with a div element: < body >< div style="background-color:red; width:300px;" >This is 300px div< /div >< /body >. (Spaces added in this question as otherwise the tags are not displayed.) The size of the div element on my screen is 375px (as determined by pasting an image of the screen into Paint). My Firefox setting is 100%. I have a 1680x1050 screen and I wondered whether Firefox was making an adjustment based on my screen resolution. I changed the resolution to 1440x900, 1360x768, 1280x1024, 1280x800 and even 800x600 and got the same result. I could adjust the zoom setting to compensate on my screen, however that is not a solution because I clearly can't do that to visitors to my website. What is causing Firefox to display larger than I expect and how do I compensate? PS. When the browser window is maximized and the screen resolution is 1680X1050, document.body.clientWidth and document.body.offsetWidth are both 1311 - giving a ratio of roughly 1.25. Why are clientWidth and offsetWidth not roughly equal to the width of the screen.

Modified by robertscolaro

Chosen solution

You can set the layout.css.devPixelsPerPx pref to 1.0 to disable the 1.25 increase caused by the Windows DPI setting (default is -1).

Otherwise you need to set the Windows DPI setting to 96..

Read this answer in context 👍 1

All Replies (2)

more options

These support forums are for issues with browsing the web using Firefox. For development related questions I advise using the Mozilla Developer Network.

That said, I would bet Windows' DPI settings are to blame here.

Modified by Mark Schmidt

more options

Chosen Solution

You can set the layout.css.devPixelsPerPx pref to 1.0 to disable the 1.25 increase caused by the Windows DPI setting (default is -1).

Otherwise you need to set the Windows DPI setting to 96..