Button background image

Hi
I'm using the following on XP IE7 to show an image for a button but the image doesnt show - just a basic button, whats going wrong?

<input type="button" class="buy_button" value="BUY">

Style
.buy_button{
      border-style: none;
      background-image: url('images/button.gif');
      background-repeat: no-repeat;
      width: 77px;
      height: 26px;
      color:white;
}
LVL 58
GaryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
You would have to use <input type="image" > (which will submit the form when clicked!!), or an image with an onclick functionality.

-r-
run0604Commented:
That should work for you.

<style type="text/css">
<!--
.buy_button{
      border-style: none;
      background-image: url('images/button.gif');
      background-repeat: no-repeat;
      width: 77px;
      height: 26px;
      color:white;
}
-->
</style>
</head>
<input type="button" class="buy_button" value="BUY">
RoonaanCommented:
What did you change?

-r-
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

run0604Commented:
Sorry, my mistake :)
Roonaan is right, input type=image would solve the problem.
Or see
http://www.ampsoft.net/webdesign-l/image-button.html
for an example for image buttons.
GaryAuthor Commented:
I've since found this is only a problem on pc's running xp, something to do with the desktop style - if you change to classic look then the buttons show up properly.
GaryAuthor Commented:
How do I place text on the image i.e. the image is of a button that I use in various places with different text
GaryAuthor Commented:
Never mind i used href tag with a background image
jessegivyDeveloperCommented:
Hi Gary,

using an anchor tag is a perfectly acceptable alternative, but I just wanted to check in and see what you set the href value to?  Are you using the button to submit a form, or just redirect to another page?

If you're executing javascript you'll need to put it in the onClick event and set the href="#"

Sounds like you got it on your own though, feel free to expand on the question or ask for a refund if you feel it's appropriate.

Cheers,

Jesse
GaryAuthor Commented:
Actually I have solved it using

background: transparent url(images/button_lg.gif)

and now the image shows up fine on any type of button...

It is a bug with XP discussed here
http://support.microsoft.com/kb/322240
ee_autoCommented:
Question PAQ'd, 250 points refunded, and stored in the solution database.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.