www.webdeveloper.com
Results 1 to 10 of 10

Thread: fix 1 px shift to left error IE?

  1. #1
    Join Date
    Aug 2006
    Posts
    44

    fix 1 px shift to left error IE?

    Read that IE can sometimes have a 1px rounding error shifting centered backgrounds 1 pixel to the left? Is there a fix for this?

    What would one have to fix in below code to also make it work in IE (it works in FF)? The background image is 1000 px wide.

    Code:
    <style>
    
    {
    margin:0px;
    padding:0px;
    }
    body {
    background:url(backgroundimage.jpg);
    background-repeat:repeat-y;
    background-position:center;
    margin:0px;
    }
    #c {
    width:800px;
    height:auto;
    margin:0px auto;
    background:#0000CC;
    overflow:hidden;
    float:none;
    }
    
    </style>

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    {
    margin:0px;
    padding:0px;
    }
    Is meaningless with a Selector. I assume, you want the "universal selector", so:

    * {
    margin:0px;
    padding:0px;
    }
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Aug 2006
    Posts
    44
    You're right but that didn't fix the error in IE. It has something to to with how IE centers the background. Or the c-container of 800 px, but it displays 1 pixel to the left of the background image.

    And it only does that in IE. In FF both the c-container and background image are centered perfectly. Why? And how to fix it?

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Is there a URL, or can you post the entire code?
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Aug 2006
    Posts
    44
    Enclosed the html page and the backgroundimage. As you can see it works ok in FF, but in IE it shifts 1 pixel to the left, showing a 1 pixel white line at the right.
    Attached Files Attached Files

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This is a well known problem and a left padding of 1px on the body will resolve it in most cases.

  7. #7
    Join Date
    Aug 2006
    Posts
    44
    That fixed it ;-) At least when the browser window is maximised. Otherwise the 1 pixel shift is on the other side.

    But can you also explain why this extra left padding works? And why it doesn't make FF shift everything 1 px to the right?
    Last edited by digitalecartoon; 01-01-2008 at 05:23 PM.

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This is due to maths rounding errors in IE, where it tends to round up when calculating the centre position of the body background. Firefox will still round down when calculating the auto margins, effectively cancelling the extra pixel until the screen width gets down close to the div width.

    A slightly better way is to shave 1 pixel off the left edge of the background graphic, so that the graphic is an odd number of pixels wide and the site divs are an even number - this does not produce any offset at all in FF and behaves a bit better at smaller screen sizes in IE.

  9. #9
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I can't say as though I have ever encountered this pixel-rounding error in my own builds, -wondering though, -if using a background-color and a background-image, -wouldn't this 1-px error be painted-in and thus, not an issue? I always include background-color (it's an Accessibility thing) and haven't ever had any issue with this well-known IE error.
    I build for: Firefox and tweak for IE

  10. #10
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The problem occurs only when using a vertically repeated body background to provide a fixed width site's boundaries, usually done so that a shadow/gradient effect can be used either side. When the central section is white, as in this case, a dark item intended to be full width of the site will show it up quite markedly. The problem does not occur if the background is on another element, only the body. Adding another wrapper div is quite often not an option as this means the minimum width of the site will include the shadows/gradient.

    Whilst the left body padding is the usual fix, I discovered some time back that odd/even background/site widths works a bit better.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles