Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Browser Zoom

  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Browser Zoom

    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

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jimanji View Post
    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

  • #5
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    > 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

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Maybe em units are working better here?

  • #7
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    I may be coming in late, but it appears fine now in FF, IE9, and Opera.

  • #8
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cineweekly.com View Post
    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

  • #9
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •