Speech bubble inside repeater

Above is an image of the rendered css when I changed the bg color of .speech_bubble_content to red. The bubble isn't displaying properly.

I am using the following code to retrieve data from a database and bind it to a repeater. I am also using css to display a speech bubble around what I want to display. I noticed that data is displayed when I place a label outisde of the div - and nothing is retrieved when the label is inside the div - in this case creation date is displayed, but story is omitted. Why is this happening? Thanks for your help. I believe this is caused by css.

<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>&nbsp;<asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>

    </ItemTemplate>
   </asp:Repeater>

Here's the CSS:

.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, 开发者_JAVA技巧.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;
}

Yes do as rene suggest. View the source, HTML copy it and the CSS and save it to http://jsbin.com/ and send the Link back here so we can see the REAL html that .NET generates.

You might also just want to have

<%#DataBinder.Eval(Container.DataItem, "Story") %>

instead of using a asp:label as it will add unwanted HTML tags.