Here is the CSS code I am using:
.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 ;
}
This is how I have structured my HTML elements:
<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;" >Type your message...</textarea>
<button id="sendMsgBtn-ajax" class="sendMsgBtn">Send</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 : "guest" %></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 : "guest" %></div>
</div>
<br />
<% end %>
<% end %>
</div>
</div>
This setup works well on Chrome, Opera, and Safari but seems to have issues on Firefox. Can anyone identify the reason behind this inconsistency?
Comparison screenshots between Chrome and Firefox can be viewed here: