Links not centred in Safari

[TartanNeil]

Hello

I'm redesigning my website and this is my first attempt at CSS. It's all going well but I'm now stuck as to why my links are not centred in Safari. All is ok in Firefox and Explorer.

Have a look at my test page here and you'll see the problem.

if you need to see the HTML or CSS it's all there when you view source.

Needless to say, any help most appreciated.

Thank you

 

[angelwatt]

A couple things. You have #wrapper set with a 800px width and 10px padding all around. That means the space inside has a 780px width. You have images setup with a 800px width inside this 780px width. Safari likely doesn't care for that and Firefox is working through the problem.

Also, I find word spacing can have some issues. You can attempt a solution of using #header a { padding: 0 10px; } instead of the word-spacing property.

As an accessibility note, having menu links setup the way you do will result in them being read as a sentence with no pause in between them making it hard to tell where links begin and end. A more popular technique is to have the navigation written as a list (ul or ol) and then use CSS to style it the way you want. This would also make it easier to supply those black lines and invisibles above and below the navigation rather than using images unnecessarily.

Edit: As further clarification on my first comments about widths. Safari is centering correctly based on the images forcing a 800px width in 780px wide space, which in this case results in "center" being about 20px off to the right of where you want it.

 

[TartanNeil]

Thank you for the swift reply.

I resized all 800px wide images to 780px. This had the resulted in my black lines not spanning the full width of my #header section. I thought that if the available space was 780px then a 780px wide image would fill the width of the #header section.

Also, I still have the issue of the text of the links not being properly centered in Safari, even though all 800px wide images have been resized to 780px.

You can see the original version here.
You can see the changes I've made here.

All code available to view using view source.

Incidentally, I experimented with removing the word-spacing: 10px; from my CSS and the text centered just fine in all browsers, so I'm thinking it's an issue with the word-spacing CSS command. However, I know nothing and I'm prepared to be wrong.

As before, folks, any help to solve the centered/word spacing issue most appreciated.

Thank you

 

[angelwatt]

OK, actually I gave some misinformation. (Stupid box model.) For #wrapper its inside width is 800px (not the 780 said before), and the total width of #wrapper is 800 (width) + 20 (padding) + 2 (border) = 822. I verified this using the ruler tool of the Web Development Tool Bar. So this means those line images can go back to 800px width. Sorry about that.

Have you tried using the padding technique I mentioned before in place of word-spacing? I briefly checked this out and seems to give the exact same effect you're going for. Safari may have a bug with word-spacing. I'll have to look into that when I have time.

Again, sorry for the misinformation. Keeping track of content width and tag element width always messes me up.

Edit: As a test, try to place the word-spacing property under the "#header a" selector. Safari has supported word-spacing since 1.0 so not likely a bug.

 

[angelwatt]

I narrowed it down to Safari not centering links correctly when word-spacing is applied to them. Found someone else having the same problem a couple years ago. Unfortunately they didn't find a solution.

 

[TartanNeil]

Good news, for once!

The problem was solved by using the padding technique you suggested.

#header a {padding: 35px;} has done the trick.

Thanks for all your help.