Button element styled with CSS is not showing the background-image in IE6

Question

I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.

My following HTML and CSS works fine on IE 8, but not in IE 6.

HTML

<button id="add">Add</button>

CSS

button
{
    width: 110px;
    height: 28px;
    background-image: url('../images/button.png');
    background-color: transparent;
    border: 0px none #ff0000;
    cursor: hand;
    font-family: Myriad Pro, Helvetica;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
}

Using CSS, how can I get the background image to show in IE 6?

Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.

---

Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.

Answer 1

If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.

Although, again based on memory, if you can change it to an input (attribute type="image" ) you might be able to get the effect you want even on IE6.

Answer 2

Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).

The background-image property that worked in Firefox 2.0 just did not have any effect on IE6. After a bit of googling, I realized that the background-image property will not work on IE and that we need to use the background property.

This is what works for me:

button
{
    background: transparent url('../images/button.png') no-repeat top;
}