Here we go, you created this new flashy design for your website, paying attention to even the smallest details.  You’ve customized all aspects of your website, and it looks good.   You then turn your design into a functional xHTML website, in your favorite CMS or as a static website.   The website looks great in your favorite browser (Firefox/Chrome).   Now as the competent web designer you are, it’s time to test your site in other browsers.   Safari, opera, both look really good, next up is Internet Explorer.  Version 8 and 9 look good, only minor changes (If you’re lucky), next is the dreaded version 7 and 6.   You breezed through the fixes for the other browsers, but now are spending hours on IE6 and 7.   This article focus’ on one major issue us designers run into with fancy designs, stylized submit buttons.  In all browsers aside from IE6 and 7, they look fine.  In IE6 and 7 they probably look like this (Note: the text hasn’t been indented):

You don’t want that small string of text overlaying on the button.  You want it to look like this (Note: no more text overlayed):

Well, luckily the fix is simple.  I’ll paste the entire CSS code for the above button, and then highlight the specific changes for IE6 and 7

#search input.image-button {
    background: url("../images/images/magnify.png") no-repeat scroll 50% 50% #79868F;
    border-color: #9C9C9C #9C9C9C #9C9C9C #E4E4E5;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    color: #000000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0;
    height: 29px;
    line-height: 0;
    margin: 0 0 0 -2px;
    overflow: hidden;
    position: relative;
    text-align: left;
    text-indent: -9999px;
    text-transform: capitalize;
    width: 36px;
    z-index: 1;
}

Overall a straight forward CSS declaration, but here are the specific IE6 and 7 fixes:

  • font-size:0 –  This is used to reduce the font size to 0 for IE7, with IE6 this doesn’t fully eliminate the text
  • Display:block – Negative indents in IE will only work with this declaration
  • line-height:0 – For IE6
  • text-align:left – Another IE6 fix, right align doesn’t work.  I’m not sure why this is the case, another mystery of IE6

I hope this helps save you time as IE6 and 7 can be extremely frustrating and time wasting!  Let me know if you have any other tips in the comments!

2 Responses to “CSS: Styling Submit Buttons in IE”

  1. Cleo Brereton

    Your website is fantastic, I just found your website at Bing, I am interested to learn more. Hope it works out for me. TQ

    Reply
  2. Nancy

    Thanks for the share!
    Nancy.R

    Reply

Leave a Reply