Anyone using Safari on Mac?

[andreitero]

Hi all, i've got a screenshot of my website on Safary/Mac from browsershots.org and it does not look good. I tested it on IE6,7,8, Firefox, Chrome, Opera and it looks fine. For some reason, on Safari/Mac, the website looks like this:
[SCR]http://lemy.co.uk/images/abcdef.png[/SCR]

,with the whole body shifting to the right, caused by the top menu not aligning properly.
This is the CSS controling the top menu:

#navMainWrapper{font-size:1.1em;height:23px;line-height:normal;width:957px;}

#navMain {
      float:left;
      width:100%;
	  font-size: 1.1em;
      }	  
#navMain ul {
      margin:0;
      padding: 0;
      list-style:none;
      }

#navMain li {
      display:inline;
      margin:0;
      padding:0;
      }
#navMain a {
      margin:0;
      padding:0 0 0 4px;
      float:left;
      background: url(../my_image) 0 0 no-repeat;  background-position: 0 -208px; height:23px;
      color: #dfdfdf;
      text-decoration:none;
      }
#navMain a span {
      padding:5px 33px 0 25px;height:18px;
      float:left;
      display:block;
      background: url(../my_image) 100% -185px no-repeat;
      color:#dfdfdf;
      }  
#navMain a:hover {
      background-position: 0 -254px;
      color: #dfdfdf;
      cursor: pointer;

      }
#navMain a:hover span {
      background-position: 100% -231px;
	  color:#dfdfdf;

Also, if for some reason, you can't view the my CSS because of the C/J loader add-on, i should mention that the #mainWrappe and #headerWrapper have a width of 957px.

Can someone confirm that the website looks like that on Safari/Mac and/or give me some pointers on how to fix this?
Thanks

[Kenichi]

On my mac and I see differently from what you are saying.

Firefox shifts everything to the right while Safari and Chrome display correctly. However, the Watches tab is under the Bikes tab in all browsers.

[andreitero]

Thanks for that, on windows the Watches tab displays properly, can't figure out what might cause it to act like that on Mac's.
My layout is displaying well even on the pesky IE6 on windows

[blackmafia]

Firefox and SeaMonkey on my mac displays over to the right like your screenshot, but Safari and Opera looks fine apart from the Watches tab still wraps to the next line.

[andreitero]

Thanks guys, that's what i'm after, a solution for fixing the display of the menu on Mac. I have no validation errors.
Around 7-10% of my visits come from Mac's and i would hate to loose them

[hem]

I had something similar- The category tabs appeared fine under IE, Firefox and Opera (and Safari on PC) but not Safari on a Mac- My solution was to drop the text size by 1px;

[Kenichi]

I see you've made some changes so I just thought I'd update you on how it looks on a Mac.

Safari works perfect =)

Firefox just has a small problem where the "Find out more" button gets cut off on some products (See first attach)

And Chrome has weird categories and no "Find out more" (2nd attach)

edit: disregard what I said about chrome, clearing cache worked

[350125]

Just wanted to confirm that it's working fine on Safari 5.0.

[andreitero]

I had something similar- The category tabs appeared fine under IE, Firefox and Opera (and Safari on PC) but not Safari on a Mac- My solution was to drop the text size by 1px;

I tried that fix, decreased the fontsize by 1px, then adjusted the padding. In windows/IE6,7,8,FF, Opera, Chrome was fine, but on Safari/Mac the tabs were now too small
So eventually i removed the span and went with a fixed width tabs.

I see you've made some changes so I just thought I'd update you on how it looks on a Mac.

Safari works perfect =)

Firefox just has a small problem where the "Find out more" button gets cut off on some products (See first attach)

And Chrome has weird categories and no "Find out more" (2nd attach)

edit: disregard what I said about chrome, clearing cache worked

Thanks Kenichi, you were a big help with the screenshots. About the 'Find out more button', i have made some changes to my css images i'm using, so probably the old ones were still in your cache. I noticed that in order to get a clear cache for a certain website, all you need to do is hit the refresh button fast 4-5 times and that usually does the trick. So maybe try doing that and see if that button is still like that.

Just wanted to confirm that it's working fine on Safari 5.0.

Thanks for that, it was hard, but finally i have some crossbrowser consistency

[KaosChris]

I thought this might help out for future reference or for anyone else having a problem.

http://spoon.net/browsers/

It's a plugin that allows you to view what your website looks like in multiple browsers including IE6 and can save alot of headaches. I use it all the time.