Buttons disapear in IE when using text-indent?

[Squintz]

You guys have been great help so far.

In Chris’ video I have seen him assign a background-image to form buttons and then use text-indent: -999999px to knock the text off the page. For some reason in IE it seems to knock my entire button off the page yet it looks fine in FF.

What is the proper way to add an image to a form button that works in both FF and IE and hopefully all other browsers?

[Rob MacKay]

can you show us a live example?

Also make sure you are -99999px the actual element with the BG image and not the one that element is sitting in :)

[Squintz]

The site: http://www.diapercakesbyjenny.com/products-page/

Here is the markup:

Code:

Here is the css that is written for the button.

Code:

input.wpsc_buy_button{
text-indent: -99999px;
background: transparent url(’images/atc2.gif’);
width: 92px;
height: 23px;
}

[Rob MacKay]

if you look in your CSS – you have put quotation marks around your image url…

Change:

background: transparent url(’images/atc2.gif’);

to:

background: transparent url(images/atc2.gif);

that might change some stuff :D

[Chris Coyier]

Looks like you got some curly quotes in there where you have the path to the image.. which is screwing it up.

[Author]

Posts