Forum Moderators: not2easy
I'm having trouble with background image. I've set the body background property:
body {background: #001b4f url(/i/back3.png) center top repeat-y;}
The background image is just a 750px width white line (1px height) with a 6px gradient blue border at each side (so the image width is 762px).
I have a container centered in the page, with a banner image:
#container{
width:750px;
margin:0 auto;
background: url(/i/exp-banner1a.jpg) no-repeat;
}
It looks fine in Firefox but in Internet Exploirer the #container background image seems to be shifted 1 pixel to the left (relative to the body background) which results in a 1 pixel white vertical line appearing at the right-hand site of the #container.
Does anyone know what the cause of this is, and how to get around it?
Thanks very much,
Tom Brown
[edited by: encyclo at 5:23 pm (utc) on Jan. 25, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]
I'm not sure but I think this has been known to happen in all browsers, and then I found an article on PIE [positioniseverything.net.] that says it can happen when two different methods of centering are used, which your code is
1.centering the image using background positioning
2.centering the wrapper using margin: 0 auto;
The two samples at the top of the PIE page are exhibiting the 1px error for me in both demos (though on differing sides) in Firefox, apparently it's a rounding error that can occur in any browser when the centering methods are different.
it suggests the safest way to get it stable is to use the same method for both, and obviously this is not always possible so instead wrap the wrapper in an outer wrapper and center both wrappers in the same way - the outer wrapper would be the width of the image so you don't need to center the background image.
Suzy
