Repeater overflowing out of div in Firefox.

I have a repeater that is overflowing outside of a div rather than extending it in Firefox but it looks fine in IE, Chrome and Safari.
<asp:Panel ID="pnlNotes" Visible="true" runat="server">
	    <br />
        <h2>Notes</h2>
        <br />
        <asp:Button ID="btnNote" Text="Add Note" OnClick="btnNote_Click" runat="server" />
        <asp:Repeater id="rptNotes" runat="server">
            <HeaderTemplate>
                <table class="indentedTable" cellSpacing="3" cellPadding="0" width="600px" align="left" border="1">
            </HeaderTemplate>

            <ItemTemplate>
                <tr>
                    <td align="left" width="10%">
                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">
                        <%# DataBinder.Eval(Container.DataItem, "Name") %>
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>
                    <td width="35%">   
                        <%# DataBinder.Eval(Container.DataItem, "ActionTime") %>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <%# DataBinder.Eval(Container.DataItem, "Note") %>
                    </td>
                </tr>
            </ItemTemplate>
    
            <SeparatorTemplate>
                <tr>
                    <td colspan="4"><hr color="black" /><br /></td>
                </tr>
            </SeparatorTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
	    <br />
	</asp:Panel>

Open in new window

repeater.jpg
FIM2003Asked:
Who is Participating?
 
MlandaTCommented:
Try this:

1. Give the asp:Panel a width of 100%.
2. Add a style="overflow:auto" to the asp:Panel as well.

Works fine if the DIV is rendered as:

<div id="ctl00_contentplaceholder2_pnlNotes" style="overflow: auto; width:100%">
0
 
MlandaTCommented:
You need to post the CSS code which you are using otherwise it is not possible to help you figure this one out. Particularly "indentedTable".



0
 
MlandaTCommented:
Maybe post the HTML being output by the page as well then we just look at where the problem is coming from. This type of problem is normally just related to your CSS.
0
 
FIM2003Author Commented:
indentedTable is actually an old class that is no longer used in the current CSS file (I just missed it to take it out) so it wasn't specifying anything. Here is the outputted HTML code. coloredText is just font-weight: bold.
<div id="ctl00_contentplaceholder2_pnlNotes">
	
	    <br />

        <h2>Notes</h2>
        <br />
        
        
                <table class="" cellSpacing="3" cellPadding="0" width="600px" align="left" border="1">
            
                <tr>
                    <td align="left" width="10%">
                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">

                        ---
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>
                    <td width="35%">   
                        10/12/2009 4:00:18 PM
                    </td>
                </tr>
                <tr>

                    <td colspan="4">
                        Assigned to --- in Purchasing
                    </td>
                </tr>
            
                <tr>
                    <td colspan="4"><hr color="black" /><br /></td>
                </tr>
            
                <tr>
                    <td align="left" width="10%">

                        <label class="coloredText">Name:</label>
                    </td>
                    <td width="45%">
                        ---
                    </td>
                    <td align="left" width="10%">
                        <label class="coloredText">Time:</label>
                    </td>

                    <td width="35%">   
                        10/12/2009 3:58:15 PM
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        Assigned to --- in Purchasing
                    </td>
                </tr>
            
                </table>

            
	    <br />
	
</div>

Open in new window

0
 
FIM2003Author Commented:
This did the trick. Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.