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:
background: url('images/button.png') #317EC3;
border: 1px solid black;
-webkit-box-shadow: #555 0px 0px 2px;
-moz-box-shadow: #555 0px 0px 2px;
box-shadow: #555 0px 0px 2px;
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 renderedScreenshot
(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.