3

I have a page which "draws" grids as seen below:

enter image description here

It does this by using absolutely positioned divs. Each grid is 237x237 pixels wide so the first grid would be placed at top:0; left:0;, the second grid would be placed at top:0; left:237px;, the third grid would be placed at top:0; left:474px; and so on.

However, when the user zooms in or out (using the browser keys Ctrl+ / Ctrl-), the boxes are not aligned properly. This is evident when the background color of the page seeps through:

enter image description here

What's the best way to keep the boxes "side-by-side" regardless of the browser's zoom ratio?

P.S. The boxes had to be positioned absolutely because they need to be dynamically moved.

Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • 1
    Nice question. All browsers behave this way? – lorenzo-s Jun 06 '12 at 12:53
  • Why not place a repeater background image (1 dark square + 1 light square) on the body or container div? Also, can we see some of your source code? – Lowkase Jun 06 '12 at 13:14
  • Browser zoom sucks and is victim of rounding issues. What do you do with one pixel at 50%? Show half a pixel? Can't do that. – Diodeus - James MacFarlane Jun 06 '12 at 13:21
  • @Diodeus Is there anyway to "counter-react" (disable) browser zoom? Basically I want the page to be at 100%-zoom at all times. – Pacerier Jun 06 '12 at 13:25
  • @lorenzo-s Tested on Chrome and Safari, thought not all browsers work this way. – Pacerier Jun 06 '12 at 13:26
  • @Lokase It needs to be a div and not just be a background image. Yes it's now a blank box, but more things are to be added *onto* that box dynamically. – Pacerier Jun 06 '12 at 13:27
  • You cannot disable browser zoom, just as you cannot disable the BACK button. Unless 100% of your design is based on relative units, browser zoom is going to continue to suck. – Diodeus - James MacFarlane Jun 06 '12 at 13:40

1 Answers1

2

different browsers do round "% of a pixel" in a different way - see Evenly distributed height of child elements with CSS

as it has been suggested in the comments, using a background image would greatly help - it should composed by 4 "squares" or grids as you call them, and repeated horizontally and vertically.

in that way, you could still keep the divs with position: absolute and leave their background as transparent - however, if the tile background needs to be shown while you animate it, you might have to set it as a background color when the animation starts and then set it back to transparent once the animation is concluded - but for this to work I'm supposing that you are moving a grey square in place of another grey square and the same about white ones.

EDIT following your comment:

This is gonna be very tricky to achieve, different browsers offer different levels of zoom and it's very hard to figure out a size for your divs that would scale down nicely (without any "half pixels") in all cases. However, as long as functionality is not affected, a little discrepancy in the look and feel when things are zoomed in/out is normally very acceptable, and I hope that this is the case!

as a last idea, you could try using % positioning instead of pixels - this possibly will adapt better when zooming, but I cannot guarantee as I haven't tested it - but it might be worth giving it a try! best of luck with this!

Community
  • 1
  • 1
Luca
  • 9,259
  • 5
  • 46
  • 59
  • +1 for the link. But a background-image wouldn't work. The boxes need to be divs because they need to be able to contain child HTMLElements. It's not animation that I'm doing, but "drag-and-drop" behavior. – Pacerier Jun 06 '12 at 14:19