buttons getting whitewashed - ie7 Bug or style bug?

Hello:

I'm having an interesting style issue. I have the following style
that I use to create a button:

..button {
background-image:url(img/button_done.jpg);
height:30px;
padding-left: 5px;
padding-right: 5px;
margin: 5px;
border:none;
text-align:center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial,
Helvetica;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}

The background image is just a 30px high gradiated blue background.
What's weird is that in some versions of IE7, not in all, the button
effectively gets white-washed, almost looking as if the "color" that
set to white (#FFFFFF) is covering over the image. I thought this was
a common technique to create a non-image (or small image) button on
sites while allowing for expandable text.

When the button presents on the page, the border is still there, you
can't see the text of the button, and the center is definitely white.
What can I do to prevent this.

Thanks very much in advance for your help!

Mike

On Tue, 11 Dec 2007 19:41:33 +0100, Miked <mike.dershowitz (AT) gmail (DOT) com>
wrote:

Hello:

I'm having an interesting style issue. I have the following style
that I use to create a button:

.button {
background-image:url(img/button_done.jpg);
height:30px;
padding-left: 5px;
padding-right: 5px;
margin: 5px;
border:none;
text-align:center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial,
Helvetica;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}

The background image is just a 30px high gradiated blue background.
What's weird is that in some versions of IE7, not in all, the button
effectively gets white-washed, almost looking as if the "color" that
set to white (#FFFFFF) is covering over the image. I thought this was
a common technique to create a non-image (or small image) button on
sites while allowing for expandable text.

When the button presents on the page, the border is still there, you
can't see the text of the button, and the center is definitely white.
What can I do to prevent this.

Well, at least set a suitable background-color for when the image isn't
loaded (yet), so it can still be read/used. I can't reproduce yout problem
here though, so I haven't got a clue about to solve the gradient not
displaying.
--
Rik Wasmus