Hello and welcome to our community! Is this your first visit?
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
    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:
    <!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">
    <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%;
    	margin: 0 auto;
    	background:url(background.png) repeat-y center;
    #bar {
    	margin:0 auto;
    <div id="wrapper">
      <div id="bar"></div>
    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. #2
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    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.

  3. Users who have thanked SB65 for this post:

    Fisher (06-22-2009)

  4. #3
    Regular Coder
    Join Date
    Jan 2009
    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