2

my site looks fine untill people start zooming in and out and after hours of work on it and messing with its css I am clueless on how to fix this zoom problem. Should I somehow fix the zoom to a certain level? if so, how can I do it? I tried fixing this zoom issue but putting everything into a table but that isnt really working so I dont know what to do..help..

This is how it looks on safari, its fixed if i adjust my zoom level but initially looks like this:

safari

Then on firefox and chrome looks perfect:

enter image description here

Bulvak
  • 1,774
  • 8
  • 27
  • 62
  • It's a similar discussion [already was discussed](http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript) on the stackoverflow (and even with the same reasons :)) – Samich Sep 02 '11 at 18:27

3 Answers3

5

The zoom level of the browser is something that is strictly the domain of the user - it is bad practice to interfere with user-level choices such as page zoom, and usually you are technically unable to do so anyway. A user will zoom a webpage because they wanted to enlarge it, the reasons are their own and an individual site should not (and can not) interfere with that choice.

Instead of fighting the user, you should seek to design your site in such a way so as to make the content the most important thing. You should craft your design in such a way so that when a user zooms (or makes other changes like disabling CSS or Javascript), the content (presumably the point of having a website at all) is the focus.

Using percentages for your layout, using em for font sizes, and other such techniques will increase the accessibility of your site. See articles like http://24ways.org/2007/css-for-accessibility or http://www.w3.org/TR/WCAG10-CSS-TECHS/ for information on using accessible web design techniques.

EDIT The screenshots demonstrate one of the many pitfalls in trying to prevent accessibility support - different browsers implement zoom in different ways. Some only increase the font size, some enlarge the images, it is not consistent. The trick is to make it not matter, not to prevent it from happening.

Chris Baker
  • 46,402
  • 12
  • 93
  • 112
3

Here's an IE fix

http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm

.css
{
zoom: 1
}
Howdy_McGee
  • 9,729
  • 25
  • 98
  • 172
1

Short answer: No, You cannot modify the end user's browser setting for zoom level.

Maybe you should look into CSS patterns for designing sites that zoom nicely. For example I beleive em's zoom better than point based font sizes. etc

take a look at articles like these: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Also, if you post specific problems we may be able to help solve them on a one off basis

Francis Yaconiello
  • 10,262
  • 2
  • 30
  • 54