Okay, so I designed a site which breaks rather irrationally when the page is zoomed out in Firefox and IE 7. Any idea why such a crazy behavior??

Here's the demo: http://office.vxtindia.net/wordpress

Visit this page and try zooming out one level or more, and you'll get the idea. This quirky thing made me think, what do browsers do and how do they exactly zoom in and out a webpage??

2 answers

Remco 80
This was chosen as the best answer

It's a bug in Firefox, caused by the border:


There seems to be no other solution than to give the blocks some breathing and diminish the width a little, so that they do not add up to 100% of the width of the container.

Another solution would be to replace the border with a 1x1px repeat-y background image.

Answered over 9 years ago by Remco
  • Very strange issue, I've never come across it before, thanks for a good explanation :) Kyle Sevenoaks over 9 years ago
  • yup..u r right! Fortunately I solved the problem...by relaxing the wrap width giving the inner elements some space. Frylock over 9 years ago

Here's your problem (so far as I can see)

#r_sidebar {

    background: #FFFFFF;

    float: left;

    width: 268px;

    margin: 0px 0px 0px;

    line-height: 18px;

    border-left: 1px solid #CAD0D4;

    border-top: 1px solid #CAD0D4;


Change the float, because it's set to left, whenever it gains the opportunity to go to the left it will, which will probably happen when it zooms.

Hope that helps!

Answered over 9 years ago by Kyle Sevenoaks
  • setting float to left, right or none...doesn't seem to help! but, If i set the width of r_sidebar (right sidebar) a few pixels less, the zooming issue doesn't happen. Don't kno where I'm going wrong here. Frylock over 9 years ago
  • Very strange issue, I'd keep the float to right and keep the pizels less then, maybe when it zooms the browser doesnt think it can fit the div where you want it at that size, I'm no expert but if that seems to fix it, then keep it like that :) Kyle Sevenoaks over 9 years ago