CSS Sprite a:active not working in chrome/safari

Hello all,

I am having an issue with my css sprite a:active working in IE7/ 8 and FF on PC, and FF on mac but only the hover state is working in chrome and safari. For some reason a:active is not working in those two browsers.


    #left-nav {
    background:url(/images/mannapro-leftnav.png) no-repeat;
    width:445px;
    height:296px;
    margin:0;
    padding:0;
    z-index: 5;
    }

    #left-nav span {
    display: none;
    }

    #left-nav li, #left-nav a {
    height:72px;
    display:block;
    z-index: 5;
    }

    #left-nav li {
    float:left;
    list-style:none;
    display:inline;
    }

#left-nav-01 {
    width: 200px;
    }

#left-nav-02 {
	width: 245px;
	position: absolute;
	top: 74px;
	left: 0;
}

#left-nav-03 {
	width: 245px;
	position: absolute;
	top: 150px;
	left: 0;
}

#left-nav-04 {
	width: 245px;
	position: absolute;
	top: 225px;
	left: 0;
}

#left-nav-01 a:hover {
	background:url(/images/mannapro-leftnav.png) -245px 0px no-repeat;
	width: 245px; 
	z-index: 5;
}
#left-nav-02 a:hover {
	background:url(/images/mannapro-leftnav.png) -245px -74px no-repeat;
	width: 245px;
	z-index: 5; 
}
#left-nav-03 a:hover {
	background:url(/images/mannapro-leftnav.png) -245px -150px no-repeat;
	width: 245px;	
	z-index: 5; 
}
#left-nav-04 a:hover {background:url(/images/mannapro-leftnav.png) -245px -225px no-repeat;
	width: 245px;   
    z-index: 5; }


/* Home Page Nav for Switch */
#left-nav-01 a:active,
#left-nav-01 a:focus {
	background:url(/images/mannapro-leftnav.png) -245px 0px no-repeat;
	width: 245px; 
	z-index: 5;
}

#left-nav-02 a:active,
#left-nav-02 a:focus  {
	background:url(/images/mannapro-leftnav.png) -245px -74px no-repeat;
	width: 245px;
	z-index: 5; 
}
#left-nav-03 a:active,
#left-nav-03 a:focus  {
	background:url(/images/mannapro-leftnav.png) -245px -150px no-repeat;
	width: 245px;	
	z-index: 5; 
}
#left-nav-04 a:active,
#left-nav-04 a:focus  {background:url(/images/mannapro-leftnav.png) -245px -225px no-repeat;
	width: 245px;   
    z-index: 5; }
/* Home Page Nav for Switch End*/
	

.left-nav-01-current {
	background:url(/images/mannapro-leftnav.png) -245px 0px no-repeat;
	width: 245px; 
	z-index: 5;
}

.left-nav-02-current {
	background:url(/images/mannapro-leftnav.png) -245px -74px no-repeat;
	width: 245px;
	z-index: 5; 
}
.left-nav-03-current {
	background:url(/images/mannapro-leftnav.png) -245px -150px no-repeat;
	width: 245px;	
	z-index: 5; 
}
.left-nav-04-current {background:url(/images/mannapro-leftnav.png) -245px -225px no-repeat;
	width: 245px;   
    z-index: 5; }


I appreciate any assistance.

Thanks.

Paul O’B;

Thanks.

Here is the site in question.
sprite test

Again… any help is appreciated.

Hi,

Welcome to Sitepoint:)

There’s not enough info there to go on really as the code seems ok and it may just be that you were expecting something different in Safari anyway.

The active and focus states will disappear as soon as you release the mouse. They are not persistent in Safari unless you tab to the element.

If you were expecting the element to remain in that state then they won’t in Safari. Older versions of opera have this behaviour also.

If you meant something else then we’d probably need to see a link or some code that demonstrates the problem :slight_smile:

Hi,

What exactly is the problem you are experiencing in safari?

You are setting the active/focus states to the same as the hover state and that’s what seems to be happening in all browsers unless I’m missing the obvious.

I think you may need to spell it out for me as I must be looking in the wrong direction :slight_smile: