positioning help Options

[shynomi]

My headers are always off by 1 px either in safari or FF. I can get it right in IE and FF but it'll be off by a pixel in Safari or vice versa.

Here is my code for the top header:

CODE

<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px;  _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;}">

</div>

I have the _margin-left: xxx for IE and the other margin attribute for FF and Safari.
But as you can see here: http://www.myspace.com/frucatestpage

it'll be a px off in FF but right in safari.

Let me know if there's something I can add in the code to fix that.
Thanks guys!

[fixtatik]

Just my two cents...but why do this:

http://i382.photobucket.com/albums/oo268/d...ULFIELD/bg1.jpg

Since you have transparent tables anyway, just leave the entire image intact, without chopping out the middle. It's a huge image as-is, so it'll look better and actually be faster if you did it altogether. Slicing an image into little pieces used to seem like it was loading faster (way back when we all had dial-up and each image loaded piece by piece). In reality, servers need to make an additional HTTP request for each image, so it takes longer to finish loading the page.

And, because the image is only one instead of few, you won't see the 1-pixel bug. Granted, it'll still be there, but less noticeable because it won't play an effect on the images.