HTML & CSS
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!
Here is what I'm seeing. I get this on both browsers when zooming out one step from the default (control/command - )
What do you mean by 'zoom out'? No matter what I do, I don't see that happening in Safari.
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="" />
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.
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
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.
I posted a little fix for you above.
This topic is now closed. New replies are no longer allowed.