My submit button has the following CSS styling:
.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");
}
As for 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\')');
});
});
In an unexpected turn of events, this setup works perfectly in IE7 and IE9, but encounters issues in IE8. Specifically, the button images fail to display. The functionality is flawless in Safari, Chrome, Firefox, Opera, IE7, and IE9, except for IE8. Feel free to visit http://boundsblazer.com to see the problem firsthand. Any assistance would be greatly appreciated!
Additionally, attempting a "border solution" has proven ineffective, despite already defining the border in the CSS.
Resolution:
The behavior attribute is not compatible with IE8, hence using PIE CSS3 for rounded borders in IE8 is unachievable. Removing:
background-image:url()
and replacing it with:
background:transparent url()
proved to be the workaround solution.