Problems with sprites not showing up on button

Dev Shed Forums Sponsor:

December 15th, 2012, 01:25 PM

JulieBrescia

Registered User

Join Date: Dec 2012

Posts: 3

Time spent in forums: 26 m 35 sec
Reputation Power: 0

Homework - 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

December 15th, 2012, 05:10 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,831

Time spent in forums: 6 Months 1 Day 19 h 40 m 35 sec
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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).

Viewing: Dev Shed Forums > Web Design > CSS Help > Homework - Problems with sprites not showing up on button

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump