Background image and border disappear on button.
Hi, I've read the known issues and none of the fixes there solved this.
I have a button styled like this:
Code:
input.form-submit {
background: url('images/button.png') #317EC3;
color: white;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
height: 30px;
font-size: 10pt;
width: auto;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius: 7px;
-webkit-box-shadow: #555 0px 0px 2px;
-moz-box-shadow: #555 0px 0px 2px;
box-shadow: #555 0px 0px 2px;
z-index: 1;
position: relative;
behavior: url('/PIE.php');
}
I have two buttons with this class. One is style correctly, but on the other, some incorrect styling happens when PIE starts working on it:
- The background image of the button disappears
- The border of the button disappears
- The width of the button decreases so no padding is left between the text and the edge of the button.
+ The background color of the button stays intact
+ The button has rounded edges
+ The shadow is rendered
Screenshot (left is good, right is bad)
I have tried position:relative and z-index (as you can see) but neither of them solve the problem. I also tried giving the parent div position:relative and z-index:0.
This problem seems only to be caused by the border-radius. If I leave that out, the background and border work fine.
Any help would be very much appreciated. Thanks.
Forums
