Safari 3 and 4 are not agreeing with me for once, need help with my css and centering plus another weird thing...

Question

Hey I am completely lost with this one.

Basically the website i'm working on here: Home page

It is acting funny. I'm using the easy slider 1.7 jquery plugin. In safari 4 (browser labs) the slider div isn't centering up. The css is as follows:

#slidercontainer{width:800px;padding:0;margin:0px auto;position:relative;}

I've tried:

#slidercontainer{width:800px;padding:0;margin:0 0 0 -400px;left:50%;position:relative;}

and still no luck, any ideas?

Also in safari 3 the div is even more messed up! I am starting to think it is the jQuery plugin.

---

My second problem is even more strange... almost. On the about and collection page in both safari 3 and 4 the background and border of the #singlecol div isn't showing!?

Here is my css:

#content #singlecol{padding:20px;background:#fff;border:#eb690b 1px solid;}

I have no idea what's going on, I have never had a problem with these browsers before and using Browserlabs is hard to see what's going wrong.

I was hoping someone could help me in the right direction? Is it because browserlabs is using the very basic versions i.e. 4.0.0 and 3.0.0 which are ridden with bugs?

Thanks!

p.s. I know lots of images and pages aren't working as I am still not finished :)

Answer 1

I worked it out!

Basically for some reason safari 3 and 4 doesn't like it when you specify two css files with your styles for the main page across both, I was doing this to hep with caching and bandwidth naturally. So instead i have had to make a stylesheet for each page.

I suppose alternatively I could make one big stylesheet, which probably will work out more efficient still or just use php to generate the css!?