Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

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

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

Why do elements display larger than specified?

  • 2 amsoshi
  • 2 sa na da wannan matsala
  • 4 views
  • Amsa ta ƙarshe daga 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.

An gyara daga robertscolaro

Mafitar da aka zaɓa

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..

Karanta wannan amsa a matsayinta 👍 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.

An gyara daga Mark Schmidt

more options

Zaɓi Mafita

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..