Interval messed up

Question

What with my interval here? When the labels contain text, the spacing is OK, but then they are empty, they have a space between each label. Why is extra space added when labels contain empty text?

With the text in the labels (how I want it to look):

Without the text in the shortcuts (as I don't want it to look):

In the C # code behind:

// On page load for (int i = 1; i < 10; i++) { string ID = i.ToString(); PopulateLastNameLabel(ID); } protected void PopulateLastNameLabel(string ID) { Label lbl = new Label(); lbl.Width = 70; lbl.Height = 20; lbl.Text = ""; lbl.BackColor = System.Drawing.Color.Red; lbl.ID = "lastname_" + ID; pnlLastNameLabel.Controls.Add(lbl); } 

From ASP.NET:

 <asp:Table ID="tblDisplayTable" runat="server"> <asp:TableRow> <asp:TableCell> <asp:Panel ID="pnlPrizeNumberLabel" runat="server" Width="80px"></asp:Panel> </asp:TableCell> <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle"> <asp:Panel ID="pnlPrizeDropDownList" runat="server" Width="130px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlNickNameLabel" runat="server" Width="70px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlPrizeNicknameTextBox" runat="server" Width="125px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlFirstNameLabel" runat="server" Width="70px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlLastNameLabel" runat="server" Width="70px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlEmailAddressLabel" runat="server" Width="140px"></asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlAddButton" runat="server" Width="40px"></asp:Panel> </asp:TableCell> </asp:TableRow> </asp:Table> 

Answer 1

If I understand your question correctly, you will need the following css (remove the height from the code behind).

The problem is that each control is in its own cell in the table, so they will not be aligned horizontally. Therefore, you need to set the height explicitly for each control.

 <style type="text/css"> td div { margin-right: 5px; } td div input {border: 1px solid #828282; height: 21px; } td div span { height: 25px; line-height: 25px; } </style> <asp:Table ID="tblDisplayTable" runat="server" CellPadding="0" CellSpacing="0"> <asp:TableRow> <asp:TableCell> <asp:Panel ID="pnlPrizeNumberLabel" runat="server" Width="80px"> </asp:Panel> </asp:TableCell> <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle"> <asp:Panel ID="pnlPrizeDropDownList" runat="server" Width="130px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlNickNameLabel" runat="server" Width="70px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlPrizeNicknameTextBox" runat="server" Width="125px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlFirstNameLabel" runat="server" Width="70px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlLastNameLabel" runat="server" Width="70px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlEmailAddressLabel" runat="server" Width="140px"> </asp:Panel> </asp:TableCell> <asp:TableCell> <asp:Panel ID="pnlAddButton" runat="server" Width="40px"> </asp:Panel> </asp:TableCell> </asp:TableRow> </asp:Table> protected void Page_Load(object sender, EventArgs e) { for (int i = 1; i < 10; i++) { string ID = i.ToString(); TextBoxLabel(ID); PopulatePrizeNicknameLabel(ID); PopulateFirstNameLabel(ID); PopulateLastNameLabel(ID); } } protected void TextBoxLabel(string ID) { TextBox lbl = new TextBox(); lbl.Width = 65; lbl.Text = ""; lbl.ID = "TextBox_" + ID; lbl.Text = ID; pnlNickNameLabel.Controls.Add(lbl); } protected void PopulatePrizeNicknameLabel(string ID) { Label lbl = new Label(); lbl.Width = 125; lbl.Text = ""; lbl.BackColor = System.Drawing.Color.Green; lbl.ID = "PrizeNickname_" + ID; lbl.Text = ID; pnlPrizeNicknameTextBox.Controls.Add(lbl); } protected void PopulateLastNameLabel(string ID) { Label lbl = new Label(); lbl.Width = 70; lbl.Text = ""; lbl.BackColor = System.Drawing.Color.Red; lbl.ID = "lastname_" + ID; lbl.Text = ID; pnlLastNameLabel.Controls.Add(lbl); } protected void PopulateFirstNameLabel(string ID) { Label lbl = new Label(); lbl.Width = 70; lbl.Text = ""; lbl.BackColor = System.Drawing.Color.Blue; lbl.ID = "firstname_" + ID; lbl.Text = ID; pnlFirstNameLabel.Controls.Add(lbl); } 

I prefer to create controls one row at a time rather than one column at a time, but this is not an OP.