CSS bubble doesn't work in Firefox - html

Question

I have some CSS:
.bubbledLeft,
.bubbledRight{
position: relative;
margin-top: 3px;
max-width: 99%;
clear: both;
min-width: 99%;
}
.bubbledLeft{
float: left;
margin-right: auto;
padding: 14px 10px 4px 15px; /*position within the border*/
}
.bubbledLeft:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 10px 8px 17px;
border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-webkit-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-moz-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-o-border-image: url("/assets/chat/speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
}
.bubbledRight{
float: right;
margin-left: auto;
text-align: right;
text-align: left;
padding: 4px 15px 4px 15px; /*position within the border*/
}
.bubbledRight:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 17px 8px 10px;
border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-webkit-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-moz-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
-o-border-image: url("/assets/chat/speech_bubble_right_2.png") 8 17 8 10 stretch stretch ;
}
HTML:
<div class="content">
<textarea id="messageText" rows="3" style="width: 80%; resize: none; height: 40px; border: 0px; position: fixed; top: 0px; left: 0px; z-index: 999;" >Napisz wiadomość...</textarea>
<button id="sendMsgBtn-ajax" class="sendMsgBtn">Wyślij</button>
<div class="commentArea" id="commentArea">
<% #msgs.each do |m| %>
<% if (current_user.blank? == false && m.user.blank? == false && m.user.email == current_user.email) %>
<div class="bubbledRight">
<%= m.body %>
<br />
<div class="date-right"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
<div class="nick-right"> ~<%= m.user.blank? == false ? m.user.email : "gość" %></div>
</div>
<br />
<% else %>
<div class="bubbledLeft">
<%= m.body %>
<br />
<div class="date"><%= m.created_at.to_time.strftime("%Y-%m-%d %H:%M") %></div>
<div class="nick"> ~<%= m.user.blank? == false ? m.user.email : "gość" %></div>
</div>
<br />
<% end %>
<% end %>
</div>
</div>
It works perfectly on Chrome, Opera and Safari but it doesn't on Firefox. Why ?
Screenshots (left chrome right firefox): http://ge.tt/7dGLW7U?c

Answer 1

Firefox doesn't seem to like having border-width on its own without other border properties. Try adding this line before your border-width line:
border:solid transparent;
UPDATE:
The latest CSS3 spec says that the border image should not be displayed in the middle of the box, so Firefox's implementation is correct. To show the border image in the whole box, add the fill value for the border-image-slice property, or use the fill keyword in the border-image shorthand. The following CSS should work for you:
-webkit-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-moz-border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
-o-border-image: url("speech_bubble_left_2.png") 8 10 8 17 stretch;
border-image: url("speech_bubble_left_2.png") 8 10 8 17 fill stretch;
Note that Opera doesn't support fill yet but it will work if you just use stretch on its own. Also, it's better to put the non-prefixed property last for browsers that support it, as this is the order that CSS rules are parsed.