asked on

ie body center off by 1 pixel from background center

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?

TName

Sounds like the 1px background jog. See

http://www.pmob.co.uk/temp/onepxjog.htm

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

http://www.pmob.co.uk/temp/onepxjog-2.htm

BTMExpert

ASKER

yep that is the problem

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

jentulman

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.

BTMExpert

ASKER

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

ASKER CERTIFIED SOLUTION

jentulman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial