Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts

    Centered background image VS. Margin:auto

    Was wondering if anybody knows a fix for this. It appears that these 2 centering methods are treated differently in browsers and when the browser is an odd number of pixels wide, it results in a 1 pixel gap.

    In Firefox, the gap appears on the left, but in my IE6 it is on the right. I don't have IE7 or IE8 to test this, so maybe someone could look at it in those browsers and tell me if it happens there too.

    The only info I could find was a reference on the Mozilla forums of this being a bug.

    Here's a test page: oddpixel

    and here's the sample code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 100%;
    	height:500px;
    	margin: 0 auto;
    	background:url(background.png) repeat-y center;
    }
    #bar {
    	width:878px;
    	height:20px;
    	margin:0 auto;
    	background:#000;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <div id="bar"></div>
    </div>
    </body>
    </html>
    If you resize the browser (slowly) you'll notice a gap appear in the left or the right between the background image and the "bar".

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi Fisher

    Yes, I get the same in IE7, with the gap on the right. I think, in fact that the gap is matched by an overlap on the left, in both IE7 and FF3. It's hard to see with the colour of #bar set to black, but if you change it to yellow it's more obvious.

    This article has some thoughts on it.

  • Users who have thanked SB65 for this post:

    Fisher (06-22-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Thanks for the article. Just as it mentioned, I came across this when I was trying out a drop shadow on a page. Good to know I wasn't going crazy...


  •  

    Posting Permissions

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