I have a submit button which has the following CSS:

  .button{
    border:1px solid #015691;
    background-image:url('/
         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(".htc");
  }

and my JQuery...

$(".button").mousedown(function(){
    $(this).css('border-bottom-width', '0px');
    $(this).css('background-image', 'url(\'.png\')');

    $(this).mouseout(function(){
          $(this).css('border-bottom-width', '1px');
          $(this).css('background-image', 'url(\'.png\')');
    });
    $(this).mouseup(function(){
          $(this).css('border-bottom-width', '1px');
          $(this).css('background-image', 'url(\'.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 . 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.

I have a submit button which has the following CSS:

  .button{
    border:1px solid #015691;
    background-image:url('http://boundsblazer./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./pkg/plugins/PIE.htc");
  }

and my JQuery...

$(".button").mousedown(function(){
    $(this).css('border-bottom-width', '0px');
    $(this).css('background-image', 'url(\'http://boundsblazer./pkg/pics/buttons/small-button-pressed.png\')');

    $(this).mouseout(function(){
          $(this).css('border-bottom-width', '1px');
          $(this).css('background-image', 'url(\'http://boundsblazer./pkg/pics/buttons/small-button.png\')');
    });
    $(this).mouseup(function(){
          $(this).css('border-bottom-width', '1px');
          $(this).css('background-image', 'url(\'http://boundsblazer./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.. 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.

• javascript
• jquery
• html
• css
• internet-explorer-8

• The argument to url() does not require single quotes. Did you try $(this).css("background-image", "url(http://boundsblazer./pkg/pics/buttons/small-button-pressed.png)");? – Frédéric Hamidi Commented Jan 16, 2012 at 15:08
• That didn't change anything... :( – user569322 Commented Jan 16, 2012 at 15:10
• 2 Could it be that the behavior in .button changes the background to something IE8 doesn't understand? – timing Commented Jan 16, 2012 at 15:13
• Maybe, ill cut that for a sec. – user569322 Commented Jan 16, 2012 at 15:13
• Yes, that was the issue! But how else will I implement rounded borders? D: – user569322 Commented Jan 16, 2012 at 15:14

1 Answer 1

Simple, change:

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

to:

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

You'll also need to change the jquery.

Load this in IE8

Al