Styling Buttons in IE

Styling Buttons in IE

Even though the button had a class specified on it to change the background image, in IE7 this did not style the button (but in Firefox the styling was picked up from the CSS class “Button”) e.g.

and the CSS class was:

.Button, input[type=”submit”], input[type=”button”]
{
   background-position: center center;
   background-image: url(Images/ButtonImage.gif);
}

Solution:
The default styling on the IE buttons needed removing first using the following CSS:

input[type=”button”], input[type=”submit”]
{
   background-color: ButtonShadow;
}

Any background colour would suffice. Then below this class specify the required styling for the button. The button now appeared with a backgorund image set, e.g.

Note: The button on the ASP.NET FileUpload control cannot be styled.

Leave a Reply

Your email address will not be published. Required fields are marked *