Constant pixel size in CSS

Question

I am trying to add some extra padding to the right side of a scrollbar, but when I zoom in the browser window (with ctrl+= and ctrl+-) the actual pixel width of the padding grows and shrinks accordingly (as if I had specified it in ems). I would like the right property for the container to be exactly 8 pixels, not 0.5ems (8/16=0.5).

Is there a way to set the top, bottom, left, and right css properties to a fixed value that doesn't change depending on the font size (I don't mind using JavaScript if I have to)?

Here's my CSS:

#page-bg
{
    background-color: #FFFFFF;
    padding: 0px;
    border-width: 2px;
    border-radius: 2em; 
    position: absolute;
    top: 1em;
    left: 10%;
    right: 10%;
    bottom: 0px;
    overflow: hidden;
    z-index: 0;
}

#page-content
{
    overflow: scroll;
    position: absolute;
    top: 8px; /* these are what I'm talking about */
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1;
}

Zooming works differently in different browsers. Some zoom only the font size (to which the layout then can adapt), some simply zoom the whole layout (including images), such that the effective screen size shrinks. (And some don't support zooming at all.) — Paŭlo Ebermann, Jul 27 '11 at 22:40

score 1 · Accepted Answer · edited May 23 '17 at 09:58

1

To keep the "padding width" fixed even when you zoom, you need to find out the zoom level using JavaScript.

It's sort of possible, but it's totally not worth it because it's unreliable, see: How to detect page zoom level in all modern browsers?

Maybe there's a better way to achieve the same thing - you should post a jsFiddle demo of what you have so far.

edited May 23 '17 at 09:58

Community

1
1

answered Jul 27 '11 at 22:36

thirtydot

224,678
48
389
349

score 0 · Answer 2 · answered Jul 27 '11 at 23:06

Most browsers appear to virtually change the resolution of the page; this change is out of the control of javascript and css. The short answer is you can't and if you find one browser that does work you have to decide between standards and consistency and how it looks on one browser. Html, css and javascript arnt made for this type of control

Constant pixel size in CSS

2 Answers2