CSS border scaling

Question

I have a set of A tags with display set to block. Each each is specifically has a border on the right. They fit perfectly into a container. However, when the page is zoomed out using the browser's zoom control, everything but the borders scale and the layout is broken. Is there a way to fix this?

This behavior can be replicated in Firefox 3.6.10 and Safari 4.

I had never before noticed that the borders do not scale.

Answer 1

Sounds like a browser bug. What browser do you use?

Answer 2

try to set the border-with in em instead of px - if your font-size is 12px, you could write

border-width: 0.09 em;

this will be 1px width in normal size, and hopefully it scales correct (can't test it now, sorry).

Answer 3

There are other things that won't scale either -- radio buttons and select boxes are the classic ones, though it does differ between browsers.

Also, you'll get different effects depending on the sizing units you use for your CSS -- ie whether you use %, px or em, etc. Again, this will vary between browsers.

So the bottom line is that using the browser's zoom function is likely to break things on your layout. I honestly wouldn't expect things to be perfect with zoom, nor the same results in different browsers.