CODEWITHSUNDEEP
htmlcssinternet-explorerbackground-image
pAkY88
pAkY88

Reputation: 6294

IE bug: Button image background

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

Upvotes: 1

Views: 454

Answers (2)

thirtydot
thirtydot

Reputation: 228282

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.

Upvotes: 3

Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

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;
}

Upvotes: 0

Related Questions