ASP Version 2 Beginner Question - Laying out Complex Forms

[Roger Stenson]

Hi
I am designing a fairly complex web form of which the following is two
lines using VB in VS 2005. (The appearance aspects are in the skin file)
When I display it in Design View both lines are beautifully alligned on the
identical width properties
When I display it in the browser, the width properties are ignored for the
labels (but not the text boxes) and the first line compresses completely
out of alignment.

It makes no difference if I remove the table packing which comes in useful
further down the form when I use both columns

I can pack the label fields out with spaces but can't believe that approach
will survive different browsers or screen sizes
What is the technique for achiev ing robust field alignment in these
circumstances.

Roger Stenson

<table>
<tr style="width: 1000px; height:15px"><td colspan = "2" >
<asp:Label ID="lblEmail" runat="server" Text="Email" Width="220px" />
<asp:Label ID="lblPhone" runat="server" Text="Phone" Width="100px"/>
<asp:Label ID="lblMobile" runat="server" Text="Mobile" Width="110px"/>
<asp:Label ID="lblCommittee" runat="server" Text="Committee" Width="120px"/>
<asp:CheckBox ID="cbxDirects" runat="server" Text="Dir" Width="50px"/>
<asp:CheckBox ID="cbxSubs" runat="server" Text="Sub" Width="50px" />
<asp:CheckBox ID="cbxHst" runat="server" Text="Hst" Width="50px" />
<asp:Label ID="lblUpdated" runat="server" Text="Updated" Width="60px"/>
</td>
</tr>

<tr style="width: 1000px; height:15px"><td colspan = "2" >
<asp:TextBox ID="txtEmail" runat="server" Width="220px "/>
<asp:TextBox ID="txtPhone" runat="server" Width="100px"/>
<asp:TextBox ID="txtMobile" runat="server" Width="110px"/>
<aspropDownList ID="ddlCommittee" Width="120px" runat="server" >
<asp:ListItem Value="Chmn">Chairman</asp:ListItem>
</aspropDownList>
<asp:CheckBox ID="cbxSitter" runat="server" Text="Sit" Width="50px" />
<asp:CheckBox ID="cbxScores" runat="server" Text="Scr" Width="50px"/>
<asp:CheckBox ID="cbxCaters" runat="server" Text="Ctr" Width="50px"/>
<asp:TextBox ID="TextBox19" runat="server" Width="60px"/>
</td>

 

[Stan]

Hi
I am designing a fairly complex web form of which the following is two
lines using VB in VS 2005. (The appearance aspects are in the skin file)
When I display it in Design View both lines are beautifully alligned on the
identical width properties
When I display it in the browser,  the width properties  are ignored for the
labels (but not the text boxes)  and the first line compresses completely
out of alignment.

It makes no difference if I remove the table packing which comes in useful
further down the form when I  use both columns

I can pack the label fields out with spaces but can't believe that approach
will survive different browsers or screen sizes
What is the technique for achiev ing  robust field alignment in these
circumstances.

Roger Stenson

<table>
<tr style="width: 1000px; height:15px"><td colspan = "2" >
<asp:Label ID="lblEmail" runat="server" Text="Email" Width="220px"/>
<asp:Label ID="lblPhone" runat="server" Text="Phone" Width="100px"/>
<asp:Label ID="lblMobile" runat="server" Text="Mobile" Width="110px"/>
<asp:Label ID="lblCommittee" runat="server" Text="Committee" Width="120px"/>
<asp:CheckBox ID="cbxDirects" runat="server" Text="Dir" Width="50px"/>
<asp:CheckBox ID="cbxSubs" runat="server" Text="Sub" Width="50px" />
<asp:CheckBox ID="cbxHst" runat="server" Text="Hst" Width="50px" />
<asp:Label ID="lblUpdated" runat="server" Text="Updated" Width="60px"/>
</td>
</tr>

<tr style="width: 1000px; height:15px"><td colspan = "2" >
<asp:TextBox ID="txtEmail" runat="server" Width="220px "/>
<asp:TextBox ID="txtPhone" runat="server" Width="100px"/>
<asp:TextBox ID="txtMobile" runat="server" Width="110px"/>
<aspropDownList ID="ddlCommittee" Width="120px" runat="server" >
<asp:ListItem Value="Chmn">Chairman</asp:ListItem>
</aspropDownList>
<asp:CheckBox ID="cbxSitter" runat="server" Text="Sit" Width="50px" />
<asp:CheckBox ID="cbxScores" runat="server" Text="Scr" Width="50px"/>
<asp:CheckBox ID="cbxCaters" runat="server" Text="Ctr" Width="50px"/>
<asp:TextBox ID="TextBox19" runat="server" Width="60px"/>
</td>

The 'width: 1000px;' style attributes in the row tags are in the wrong
place and will have no effect. They have to be in a cell tag. You need
to put them in a cell that doesn't span any more than a single column,
so the ones shown cannot be used for that purpose. Presumably
somewhere in your table there are single column cells.

BTW don't rely on the designer to preview how things will be laid out.
It invariably differs from the way the page appears in the browser.