CSS Submit Button on IE/Parallels

Thu, 04/29/2010 - 21:59
Submitted by admin

I discovered a bug that flared up in IE running in Parallels on Mac for form Submit buttons with CSS applied to set a background image - where rather than display my sweet button background, it would render the browser default button - yet still apply my text color, so I had lovely white text over a light gray button - which was totally unreadable.

Originally, the button style was set up like this:

input#pinbutton {

background-color: #9f532e;
background-image: url(/images/brownbtn.gif);
background-repeat: no-repeat;
width: 97px;
height: 24px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #ffffff;
text-align: center;

}

While it rendered fine on our co-worker's PC, when we fired up the page in IE Parallels on the Mac - it was a disaster.

Surprisingly, rewriting the background attributes in shorthand solved the issue beautifully:

input#pinbutton {

background: #9f532e url(/images/brownbtn.gif) no-repeat;
width: 97px;
height: 24px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #ffffff;
text-align: center;

}

Go figure.