Forums

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?

Robskiwarrior

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:


<div class='grid_more_info'>
    <form id='product_1' name='product_1' method='post' action='http://www.diapercakesbyjenny.com/products-page/?category=' onsubmit='submitform(this);return false;' >
        <input type='hidden' name='prodid' value='1' />
        <input type='hidden' name='item' value='1' />
        <input type='hidden' name='item' value='1' />
        <input type='submit' id='product_1_submit_button' class='wpsc_buy_button' name='Buy' value='Add To Cart'  />
    </form>
</div>

</div>

Here is the css that is written for the button.


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

Robskiwarrior

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

chriscoyier

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

treehouse : what would you like to learn today?

Forums

Buttons disapear in IE when using text-indent?