Can't show all four sides of a table border

John500
John500 used Ask the Experts™
on
Given the picture below and the code which displays it, what do I need to do in order to show all four borders for these boxes?

Thanks!
<table>
        <tr>
            <td>
            <div id = "noticeheader"
                
                    style=" vertical-align:top; width:587px; height:125px;  display: block;  position: inherit; padding:3px;">
                <igmisc:WebGroupBox ID="WebGroupBox1" runat="server" BorderColor="#666666" 
                    BorderStyle="Solid" BorderWidth="2px" Font-Names="Arial" Font-Size="10pt" 
                                    ForeColor="#666666"  Text="Template " Width="16px" 
                    style="padding:3px; height:120px; width:100%; " Height="124px">
                <Template>
                    <table style="width:77%; font-family: Ariel; font-size: 8pt; color: #000000;  margin-left: 0px; margin-bottom: 0px;">
                        <tr align ="left">
                            <td>
                                <asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Size="8pt" Text="Template Name:" Font-Names="Arial"></asp:Label><br />
                                <telerik:RadTextBox ID="TemplateName" Runat="server" Width="250px"></telerik:RadTextBox>
                            </td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Font-Names="Arial" Font-Size="8pt" Text="Header:"></asp:Label><br /> 
                                <telerik:RadComboBox ID="NoticeHeader_ID" Runat="server"  Width="250px"></telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr  align ="left">
                            <td>
                                <asp:Label ID="Label3" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="8pt" Text="Document Title (optional):" ></asp:Label><br />
                                <telerik:RadTextBox ID="TemplateTitle" Runat="server" Width="250px"></telerik:RadTextBox>
                            </td>
                            <td>
                                <asp:CheckBox ID="ApplyLogo" runat="server" Text="Show Logo" /><br/>
                                <telerik:RadComboBox ID="PositionLogo" Runat="server"  Width="250px"></telerik:RadComboBox>
 
                            </td>
                        </tr>
                    </table>
                </Template>
                </igmisc:WebGroupBox>
            </div>
            </td>
            <td>
            <div id = "NoticeOptions"
                
                    
                    style=" vertical-align:top; width:261px; height:123px;  display: block;  position: inherit; padding:3px;">
                <igmisc:WebGroupBox ID="WebGroupBox2" runat="server" BorderColor="#666666" 
                    BorderStyle="Solid" BorderWidth="2px" Font-Names="Arial" Font-Size="10pt" 
                                    ForeColor="#666666"  Text="Notice Options " Width="16px" 
                    style="padding:3px; height:120px; width:100%; " Height="120px">
                <Template>
                    <table style="width:109%; font-family: Ariel; font-size: 8pt; color: #000000;  margin-left: 6px; margin-bottom: 0px; height: 100px;">
                    <tr align ="left"  >
                            <td>
                                 <asp:CheckBox ID="CheckBox1" runat="server" Text="Option 1" />
                                 <br/>
                            </td>
                            <td>
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Option 2"  />
                        <tr align="left">
                            <td class="style1">
                                 <asp:CheckBox ID="CheckBox3" runat="server" Text="Option 3" />
                                 <br />
                            </td>
                            <td class="style1">
                                 <asp:CheckBox ID="CheckBox4" runat="server" Text="Option 4" />
                                 <br />
                            </td>
                        </tr>
                    </tr>
                    </table>
                </Template>
                </igmisc:WebGroupBox>
        </div>
        </td>
    </tr>
</table>

Open in new window

Web-Group-Boxes-.JPG
Web-Group-Boxes-design-mode-.JPG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013
Commented:
<Template>
                    <table style="width:109%;
109% ?? is that a typo....set it to 100%

Author

Commented:
Thanks.  I changed every occurance of width to 100% but now I have the separation of the two boxes as seen below.

Any ideas here?

Thanks
<table id="Table1" width="100%">
        <tr>
            <td>
            <div id = "noticeheader"
                
                    style=" vertical-align:top; width:587px; height:125px;  display: block;  position: inherit; padding:3px;">
                <igmisc:WebGroupBox ID="WebGroupBox1" runat="server" BorderColor="#666666" 
                    BorderStyle="Solid" BorderWidth="2px" Font-Names="Arial" Font-Size="10pt" 
                                    ForeColor="#666666"  Text="Template " Width="16px" 
                    style="padding:3px; height:120px; width:100%; " Height="124px">
                <Template>
                    <table id="Table2" 
                        style="width:100%; font-family: Ariel; font-size: 8pt; color: #000000;  margin-left: 0px; margin-bottom: 0px;">
                        <tr align ="left">
                            <td>
                                <asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Size="8pt" Text="Template Name:" Font-Names="Arial"></asp:Label><br />
                                <telerik:RadTextBox ID="TemplateName" Runat="server" Width="250px"></telerik:RadTextBox>
                            </td>
                            <td>
                                <asp:Label ID="Label2" runat="server" Font-Names="Arial" Font-Size="8pt" Text="Header:"></asp:Label><br /> 
                                <telerik:RadComboBox ID="NoticeHeader_ID" Runat="server"  Width="250px"></telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr  align ="left">
                            <td>
                                <asp:Label ID="Label3" runat="server" Font-Bold="False" Font-Names="Arial" Font-Size="8pt" Text="Document Title (optional):" ></asp:Label><br />
                                <telerik:RadTextBox ID="TemplateTitle" Runat="server" Width="250px"></telerik:RadTextBox>
                            </td>
                            <td>
                                <asp:CheckBox ID="ApplyLogo" runat="server" Text="Show Logo" /><br/>
                                <telerik:RadComboBox ID="PositionLogo" Runat="server"  Width="250px"></telerik:RadComboBox>
 
                            </td>
                        </tr>
                    </table>
                </Template>
                </igmisc:WebGroupBox>
            </div>
            </td>
            <td>
            <div id = "NoticeOptions"
                
                    
                    style=" vertical-align:top; width:261px; height:123px;  display: block;  position: inherit; padding:3px;">
                <igmisc:WebGroupBox ID="WebGroupBox2" runat="server" BorderColor="#666666" 
                    BorderStyle="Solid" BorderWidth="2px" Font-Names="Arial" Font-Size="10pt" 
                                    ForeColor="#666666"  Text="Notice Options " Width="16px" 
                    style="padding:3px; height:120px; width:100%; " Height="120px">
                <Template>
                    <table id="Table3" 
                        style="width:100%; font-family: Ariel; font-size: 8pt; color: #000000;  margin-left: 6px; margin-bottom: 0px; height: 100px;">
                    <tr align ="left"  >
                            <td>
                                 <asp:CheckBox ID="CheckBox1" runat="server" Text="Option 1" />
                                 <br/>
                            </td>
                            <td>
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Option 2"  />
                        <tr align="left">
                            <td >
                                 <asp:CheckBox ID="CheckBox3" runat="server" Text="Option 3" />
                                 <br />
                            </td>
                            <td>
                                 <asp:CheckBox ID="CheckBox4" runat="server" Text="Option 4" />
                                 <br />
                            </td>
                        </tr>
                    </tr>
                    </table>
                </Template>
                </igmisc:WebGroupBox>
        </div>
        </td>
    </tr>
</table>

Open in new window

Web-Group-Boxes-2.JPG
Top Expert 2013

Commented:
I will suggest you to take a look into html source of your page ...and see ...
Since I don't have igmisc:WebGroupBox or any telerik controls I cannot test/troubleshoot your code...
my one doubt would be to set the width of igmisc:WebGroupBox which is currently 16px...
Is the new layout displaying the same in the VS IDE as well ?

Author

Commented:
In design mode I was able to grab the side of the smaller box and drag it over closer to the other.  You never know..........

Commented:
Looks like your outerlined table holding everything has width set to 100%, and you have div's set on the inside of the <td>'s for that table set to specific amounts (first one 587px, 2nd 261px) so unless you have the original table that's set to 100% it's possible that the table could stretch further than what the div's do.  Try setting the original table at the top to width: 848px instead of 100%

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial