Grow your CSS skills. Land your dream job.

Buttons disapear in IE when using text-indent?

  • # June 10, 2009 at 10:19 pm

    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
    # June 11, 2009 at 11:11 am

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

    # June 11, 2009 at 3:09 pm

    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
    # June 11, 2009 at 5:43 pm

    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

    # June 11, 2009 at 6:11 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".