SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code CSS:
        #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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B;

    Thanks.

    Here is the site in question.
    sprite test

    Again.. any help is appreciated.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,871
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •