Problem with IE 7 and CSS button background

Posted on 2011-10-19
Last Modified: 2012-05-12
I have a contact form on my page, and I used css to change the submit button to an image. In most browsers this works fine, the image displays and the text is pushed off screen with text-indent. In IE 7 there appear to be two issues:
1. 'submit' text still appears
2. The background image is being cut off.

Does anyone know how I can fix these issues?




<input type="submit" id="aiContactSafeSendButton" value="Send" style="float:left; margin:2px;">

width: 97px;
height: 77px;
border: 0;
background: transparent url(../../../images/send-button.jpg) no-repeat center top;
text-indent: 1000em;
cursor: pointer;
cursor: hand;

 egg error
Question by:elliottbenzle
    LVL 14

    Expert Comment

    by:Juan Ocasio
    Try using -9999px for text-indent

    LVL 30

    Accepted Solution

    For the text-indent problem, try adding this to your CSS for that button:
    font-size: 0;
     line-height: 0;

    Open in new window

    For the background image the #aiContactSafeButtons_left needs an actual width, not 100% like you have. I tried 100px in IE 7 and it seemed to work for me.  
    LVL 4

    Author Closing Comment

    Thanks for the great advice. I always have a heck of a time with IE7.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now