Body centered shadow bg - funked up in IE6, and Safari...

I created a shadow to appear behind my main content in the blog I've created here: http://www.classicalacupuncturehealingarts.com/

However - in Safari and in IE6 and below, the shadow is set about 60 pixels to the right. It looks fine in Firefox and IE7.

How have you guys fixed this in the past?

Also - I have the png issue in IE6 - I see that someone recently posted a similar issue - but I'm considering just making a conditional stylesheet for IE6 or creating a gif instead. Any opinions on this?

Thanks for reading

Hi there..

No need to explicitly put width:864px for all the inner elements of #container. All block level elements would nicely occupy the available space in the normal flow. Again, if there is some margin/padding, then the total width calculation may again get messed up.
eg: #bottom {style.css (line 99)
background:transparent url(images/bot.png) no-repeat scroll 0%;
height:92px;
padding-left:190px;
padding-top:25px;
width:864px;
} This will certainly make an horizontal scroll bar in some browsers (1024 resolution)
(If you are trying to center the text, just use text-align:center; and remove all paddings and floats)

So just remove them all, and let me know in case of any further issues :)

..and to your PNG issue, http://www.codingforums.com/showthread.php?t=147204 may help!

any insight on the body bg-shadow issue? should i instead create an additional container?