...

View Full Version : Browser Zoom



GLSmyth
12-15-2010, 03:41 PM
What exactly happens when one zooms the browser (Ctrl + or Ctrl -)? When zooming out this is breaking my page, so I need to understand exactly what is happening. A link to the explanation would be very helpful if one doesn't want to type it all out.

I have placed a reduction of the code at http://glsmyth.com/test.htm. As you can see, the eight boxes fit nicely on the page. However, if one presses Ctrl- to zoom out, the last box on the right flows under the the first box. When I increase the width then I can allow for this and keep the last box on the top line with the others, but as this is a reduction of the full code, doing this causes other problems.

I am not understanding what the browser is doing that would cause this to happen. I am wondering if this is a typical problem and if there is a common workaround to the difficulty.

Cheers -

george

jimanji
12-15-2010, 04:16 PM
Hi GLSmyth,

I tried to figure out what was wrong? I read the code and I believe the border in your nav.primary ul is adding width. Setting border to zero or adding 16 more pixels on you head width, will correct your problem.

VIPStephan
12-15-2010, 05:13 PM
When zoomimg the entire page (not just the text, which is an option at least in Firefox) the browser does have to do some pixel calculation and reduction. The problem is that one whole pixel is the smallest possible unit, there are no half pixels, so sometimes the browser has to figure out how to best reduce a certain amount of pixels which can result in an odd amount of pixels where there was an even amount at 100% zoom level which, as a result, can lead to rounding problems if your layout is very tight, and therefore can lead to such things as a container dropping below another.

GLSmyth
12-15-2010, 05:16 PM
Hi GLSmyth,

I tried to figure out what was wrong? I read the code and I believe the border in your nav.primary ul is adding width. Setting border to zero or adding 16 more pixels on you head width, will correct your problem.

The border is adding width and the page works just fine in the default setting (pressing Ctrl+0 resets the zoom). I need the border so that needs to stay. The page works just fine in the default setting, but the browser is doing something that I do not understand when zooming out, thus the page is breaking. This is for our corporate website so I need to make sure that everything is working properly.

Cheers -

george

GLSmyth
12-15-2010, 05:22 PM
> When zoomimg the entire page (not just the text, which is an option at least in Firefox) the browser does have to do some pixel calculation and reduction. The problem is that one whole pixel is the smallest possible unit, there are no half pixels, so sometimes the browser has to figure out how to best reduce a certain amount of pixels which can result in an odd amount of pixels where there was an even amount at 100% zoom level which, as a result, can lead to rounding problems if your layout is very tight, and therefore can lead to such things as a container dropping below another.
>

I can fix things somewhat by increasing the body width to 1002, which allows things to remain on a single line when zooming out once. But when I zoom out twice the same problem occurs. If I increase body to 1010 then I can zoom out several times, but the page eventually breaks. The problem is that increasing the body size causes other problems, so I wonder if there is a better solution to this.

Cheers -

george

VIPStephan
12-15-2010, 08:22 PM
Maybe em units are working better here?

cineweekly.com
12-15-2010, 08:42 PM
I may be coming in late, but it appears fine now in FF, IE9, and Opera.

GLSmyth
12-15-2010, 08:52 PM
I may be coming in late, but it appears fine now in FF, IE9, and Opera.

If I do a Ctrl- in Firefox 3.6.13 then the problem remains. I "think" that earlier versions of Firefox may not show the problem.

Cheers -

george

cineweekly.com
12-19-2010, 04:58 AM
Ah, I see it now, I was only zooming the text. I believe I had this same problem when working with my CSS menu a long time ago but I can't remember exactly what the problem was. If you want to take a look at my styling, it's at cineweekly.com/core-style.css and all the menu styling is at the bottom.

Usually with these types of problems, it has to do with not specifying width, borders, etc. and relying on default.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum