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.
Simple, change:
ReplyDeletebackground-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