Mac Safari shows site aligned left, not centered

HTML & CSS
1

Greetings!

I have a site that doesn’t seem to be centered. On a Mac Safari browser it looks to be aligned left, whereas on a PC browser it looks centered. Can someone take a look at it and let me know if they’re seeing the same thing?

2

In Safari 5 your site appears fine. Try clearing your cache and see if that doesn’t fix the problem.

3

Yes I can see it sliding to the left in safari on the mac. It initially centres but then slides left probably after the slideshow kicks in.

I notice in all browsers that you have a massive horizontal scrollbar and it is likely this is the cause of the problem. You have placed the facebook icon with relative positioning using left:1081px and you should never really move things that much with relative positioning because it doesn’t actually move anything physically but moves them visually. The element still impacts on the layout in its original position and is the reason for the scrollbar.

Add position:relative to #wrapper as a stacking context and then absolutely place the facebook icon into position.


#wrapper{position:relative}
#grad{width:100%}
.moduletablefb {
  left: 1081px;
  top: 88px;
	position:absolute;
}

Your grad element was also too large and you should have just used 100% if you want it edge to edge.

4

Thanks, Paul O’B for pointing that out AND the extra set of eyes!

Taking your advice, I also had to move the logo, slider, and the content down to fall below the head banner.

After I made these changes, I went to Adobe Browser Lab and tested it on Firefox 5 OS X and Safari 5 OS X. FF shows the site shifted to the left whereas Safari shows it centered. Maybe this is the Browser tester’s way of displaying it? How does it look on your end, since I don’t have a Mac.

5

The scrollbar is gone now and I see no shift in Safari or Firefox on the mac and both are centered.

6

Thank you, Paul O’B for the eyes (and the help). I guess it is the browsers tester then.