16

I am working on a new website, which should be "perfect" - compatible with ie6+, ff, chrome, opera & safari.

I made it compatible with all those browsers but there's one problem I cant handle - when changing the zoom, all the layout become disordered.

Sample fiddle with the problem: http://jsfiddle.net/pdQrQ/1/

In Chrome (14.0.835), FF (7.0.1) & IE9, when zooming out - the top right box size is changing (atleast it looks like it) and then it is not right aligned with the box below.

Edit:
I know what's the cause - the border!

Explanation: the zoom function on every browser changing the width/height of the div but not the border size therefore it cause this glitch/float. if I remove the border everything works perefct.

but I want to use border or else my design will be much uglier.

How can I fix?

Thanks!

Ron
  • 3,677
  • 16
  • 69
  • 117
  • You might want to start here http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers and see if you can change the layout based on the logical/physical DPI ratio. If you figure out a more elegant way it would be great if you post it. – Andrew T Finnell Oct 20 '11 at 11:37
  • the question is too broad. it's like saying, I built a car, but it doesn't start, why not? Post the basic html layout with the css code. But the "perfect" part of the question if you want to support ie6+ and all other browsers is nearly impossible. – ashwoods Oct 20 '11 at 11:37
  • A code sample or link to the page in question would be useful. Also details on whether it is broken when zooming in all browsers, etc. – Chris Oct 20 '11 at 11:38
  • It depends what you mean by 'disordered'. The 'Zoom' function in browsers, as far as I know, is not a true zoom, but just affects the size of text. This means that the relationship between your text and anything else - including all 'box' formatting -will change, and so the overall layout will be different. – Colin Fine Oct 20 '11 at 11:39
  • - I added more info and link to the sample. @Colin-Fine, I know that the 'zoom' function is not a true zoom but it exist and people use it. I want to know how to fix it.... – Ron Oct 20 '11 at 11:52
  • Cannot repro in IE8, FF7.0.1 or Chrome 14.0.835.202. In all three of these browsers it scales exactly as I would expect, keeping the same ratios and so on, even when it got wider than the screen. Are you sure you are not just changing font size which will obviously be a very different matter... – Chris Oct 20 '11 at 12:31
  • @Chris - I am using ctrl+mousewheel to change the zoom. I am sure i am not changing just the font size... It works perefct to you in FF7.0.1? I am using 1920x1080 resolution. – Ron Oct 20 '11 at 12:44
  • @Ron: Ah, it looks like I may have misread your question, I'm afraid. I was testing for zooming in. I hadn't really thought that people might want to zoom out on stuff. I am getting that in FF when zooming out and I presume in other browsers too though I haven't tried. – Chris Oct 20 '11 at 13:46
  • Ron have you tried to add position:absolute; to your items? i had same problem where my header stayed central but the rest of my css boxes upon zoom out went left. I then positioned them absolute well just added it in really and found it worked worth a try i was wall banging over this myself!! – NVMK Aug 07 '13 at 15:24

2 Answers2

25

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

Edit:

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

Let me know if this does you.

Chris
  • 26,164
  • 4
  • 67
  • 85
  • float:right; doesn't solve the problem. the problem is caused by the borders. I cant work by this principle because it'll ruin my design (by making it something totally different). – Ron Oct 22 '11 at 18:15
  • Added a new section to my answer dealing with how to put your borders on an inner div to take advantage of the fact it works without borders but you want to keep them. Now the outer div deals with layout and the inner does the borders and such like. – Chris Oct 24 '11 at 10:47
  • I tried this solution before but for some reason it didnt work and now it does. no idea why anyway - thank you!. – Ron Oct 24 '11 at 16:23
  • I tested it now in IE6+, FF 7.0.1, Chrome 14.0.835.202 and Safari 5.0.5 and it worked perfect in all of them except for IE6. In IE6, the top section width is 750 while the bot is 752. I dont know how to solve it... – Ron Oct 24 '11 at 17:31
  • @Ron: May be that you will have to do the bordered div inside for the bottom one as well. It sounds like the bottom one may be 750 width and 1px each side for borders. Do the same trick to that too and see how it goes. I don't have IE6 to test unfortunately. – Chris Oct 25 '11 at 09:21
  • I don't know why I didn't think about this solution. In theory it should work, but in reality it doesn't - no Idea why. I am using IETester to test in IE6. got any other suggestion? Edit: hint: removing the doctype fix the problem in IE but cause other problems in ie and other browsers. – Ron Oct 25 '11 at 19:05
  • @Ron: I'm surprised that trick doesn't work. Without borders, padding or margins I can't see any way that the width can be other than specified so maybe check if you have any margins or padding set too and play with them a bit. border is the only one I recall as acting differently to other browsers though... :( – Chris Oct 26 '11 at 09:00
  • I didn't find any good solution. therefore I changed the design a little bit. That's my best solution for now. anyway thank you very much for the help!. – Ron Oct 29 '11 at 13:39
11

The best method for doing this now is "box-sizing:border-box",

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


Fiddle: http://jsfiddle.net/oneeezy/pdQrQ/113/

wallop
  • 2,243
  • 1
  • 19
  • 34
Oneezy
  • 4,120
  • 5
  • 35
  • 69
  • 1
    This indeed fixed my issue. I also found some interesting articles about it. One of those articles is this one: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Of course many years later, and with the official 'release' of CSS3 the prefixes are not needed anymore. – reaper_unique Sep 29 '15 at 07:56
  • 1
    Worked as expected - No theory only practical. Good – Mahesh.D Jun 01 '16 at 10:01