SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout not working for Chrome & Safari

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    What do you mean by 'zoom out'? No matter what I do, I don't see that happening in Safari.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 - )

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <!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. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast jackburd's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by X_GuardiaN_X View Post
    I may not be able to fix it right away
    I posted a little fix for you above.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •