Skip to main content

IE8 - button background Image not showing?



I have a submit button which has the following CSS:







.button{

border:1px solid #015691;

background-image:url('http://boundsblazer.com/pkg/pics/

buttons/small-button.png');

color:#ffffff;

height:18px;

font-size:8pt;

font-family:sans-serif, verdana;

cursor:pointer;

line-height:14px;

margin-bottom:-5px;

border-bottom-color:#222222;



-webkit-border-radius: 3px 3px 3px 3px;

-moz-border-radius: 3px 3px 3px 3px;

border-radius: 3px 3px 3px 3px;

behavior: url("http://boundsblazer.com/pkg/plugins/PIE.htc");

}







and my JQuery...







$(".button").mousedown(function(){

$(this).css('border-bottom-width', '0px');

$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button-pressed.png\')');



$(this).mouseout(function(){

$(this).css('border-bottom-width', '1px');

$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button.png\')');

});

$(this).mouseup(function(){

$(this).css('border-bottom-width', '1px');

$(this).css('background-image', 'url(\'http://boundsblazer.com/pkg/pics/buttons/small-button.png\')');

});

});







Strangely, this has no problems in IE7 or IE9, just IE8. What happens is that the image for the buttons doesn't show. It works on Safari, Chrome, Firefox, Opera, IE7, and IE9, just not IE8. If you want to see it, its http://boundsblazer.com . Please help!





On a side note, the "border solution" doesn't work, as you can see I declared the border in the CSS.





Issue solved:





The behavior tag doesn't work in IE8, so if you want PIE CSS3 for rounded borders in IE8, its a no-go. Also, adding:





background:transparent url()





and getting rid of:





background-image:url()





worked.


Comments

  1. Simple, change:

    background-image:url('http://boundsblazer.com/pkg/pics/buttons/small-button.png');


    to:

    background:transparent url('http://boundsblazer.com/pkg/pics/buttons/small-button.png');


    You'll also need to change the jquery.

    Load this in IE8

    Al

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?