• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2493
  • Last Modified:

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?
0
BTMExpert
Asked:
BTMExpert
  • 2
  • 2
1 Solution
 
TNameCommented:
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
0
 
BTMExpertAuthor Commented:
yep that is the problem

but I can't seem to get either solution to work  to solve it
0
 
jentulmanCommented:
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.
0
 
BTMExpertAuthor Commented:
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
0
 
jentulmanCommented:
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now