Before anything else, I want to acknowledge the unprefixing of -moz-border-image in Firefox 15. You can read more about it here: . I made adjustments to my CSS to accommodate Firefox 15. However, I am facing a different issue that needs attention.
To elaborate, in Firefox 15, the content within a div with border-image now crosses over the said border-image, making it seem like the border is part of the interior of the div. Other browsers do not exhibit this problem and function as expected, which makes it difficult for me to simply adjust the padding to compensate for the border (as other browsers would end up having excessive padding).
Do you have any suggestions on how to resolve this matter? Thank you!
You can view an example page here
This is my code:
<style type="text/css">
body { background: yellow; }
.borderbox {
-moz-border-image: url(border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px repeat stretch;
-webkit-border-image: url(border_sprite.png) 31 25 25 20 fill repeat stretch;
-o-border-image: url(border_sprite.png) 31 25 25 20 repeat stretch;
border-image: url(border_sprite.png) 31 25 25 20 fill repeat stretch;
border-width: 31px 25px 25px 20px;
border-image-width: 31px 25px 25px 20px;
padding: 0 10px 20px 0;
text-align: right;
overflow: auto;
width: 400px;
height: 400px;
color: purple;
font-size: 20px;
}
</style>
<!DOCTYPE html>
<head></head>
<body>
<div class="borderbox">
The content should be contained within the inner white box. Why is it also covering the blue border in Firefox 15?
</div>
</body>
</html>