Ian,
You seem to be up against a rendering issue that you can probably not solve with your current method.
When I resize the browser window in Firefox your header appears to move 1 px away from the left edge of your centred column and then back again. So it looks like Safari, and then aligns as you intend, alternately. When I take out your 1px left margin hack it works the other way.
What this indicates to me is that Firefox cannot resolve a sub-pixel placement (remember, you're centring an image, so it will fall "between pixels") except by moving it slightly left or slightly right. (I don't know why the body image and the header image don't always align, but I do think you're correct that Safari does it right.)
Solution?
Use a repeating background (repeat-y) for your header, including that stripy band down the bottom, and use a header with a graphic background (or an image, or image replacement) for your "Beachhouse" logo thingy.
-Hugh Todd
On 14/10/2004, at 2:50 PM, Ian Main wrote:
I've spent too long trying to get my head around this.
http://www.e-lusion.com/design/beachhouse/ http://www.e-lusion.com/design/beachhouse/screen.css
Safari error http://e-lusion.com/design/beachhouse/13499.png
I have placed a Faux Column image on the body which is centred. Than placed a repeated a centred header image with a width of 757px within a centred container. The problem is most browsers are rendering this correctly except for Safari 1.2.
I don't want to put my background image on my container element as the floats are stopping it from repeating.
It actually looks like Safari is the correct renderer (is that a word?) as the body, container and header all should be centred but I had to add margin-left: 1 on to both header images.
Any suggestions are greatly appreciated.
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
