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;
}

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