[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

Problem with IE 7 and CSS button background

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?


page: http://mainst-group.com/index.php?option=com_aicontactsafe&view=message&layout=message&pf=1&Itemid=73


<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
1 Solution
Juan OcasioCommented:
Try using -9999px for text-indent

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.  
elliottbenzleAuthor Commented:
Thanks for the great advice. I always have a heck of a time with IE7.

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now