#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0

    Problems with sprites not showing up on button


    I've tried so many things I can't figure out why the sprites aren't showing up. There are 3 states for the button: normal, hover and active.

    Code:
    #continue_btn {
        float: right;
        margin-right: 15px;
        width: auto;
        width: 229px;
        height: 43px;
        background-image:url(_img/continue_btn.png);
        background-repeat: no-repeat; 
        float: none;
        margin-left: -23px;
        margin-bottom: 12px;
        border-radius: 8px;    
        }
    #continue_btn a{
        background: url(_img/button_sprite.png) 0 0 no-repeat -13px -11px;
        width: 229px;
        height: 43px;
    }
    
    continue_btn a:hover {
        background: url(_img/button_sprite.png) 0 0 no-repeat -14px -58px;
        width: 229px;
        height: 43px;
    }
    continue_btn a:active {
        background: url(_img/button_sprite.png) 0 0 no-repeat -14px -106px;
        width: 229px;
        height: 43px;
    }

    You can see it here (click on the user input button at top left): http://www.myproduction-1.info/jquery_tools_org_css/index_closebutton.html

    Sprite is at: http://www.myproduction-1.info/jquery_tools_org_css/_img/button_sprite.png
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    The sprites seem to be working fine in the latest version of Firefox. Did you solve this already?

    I should advise you that for accessibility and usability reasons you should provide a text equivalent for anyone who can't see the image. That's easier said than done though, especially on buttons. Perhaps that part of why CSS3 features like linear-gradient, box-shadow, text-shadow, and border-radius are quickly gaining popularity.

    By the way, you don't need to respecify the width and height in the pseudo-class rules, only the properties that change.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo