Home/ Questions/Q 8066827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T12:06:54+00:00

Setup: I have a simple box with rounded corners, that has a header and

  • 0

Setup:

I have a simple box with rounded corners, that has a header and expands according to the amount of text, as discussed in Dan Cederholm’s Bullet Proof Web Design (ISBN 0-321-34693-9).

Works great, EXCEPT when zooming in Google Chrome. Then the right margin of the box disappears.

It works in IE and FireFox without problems.

Example:

Example in jsFiddle

In chrome, it fails at zoom 110% and other zooms too. No problems in IE or FireFox.

Questions:

  1. Any ideas what is causing this?

  2. In general, what makes layouts zoom-sensitive (if any such general rule exists…)?

  3. Is Dan Cederholm’s book really bullet proof…?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, you’re using a background-image, something I would have loved you to have mentioned.

    1) So yah, as mentioned in the comments below your post, it’s just rounding errors of the div, which crops the background-image.

    2) I have no sources sadly, but in my experience, objects using text as a measurement are zoom-sensitive, pictures sometimes not zooming relative to everything else, and content with a predetermined ‘set’ size (such as textareas, radios buttons, etc).

    3) Nothing is bullet proof, especially with something as ever-changing as the web that also behaves differently on different browsers. Hazards of the trade.

    • 0