Layout not working for Chrome & Safari

HTML & CSS
1

Hi Guys,

I am having a lot of trouble with something that should be relatively simple.

Page Sample

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!

2

http://dev.coppcomm.ca/layout/screenshot.jpg

Here is what I’m seeing. I get this on both browsers when zooming out one step from the default (control/command - )

3

What do you mean by ‘zoom out’? No matter what I do, I don’t see that happening in Safari.

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">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Page Sample</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
		<style type="text/css">
			body {
				font-family: Arial;
				margin: 0px;
				background-image: url('http://dev.coppcomm.ca/layout/images/background.png');
				background-repeat: repeat-x;
				background-color: #ffffff;
			}
			
			img {
				border: none;
			}
			
			#main-container {
				background-color: #ffffff;
				width: 1002px;
				margin-left: auto;
				margin-right: auto;
				height: 163px;
				margin-top: 73px;
			}
			
			#next-logo {
				/*width: 266px;*/
				/*height: 236px;*/
				margin-top: -73px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="main-container">
			<img id="next-logo" src="http://dev.coppcomm.ca/layout/images/blank-logo.jpg" alt="" title="" />		
		</div>
	</body>
</html>
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.

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

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.

8

I posted a little fix for you above.