IE bug：按钮图像背景

Question

I'm dealing with a weird bug that I don't manage to fix.

It's a known bug and in fact I found on the Web several solutions, but unfortunately they don't work in my case!

Here is a screenshot that shows how the button appears on the other browsers, instead on IE it appears completely white.

The CSS rules that I am using are the following:

background:url('http://www.legrandclub.net/wp-content/uploads/2011/07/Send-Message.jpg');
width:113px;
height:25px;
border:0px;

Which additional rule should I use?

Thanks

Answer 1

The problem coming from bp.css , line ~660:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

That gradient is drawn on top of everything else. The rest of your button is hiding beneath it.

Now that you know what the problem is, you should be able to solve it. You need filter: none on #send_reply_button , or you need to otherwise override/remove the filter .

Answer 2

Perhaps just build a button in css too...

 <a href="send.htm" class="abutton">Send Message</a>

 a.dbutton {
    font-family: Verdana; font-size: 13pt; font-weight: bold;
    position: relative;
    background-color: #e60000; 
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 21%;
    margin-right: 21%;
    text-decoration:none;
    display:block;
    padding:8px;
    border:1px solid #000;
    text-align:center;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}