ie body center off by 1 pixel from background center

Posted on 2007-08-02
Last Modified: 2013-12-08
ok using css
if I set the background of a site to a rectangle
in the body tag like so

body {background-image:url('/images/site/template/contentbg.jpg'); background-repeat:repeat-y; background-position:center; background-color:#DACCA2; color:#000;
 font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px;
                         margin: 0;
                        padding: 0;}

and then if I create a div tag and but the same background in it in the body of a page

<DIV id=holder style=" MARGIN: auto; WIDTH: 852px; "><IMG height=165 src="/images/accord/site/template/masthead.jpg" width=852></DIV>

why is it that it lines up perfectly in firefox but not in IE 6 or 7
in ie 6,7 it lines up based on the size of the view port and is off by 1 pixel
it goes in and out of lining up based on the size of the window
the width of the background image and rectangle is 852px
so it should line up correctly in the middle and it does in firefox just not ie

what can I do to fix this?
Question by:BTMExpert
    LVL 28

    Expert Comment

    Sounds like the 1px background jog. See

    and for a possible workaround (   body {padding-left:1px;}   for ie only  ):

    Author Comment

    yep that is the problem

    but I can't seem to get either solution to work  to solve it
    LVL 4

    Expert Comment

    Have you tried it with an 851px wide img? I know that might not be ideal, but it may throw the rounding error mentioned above back in your favour.

    Author Comment

    I will give it a try tomorrow but I don't see how it can work
    851/2 isn't an actual number
    so I don't see how it could be centered correctly
    LVL 4

    Accepted Solution

    in the same way it still centers when the page it is being displayed in has a width of an odd numberof pixels.
    As the above link explains, half pixels are rounded out by the browser and errors in this rounding give rise to the 1px displacement. I suggested the 851px image to see if this will make a change to those rounding errors in your situation as you stated that the css hacks were not working for you.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now