The image above shows the rendered CSS after changing the background color of .speech_bubble_content to red. However, the speech bubble is not displaying correctly.
I am using the code below to fetch data from a database and bind it to a repeater. I have also applied CSS to create a speech bubble around the content. Strangely, when I place a label outside the div, the data is displayed properly while placing it inside results in only the creation date being shown, with the story omitted. I suspect this issue is caused by CSS - can anyone help me resolve this? Thank you for your assistance.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="speech_bubble">
<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
<div class="speech_bubble_content">
<p>
<asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>
</p>
</div>
<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
<em></em><span></span>
</div>
<asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label> <asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>
</ItemTemplate>
</asp:Repeater>
Here is the CSS used:
.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block;
background:#fff;
border:3px solid #ddd;
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0;
color:#000;
margin:0 15px;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block;
overflow:hidden;
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;}
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}
.speech_bubble em{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #ddd;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.speech_bubble span{
display:block;
width:0;
height:0;
overflow:hidden;
border-top:10px solid #fff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}