Topic: Safari and CSS Sprite woes

As I do not have Safari, I am having a lot of trouble fixing an issue using CSS sprites.

The code is straight forward but the result in Safari is confusing me somewhat, and I would like to call on the good folk here to lend an eye and brain cell or two to help me out.

You can view the site here.

And the problem I am getting in Safari is found here.

I do not understand why I am getting that visual error to be honest, I wonder if my image needs some whitespace, instead of putting the bullets at the extremeties.

Any help would be appreciated.

Cheers,

[quickie]

Don't have Safari either, but it looks like it doesn't understand the no-repeat.

Quick hack. In the same you added some padding between the white and red bullet, add the same padding below the white bullet.

One detail, the rules for #nav ul li a:hover, #nav ul li span contains a lot of redudancies with the #nav ul li a. In the :hover pseudo class, you only need to specify: the color and background-position. Stupid browsers might flick a bit on hover.

HTH

[/quickie]

http://webdevout.net/browser-support-css?SF2=on&uas=CUSTOM#bubblesrc-106 (mouseover I's)

FYI I've found using the order the spec lists the more specific properties in is most friendly; that is:
background: color url(path) repeat attachment horizontal vertical; *

Less hip browsers tend to work better with number-based position values than the keywords, too.

So judging by that website, I need to use 2 seperate images for Safari, because it will always repeat an background-image that is larger than the box it is contained in. Which is crap if it is true!

In any case I split the images into 2 and replaced them in the hover selector

Thanks for the help all.

No, as I said, just add some whitespace below the white bullet. Problem solved, well ... worked around.