Topic: Safari and CSS Sprite woes (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=29029" title="Pages that link to Topic: Safari and CSS Sprite woes (Page 1 of 1)" rel="nofollow" >Topic: Safari and CSS Sprite woes <span class="small">(Page 1 of 1)</span>\

 
Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 03-07-2007 10:57

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,

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 03-07-2007 12:01

[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]

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 03-08-2007 03:20

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.

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 03-08-2007 16:16

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 03-08-2007 17:45

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu