x_guardian_x — 2011-07-07T10:16:15-04:00 — #1
I am having a lot of trouble with something that should be relatively simple.
I noticed in Chrome & Safari that when you zoom out, the containers are not fitting properly. You will see it adds a pixel to the main container, which shows up as a pixel of white being added to the right hand side.
I have tried many different things while debugging with FireBug, but can't seem to get it right.
If anybody could give any tips or help that would be awesome!
x_guardian_x — 2011-07-07T10:30:34-04:00 — #2
Here is what I'm seeing. I get this on both browsers when zooming out one step from the default (control/command - )
ralphm — 2011-07-07T10:23:50-04:00 — #3
What do you mean by 'zoom out'? No matter what I do, I don't see that happening in Safari.
ralphm — 2011-07-07T10:54:55-04:00 — #4
I don't get that effect in Safari for Mac, but all the same, you are asking for a world of pain by trying to fill in the green color with #nav-container like that.
Try for a more bulletproof design, something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<img id="next-logo" src="http://dev.coppcomm.ca/layout/images/blank-logo.jpg" alt="" title="" />
alphabyte — 2011-07-07T11:26:17-04:00 — #5
What's happening is the following: on zooming, the browser has to calculate the new widths of the various elements, and this causes rounding-off errors. For example at 83% zoom (using Chrome) the image on the left is 221px and the #nav-container is 613px, that adds up to 834px, but the #main-container is 835px, and that leaves a shortage of 1px which is the gap that you are seeing.
Okay, that may be the reason, what's the cure? Frankly I don't know. You could work around it by giving the #main-container a background image with white lower portion and green upper portion, x-repeating across the full width of the div; but I'm sure there should be a more elegant solution.
jackburd — 2011-07-07T11:31:34-04:00 — #6
try to use CSS Resets to reset all default css on each browsers.
you can also try to validate your codes to check if you miss something
x_guardian_x — 2011-07-07T12:08:10-04:00 — #7
Thanks so much guys! I may not be able to fix it right away, but at least now I understand why it's happening, and can start working towards a solution.
ralphm — 2011-07-07T20:00:44-04:00 — #8
I posted a little fix for you above.