• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

html formatting of radio buttons and table

I am unhappy with the way my radio buttons look in the attached HTML, but despite my best efforts, every attempt to change them screws up the entire table.  I want them to be horizontal underneath "Gender", next to each other, not on top of each other.  (This is for an intranet webform, so I can be assured my users will be using IE).

(Also, I would like the form elements of the three columns to line up a little more at the top.  
I am not sure why they don't.)

Can someone help me straighten out my html to get the look I want?

Thanks.
 
<%@ Page Language="vb"  MaintainScrollPositionOnPostback="true"     AutoEventWireup="false" CodeBehind="UserDetails.aspx.vb" Inherits="MyChartExternal.UserDetails" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Ochsner - Online Registration </title>
    <link href="ochsner_reg.css" rel="stylesheet" type="text/css" />
    </head>
<body>
<div id="wrap">
<div id="banner">
</div>
<div id="main">
<h2>Online Registration</h2>
		<h3>All fields with an asterisk are required.</h3>

    <form id="form1" runat="server">
    <table id="tblcontent">
    
    <tr>
    
    <td>
       <div class="item">
        <asp:Label ID="LabelFirstName" runat="server" Text="* First Name" ></asp:Label>
        <br />
        <asp:TextBox ID="TextBoxFirstName" runat="server" ></asp:TextBox>
        <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            BackColor="White" ControlToValidate="TextBoxFirstName" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>

            <div class="item">
            <asp:Label ID="LabelLastName" runat="server" Text="* Last Name" ></asp:Label>
            <br />
                <asp:TextBox ID="TextBoxLastName" runat="server"></asp:TextBox>
            <br />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                BackColor="White" ControlToValidate="TextBoxLastName" 
                ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator>
            </div>
        <div class="item">
        <asp:Label ID="LabelSSN" runat="server" Text="* SSN" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxSSN" runat="server"  
            ToolTip="Format: XXX-XX-XXXX"></asp:TextBox><div class="hint">
XXX-XX-XXXX
</div>     
        <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" 
            ControlToValidate="TextBoxSSN" ErrorMessage="RegularExpressionValidator" 
            ForeColor="Red" ValidationExpression="\d{3}-\d{2}-\d{4}">Please format: XXX-XX-XXXX</asp:RegularExpressionValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
            BackColor="White" ControlToValidate="TextBoxSSN" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
            </div>
                <div class="item">
        <asp:Label ID="LabelDOB" runat="server" Text="* Date Of Birth" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxDOB" runat="server"  
            ToolTip="Format: XX/XX/XXXX"></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
            BackColor="White" ControlToValidate="TextBoxDOB" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server" 
            ControlToValidate="TextBoxDOB" Display="Dynamic" 
            ErrorMessage="CompareValidator" ForeColor="Red" Operator="DataTypeCheck" 
            Type="Date">Not a valid date</asp:CompareValidator></div>
    </td>
    <td>
    

            <div class="item">
						<label>Gender</label>
                        <asp:RadioButtonList ID="RadioButtonGender" runat="server" RepeatLayout="Flow" Width="150px" 
            AutoPostBack="True" Height="103px">
            <asp:ListItem Value="M">Male</asp:ListItem>
            <asp:ListItem Value="F">Female</asp:ListItem>
        </asp:RadioButtonList>
        &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" 
            ControlToValidate="RadioButtonGender" ErrorMessage="Required Field" 
            ForeColor="Red"></asp:RequiredFieldValidator>
                        <br />
            </div>

    
    <div class="item">
        <asp:Label ID="Label2" runat="server" Text="Clinic Number:" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxClinicNo" runat="server" ></asp:TextBox>
            <br />
        <div class="hint">
        (if known)
        </div>
        </div>


        <div class="item">
        <asp:Label ID="LabelPhoneNo" runat="server" Text="* Phone Number" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxPhoneNo" runat="server"  
            ToolTip="Format: (XXX) XXX-XXXX"></asp:TextBox><div class="hint">(XXX) XXX-XXXX
            </div>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" 
            ControlToValidate="TextBoxPhoneNo" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
            ControlToValidate="TextBoxPhoneNo" Display="Dynamic" 
            ErrorMessage="RegularExpressionValidator" ForeColor="Red" 
            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">Please format: (XXX) XXX-XXXX</asp:RegularExpressionValidator></div>

    <div class="item">
        
        <asp:Label ID="LabelEmail" runat="server" Text="* Email" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxEmail" runat="server" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
            BackColor="White" ControlToValidate="TextBoxEmail" 
            ErrorMessage="Required Field" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
            ControlToValidate="TextBoxEmail" Display="Dynamic" 
            ErrorMessage="RegularExpressionValidator" ForeColor="Red" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Not a valid email address.</asp:RegularExpressionValidator></div>
    </td>

    <td>
   
    <div class="item">
        <asp:Label ID="LabelAddress1" runat="server" Text="* Address1" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxAddress1" runat="server" MaxLength="50" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
            BackColor="White" ControlToValidate="TextBoxAddress1" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
        <br />
        <div class="item">
        <asp:Label ID="LabelAddress2" runat="server" Text="Address2" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxAddress2" runat="server" ></asp:TextBox></div>
        <br />
        <div class="item">
      
        <asp:Label ID="LabelCity" runat="server" Text="* City" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxCity" runat="server" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" 
            BackColor="White" ControlToValidate="TextBoxCity" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
        <br />
        <div class="item">
        <asp:Label ID="LabelState" runat="server" Text="* State" ></asp:Label>
        &nbsp;<br />
            <asp:DropDownList ID="DropDownListState" runat="server" 
            CausesValidation="True" >
            <asp:ListItem Value=AL>Alabama</asp:ListItem>
<asp:ListItem Value=AK>Alaska</asp:ListItem>
<asp:ListItem Value=AZ>Arizona</asp:ListItem>
<asp:ListItem Value=AR>Arkansas</asp:ListItem>
<asp:ListItem Value=CA>California</asp:ListItem>
<asp:ListItem Value=CO>Colorado</asp:ListItem>
<asp:ListItem Value=CT>Connecticut</asp:ListItem>
<asp:ListItem Value=DC>District of Columbia</asp:ListItem>
<asp:ListItem Value=DE>Delaware</asp:ListItem>
<asp:ListItem Value=FL>Florida</asp:ListItem>
<asp:ListItem Value=GA>Georgia</asp:ListItem>
<asp:ListItem Value=HI>Hawaii</asp:ListItem>
<asp:ListItem Value=ID>Idaho</asp:ListItem>
<asp:ListItem Value=IL>Illinois</asp:ListItem>
<asp:ListItem Value=IN>Indiana</asp:ListItem>
<asp:ListItem Value=IA>Iowa</asp:ListItem>
<asp:ListItem Value=KS>Kansas</asp:ListItem>
<asp:ListItem Value=KY>Kentucky</asp:ListItem>
<asp:ListItem Value=LA>Louisiana</asp:ListItem>
<asp:ListItem Value=ME>Maine</asp:ListItem>
<asp:ListItem Value=MD>Maryland</asp:ListItem>
<asp:ListItem Value=MA>Massachusetts</asp:ListItem>
<asp:ListItem Value=MI>Michigan</asp:ListItem>
<asp:ListItem Value=MN>Minnesota</asp:ListItem>
<asp:ListItem Value=MS>Mississippi</asp:ListItem>
<asp:ListItem Value=MO>Missouri</asp:ListItem>
<asp:ListItem Value=MT>Montana</asp:ListItem>
<asp:ListItem Value=NE>Nebraska</asp:ListItem>
<asp:ListItem Value=NV>Nevada</asp:ListItem>
<asp:ListItem Value=NH>New Hampshire</asp:ListItem>
<asp:ListItem Value=NJ>New Jersey</asp:ListItem>
<asp:ListItem Value=NM>New Mexico</asp:ListItem>
<asp:ListItem Value=NY>New York</asp:ListItem>
<asp:ListItem Value=NC>North Carolina</asp:ListItem>
<asp:ListItem Value=ND>North Dakota</asp:ListItem>
<asp:ListItem Value=OH>Ohio</asp:ListItem>
<asp:ListItem Value=OK>Oklahoma</asp:ListItem>
<asp:ListItem Value=OR>Oregon</asp:ListItem>
<asp:ListItem Value=PA>Pennsylvania</asp:ListItem>
<asp:ListItem Value=RI>Rhode Island</asp:ListItem>
<asp:ListItem Value=SC>South Carolina</asp:ListItem>
<asp:ListItem Value=SD>South Dakota</asp:ListItem>
<asp:ListItem Value=TN>Tennessee</asp:ListItem>
<asp:ListItem Value=TX>Texas</asp:ListItem>
<asp:ListItem Value=UT>Utah</asp:ListItem>
<asp:ListItem Value=VT>Vermont</asp:ListItem>
<asp:ListItem Value=VA>Virginia</asp:ListItem>
<asp:ListItem Value=WA>Washington</asp:ListItem>
<asp:ListItem Value=WV>West Virginia</asp:ListItem>
<asp:ListItem Value=WI>Wisconsin</asp:ListItem>
            <asp:ListItem Selected="True" Value="NONE">(Not Selected)</asp:ListItem>
        </asp:DropDownList>
            <br />
        <asp:CustomValidator ID="CustomValidator1" runat="server" 
            ControlToValidate="DropDownListState" ErrorMessage="Required Field" 
            OnServerValidate="ValidateState" EnableClientScript="False" ForeColor="Red">Required Field</asp:CustomValidator> </div>
        <br />
        <div class="item">
        <asp:Label ID="LabelZip" runat="server" Text="* Zip Code"  ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxZip" runat="server"  style="text-align:right"></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" 
            BackColor="White" ControlToValidate="TextBoxZip" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator></div>
    </td></tr></table>
                
        * indicates a required field.<br />
        
        <div>
        </div>
        
            <div align="center">
                <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" CssClass="button" />
            </div>
        
</form>
</div>
        <div id="footer">
        </div>
    </div>
 </body>
</html>

Open in new window

0
codefinger
Asked:
codefinger
  • 4
  • 3
1 Solution
 
ddayx10Commented:
I fixed your issues for you in IE at least.

1. Gender ddl. Simply add a <br /> after your label and add the RepeatDirection attribute to your radiobuttonlist. You'll note there is still a lot of room between the radiobuttonlist and the next control down (clinic no). This will go away if you change the height on the radiobuttonlist.

2. Added the style "vertical-align:top" to your <td> elements.

This should sort out the issues you asked about but I think its important to say that your approach to this layout is lacking best practice. HTML tables just make things very difficult and confusing (especially for cross-browser support) when used for design layout. I want to encourage you to try using <div>'s and the CSS property "float" in future. Once you get the hang of it it is much simpler, cleaner and more effective than tables in this type of layout.


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>My Ochsner - Online Registration </title>
    <link href="ochsner_reg.css" rel="stylesheet" type="text/css" />
    </head>
<body>
<div id="wrap">
<div id="banner">
</div>
<div id="main">
<h2>Online Registration</h2>
<h3>All fields with an asterisk are required.</h3>
    <form id="form1" runat="server">
    <table id="tblcontent">
    <tr>
    <td style="vertical-align:top;">
       <div class="item">
        <asp:Label ID="LabelFirstName" runat="server" Text="* First Name" ></asp:Label>
        <br />
        <asp:TextBox ID="TextBoxFirstName" runat="server" ></asp:TextBox>
        <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            BackColor="White" ControlToValidate="TextBoxFirstName" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>

            <div class="item">
            <asp:Label ID="LabelLastName" runat="server" Text="* Last Name" ></asp:Label>
            <br />
                <asp:TextBox ID="TextBoxLastName" runat="server"></asp:TextBox>
            <br />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                BackColor="White" ControlToValidate="TextBoxLastName" 
                ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator>
            </div>
        <div class="item">
        <asp:Label ID="LabelSSN" runat="server" Text="* SSN" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxSSN" runat="server"  
            ToolTip="Format: XXX-XX-XXXX"></asp:TextBox>
            <div class="hint">
XXX-XX-XXXX
</div>     
        <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" 
            ControlToValidate="TextBoxSSN" ErrorMessage="RegularExpressionValidator" 
            ForeColor="Red" ValidationExpression="\d{3}-\d{2}-\d{4}">Please format: XXX-XX-XXXX</asp:RegularExpressionValidator>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
            BackColor="White" ControlToValidate="TextBoxSSN" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
            </div>
                <div class="item">
        <asp:Label ID="LabelDOB" runat="server" Text="* Date Of Birth" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxDOB" runat="server"  
            ToolTip="Format: XX/XX/XXXX"></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
            BackColor="White" ControlToValidate="TextBoxDOB" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server" 
            ControlToValidate="TextBoxDOB" Display="Dynamic" 
            ErrorMessage="CompareValidator" ForeColor="Red" Operator="DataTypeCheck" 
            Type="Date">Not a valid date</asp:CompareValidator></div>
    </td>
    <td style="vertical-align:top;">
		<div class="item">
			<label>Gender</label><br />
			<asp:RadioButtonList ID="RadioButtonGender" runat="server" RepeatLayout="Flow" Width="150px"
				AutoPostBack="True" Height="103px" RepeatDirection="Horizontal">
				<asp:ListItem Value="M">Male</asp:ListItem>
				<asp:ListItem Value="F">Female</asp:ListItem>
			</asp:RadioButtonList>
        &nbsp;
        <asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" 
            ControlToValidate="RadioButtonGender" ErrorMessage="Required Field" 
            ForeColor="Red">
        </asp:RequiredFieldValidator>
        <br />
        </div>
    <div class="item">
        <asp:Label ID="Label2" runat="server" Text="Clinic Number:" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxClinicNo" runat="server" ></asp:TextBox>
            <br />
        <div class="hint">
        (if known)
        </div>
        </div>


        <div class="item">
        <asp:Label ID="LabelPhoneNo" runat="server" Text="* Phone Number" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxPhoneNo" runat="server"  
            ToolTip="Format: (XXX) XXX-XXXX"></asp:TextBox><div class="hint">(XXX) XXX-XXXX
            </div>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" 
            ControlToValidate="TextBoxPhoneNo" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" 
            ControlToValidate="TextBoxPhoneNo" Display="Dynamic" 
            ErrorMessage="RegularExpressionValidator" ForeColor="Red" 
            ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">Please format: (XXX) XXX-XXXX</asp:RegularExpressionValidator></div>

    <div class="item">
        
        <asp:Label ID="LabelEmail" runat="server" Text="* Email" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxEmail" runat="server" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
            BackColor="White" ControlToValidate="TextBoxEmail" 
            ErrorMessage="Required Field" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
            ControlToValidate="TextBoxEmail" Display="Dynamic" 
            ErrorMessage="RegularExpressionValidator" ForeColor="Red" 
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Not a valid email address.</asp:RegularExpressionValidator></div>
    </td>

    <td style="vertical-align:top;">
   
    <div class="item">
        <asp:Label ID="LabelAddress1" runat="server" Text="* Address1" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxAddress1" runat="server" MaxLength="50" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
            BackColor="White" ControlToValidate="TextBoxAddress1" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
        <br />
        <div class="item">
        <asp:Label ID="LabelAddress2" runat="server" Text="Address2" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxAddress2" runat="server" ></asp:TextBox></div>
        <br />
        <div class="item">
      
        <asp:Label ID="LabelCity" runat="server" Text="* City" ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxCity" runat="server" ></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" 
            BackColor="White" ControlToValidate="TextBoxCity" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
        <br />
        <div class="item">
        <asp:Label ID="LabelState" runat="server" Text="* State" ></asp:Label>
        &nbsp;<br />
            <asp:DropDownList ID="DropDownListState" runat="server" 
            CausesValidation="True" >
            <asp:ListItem Value=AL>Alabama</asp:ListItem>
<asp:ListItem Value=AK>Alaska</asp:ListItem>
<asp:ListItem Value=AZ>Arizona</asp:ListItem>
<asp:ListItem Value=AR>Arkansas</asp:ListItem>
<asp:ListItem Value=CA>California</asp:ListItem>
<asp:ListItem Value=CO>Colorado</asp:ListItem>
<asp:ListItem Value=CT>Connecticut</asp:ListItem>
<asp:ListItem Value=DC>District of Columbia</asp:ListItem>
<asp:ListItem Value=DE>Delaware</asp:ListItem>
<asp:ListItem Value=FL>Florida</asp:ListItem>
<asp:ListItem Value=GA>Georgia</asp:ListItem>
<asp:ListItem Value=HI>Hawaii</asp:ListItem>
<asp:ListItem Value=ID>Idaho</asp:ListItem>
<asp:ListItem Value=IL>Illinois</asp:ListItem>
<asp:ListItem Value=IN>Indiana</asp:ListItem>
<asp:ListItem Value=IA>Iowa</asp:ListItem>
<asp:ListItem Value=KS>Kansas</asp:ListItem>
<asp:ListItem Value=KY>Kentucky</asp:ListItem>
<asp:ListItem Value=LA>Louisiana</asp:ListItem>
<asp:ListItem Value=ME>Maine</asp:ListItem>
<asp:ListItem Value=MD>Maryland</asp:ListItem>
<asp:ListItem Value=MA>Massachusetts</asp:ListItem>
<asp:ListItem Value=MI>Michigan</asp:ListItem>
<asp:ListItem Value=MN>Minnesota</asp:ListItem>
<asp:ListItem Value=MS>Mississippi</asp:ListItem>
<asp:ListItem Value=MO>Missouri</asp:ListItem>
<asp:ListItem Value=MT>Montana</asp:ListItem>
<asp:ListItem Value=NE>Nebraska</asp:ListItem>
<asp:ListItem Value=NV>Nevada</asp:ListItem>
<asp:ListItem Value=NH>New Hampshire</asp:ListItem>
<asp:ListItem Value=NJ>New Jersey</asp:ListItem>
<asp:ListItem Value=NM>New Mexico</asp:ListItem>
<asp:ListItem Value=NY>New York</asp:ListItem>
<asp:ListItem Value=NC>North Carolina</asp:ListItem>
<asp:ListItem Value=ND>North Dakota</asp:ListItem>
<asp:ListItem Value=OH>Ohio</asp:ListItem>
<asp:ListItem Value=OK>Oklahoma</asp:ListItem>
<asp:ListItem Value=OR>Oregon</asp:ListItem>
<asp:ListItem Value=PA>Pennsylvania</asp:ListItem>
<asp:ListItem Value=RI>Rhode Island</asp:ListItem>
<asp:ListItem Value=SC>South Carolina</asp:ListItem>
<asp:ListItem Value=SD>South Dakota</asp:ListItem>
<asp:ListItem Value=TN>Tennessee</asp:ListItem>
<asp:ListItem Value=TX>Texas</asp:ListItem>
<asp:ListItem Value=UT>Utah</asp:ListItem>
<asp:ListItem Value=VT>Vermont</asp:ListItem>
<asp:ListItem Value=VA>Virginia</asp:ListItem>
<asp:ListItem Value=WA>Washington</asp:ListItem>
<asp:ListItem Value=WV>West Virginia</asp:ListItem>
<asp:ListItem Value=WI>Wisconsin</asp:ListItem>
            <asp:ListItem Selected="True" Value="NONE">(Not Selected)</asp:ListItem>
        </asp:DropDownList>
            <br />
        <asp:CustomValidator ID="CustomValidator1" runat="server" 
            ControlToValidate="DropDownListState" ErrorMessage="Required Field"
            EnableClientScript="False" ForeColor="Red">Required Field</asp:CustomValidator> </div>
        <br />
        <div class="item">
        <asp:Label ID="LabelZip" runat="server" Text="* Zip Code"  ></asp:Label>
            <br />
        <asp:TextBox ID="TextBoxZip" runat="server"  style="text-align:right"></asp:TextBox>
            <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" 
            BackColor="White" ControlToValidate="TextBoxZip" ErrorMessage="Required Field" 
            ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator></div>
    </td></tr></table>
                
        * indicates a required field.<br />
        
        <div>
        </div>
        
            <div align="center">
                <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" CssClass="button" />
            </div>
        
</form>
</div>
        <div id="footer">
        </div>
    </div>
 </body>
</html>

Open in new window

0
 
ddayx10Commented:
Anyway I want to show you how with just a few minutes of changes I can remove all the tables and give you the exact same layout.

It could certainly use refinement but its much better than tables.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title>My Ochsner - Online Registration </title>
	<link href="ochsner_reg.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wrap">
		<div id="banner">
		</div>
		<div id="main">
			<h2>
				Online Registration</h2>
			<h3>
				All fields with an asterisk are required.</h3>
			<form id="form1" runat="server">
			<div id="DivLeft" runat="server" style="float:left;">
			<div class="item">
				<asp:Label ID="LabelFirstName" runat="server" Text="* First Name"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxFirstName" runat="server"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" BackColor="White"
					ControlToValidate="TextBoxFirstName" ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
			<div class="item">
				<asp:Label ID="LabelLastName" runat="server" Text="* Last Name"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxLastName" runat="server"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" BackColor="White"
					ControlToValidate="TextBoxLastName" ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator>
			</div>
			<div class="item">
				<asp:Label ID="LabelSSN" runat="server" Text="* SSN"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxSSN" runat="server" ToolTip="Format: XXX-XX-XXXX"></asp:TextBox>
				<div class="hint">
					XXX-XX-XXXX
				</div>
				<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="TextBoxSSN"
					ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\d{3}-\d{2}-\d{4}">Please format: XXX-XX-XXXX</asp:RegularExpressionValidator>
				<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" BackColor="White"
					ControlToValidate="TextBoxSSN" ErrorMessage="Required Field" ForeColor="Red"
					Display="Dynamic"></asp:RequiredFieldValidator>
			</div>
			<div class="item">
				<asp:Label ID="LabelDOB" runat="server" Text="* Date Of Birth"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxDOB" runat="server" ToolTip="Format: XX/XX/XXXX"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" BackColor="White"
					ControlToValidate="TextBoxDOB" ErrorMessage="Required Field" ForeColor="Red"
					Display="Dynamic"></asp:RequiredFieldValidator>
				<asp:CompareValidator ID="CompareValidator2" runat="server" ControlToValidate="TextBoxDOB"
					Display="Dynamic" ErrorMessage="CompareValidator" ForeColor="Red" Operator="DataTypeCheck"
					Type="Date">Not a valid date</asp:CompareValidator></div>
					
			</div>
			<div id="DivMiddle" runat="server" style="float:left;">
			<div class="item">
				<label>
					Gender</label><br />
				<asp:RadioButtonList ID="RadioButtonGender" runat="server" RepeatLayout="Flow" Width="150px"
					AutoPostBack="True" Height="40px" RepeatDirection="Horizontal">
					<asp:ListItem Value="M">Male</asp:ListItem>
					<asp:ListItem Value="F">Female</asp:ListItem>
				</asp:RadioButtonList>
				&nbsp;
				<asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="RadioButtonGender"
					ErrorMessage="Required Field" ForeColor="Red">
				</asp:RequiredFieldValidator>
				<br />
			</div>
			<div class="item">
				<asp:Label ID="Label2" runat="server" Text="Clinic Number:"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxClinicNo" runat="server"></asp:TextBox>
				<br />
				<div class="hint">
					(if known)
				</div>
			</div>
			<div class="item">
				<asp:Label ID="LabelPhoneNo" runat="server" Text="* Phone Number"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxPhoneNo" runat="server" ToolTip="Format: (XXX) XXX-XXXX"></asp:TextBox><div
					class="hint">
					(XXX) XXX-XXXX
				</div>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" ControlToValidate="TextBoxPhoneNo"
					ErrorMessage="Required Field" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
				<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBoxPhoneNo"
					Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}">Please format: (XXX) XXX-XXXX</asp:RegularExpressionValidator></div>
			<div class="item">
				<asp:Label ID="LabelEmail" runat="server" Text="* Email"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxEmail" runat="server"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" BackColor="White"
					ControlToValidate="TextBoxEmail" ErrorMessage="Required Field" ForeColor="Red"
					Display="Dynamic"></asp:RequiredFieldValidator>
				<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBoxEmail"
					Display="Dynamic" ErrorMessage="RegularExpressionValidator" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Not a valid email address.</asp:RegularExpressionValidator></div>
			</div>
			<div id="DivRight" runat="server" style="float:left;">
			<div class="item">
				<asp:Label ID="LabelAddress1" runat="server" Text="* Address1"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxAddress1" runat="server" MaxLength="50"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" BackColor="White"
					ControlToValidate="TextBoxAddress1" ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
			<br />
			<div class="item">
				<asp:Label ID="LabelAddress2" runat="server" Text="Address2"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxAddress2" runat="server"></asp:TextBox></div>
			<br />
			<div class="item">
				<asp:Label ID="LabelCity" runat="server" Text="* City"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxCity" runat="server"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" BackColor="White"
					ControlToValidate="TextBoxCity" ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator></div>
			<div class="item">
				<asp:Label ID="LabelState" runat="server" Text="* State"></asp:Label>
				&nbsp;<br />
				<asp:DropDownList ID="DropDownListState" runat="server" CausesValidation="True">
					<asp:ListItem Value="AL">Alabama</asp:ListItem>
					<asp:ListItem Value="AK">Alaska</asp:ListItem>
					<asp:ListItem Value="AZ">Arizona</asp:ListItem>
					<asp:ListItem Value="AR">Arkansas</asp:ListItem>
					<asp:ListItem Value="CA">California</asp:ListItem>
					<asp:ListItem Value="CO">Colorado</asp:ListItem>
					<asp:ListItem Value="CT">Connecticut</asp:ListItem>
					<asp:ListItem Value="DC">District of Columbia</asp:ListItem>
					<asp:ListItem Value="DE">Delaware</asp:ListItem>
					<asp:ListItem Value="FL">Florida</asp:ListItem>
					<asp:ListItem Value="GA">Georgia</asp:ListItem>
					<asp:ListItem Value="HI">Hawaii</asp:ListItem>
					<asp:ListItem Value="ID">Idaho</asp:ListItem>
					<asp:ListItem Value="IL">Illinois</asp:ListItem>
					<asp:ListItem Value="IN">Indiana</asp:ListItem>
					<asp:ListItem Value="IA">Iowa</asp:ListItem>
					<asp:ListItem Value="KS">Kansas</asp:ListItem>
					<asp:ListItem Value="KY">Kentucky</asp:ListItem>
					<asp:ListItem Value="LA">Louisiana</asp:ListItem>
					<asp:ListItem Value="ME">Maine</asp:ListItem>
					<asp:ListItem Value="MD">Maryland</asp:ListItem>
					<asp:ListItem Value="MA">Massachusetts</asp:ListItem>
					<asp:ListItem Value="MI">Michigan</asp:ListItem>
					<asp:ListItem Value="MN">Minnesota</asp:ListItem>
					<asp:ListItem Value="MS">Mississippi</asp:ListItem>
					<asp:ListItem Value="MO">Missouri</asp:ListItem>
					<asp:ListItem Value="MT">Montana</asp:ListItem>
					<asp:ListItem Value="NE">Nebraska</asp:ListItem>
					<asp:ListItem Value="NV">Nevada</asp:ListItem>
					<asp:ListItem Value="NH">New Hampshire</asp:ListItem>
					<asp:ListItem Value="NJ">New Jersey</asp:ListItem>
					<asp:ListItem Value="NM">New Mexico</asp:ListItem>
					<asp:ListItem Value="NY">New York</asp:ListItem>
					<asp:ListItem Value="NC">North Carolina</asp:ListItem>
					<asp:ListItem Value="ND">North Dakota</asp:ListItem>
					<asp:ListItem Value="OH">Ohio</asp:ListItem>
					<asp:ListItem Value="OK">Oklahoma</asp:ListItem>
					<asp:ListItem Value="OR">Oregon</asp:ListItem>
					<asp:ListItem Value="PA">Pennsylvania</asp:ListItem>
					<asp:ListItem Value="RI">Rhode Island</asp:ListItem>
					<asp:ListItem Value="SC">South Carolina</asp:ListItem>
					<asp:ListItem Value="SD">South Dakota</asp:ListItem>
					<asp:ListItem Value="TN">Tennessee</asp:ListItem>
					<asp:ListItem Value="TX">Texas</asp:ListItem>
					<asp:ListItem Value="UT">Utah</asp:ListItem>
					<asp:ListItem Value="VT">Vermont</asp:ListItem>
					<asp:ListItem Value="VA">Virginia</asp:ListItem>
					<asp:ListItem Value="WA">Washington</asp:ListItem>
					<asp:ListItem Value="WV">West Virginia</asp:ListItem>
					<asp:ListItem Value="WI">Wisconsin</asp:ListItem>
					<asp:ListItem Selected="True" Value="NONE">(Not Selected)</asp:ListItem>
				</asp:DropDownList>
				<br />
				<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="DropDownListState"
					ErrorMessage="Required Field" EnableClientScript="False" ForeColor="Red">Required Field</asp:CustomValidator>
			</div>
			<div class="item">
				<asp:Label ID="LabelZip" runat="server" Text="* Zip Code"></asp:Label>
				<br />
				<asp:TextBox ID="TextBoxZip" runat="server" Style="text-align: right"></asp:TextBox>
				<br />
				<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" BackColor="White"
					ControlToValidate="TextBoxZip" ErrorMessage="Required Field" ForeColor="Red"
					Display="Dynamic"></asp:RequiredFieldValidator></div>
			* indicates a required field.<br />
			</div>
			<%--Could quite easily set the below div to use text-align:center instead of margin-left
			If you set a width on your wrapper. Anyway this will do for now.--%>
			<div style="clear:both; margin-top:20px; margin-left:300px;">
				<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" CssClass="button" />
			</div>
			</form>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

Open in new window

0
 
codefingerAuthor Commented:
Most of this HTML is a copy/paste job based on some templates I received from our graphic designer...as you can tell, HTML is not a language I speak fluently...my task is mostly to write the code behind, but the bosses treat writing HTML like that part of the job is trivial....it is not, but I will never convince them of that.

That aside, I have not tried your second html suggestion yet.  The style alignment on the table columns worked beautifully. But the radio buttons, not so much.   See the attached screen shot...I tried changing the height of the radiobuttonlist to 125 but still not the effect I want:

What I want is
Gender
@Male  @Female

but what I see is
Gender
     @
Male
    @
Female

 screenshot.doc

Do you see the same?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ddayx10Commented:
Hi.

The html layout I gave you does put the radiobuttons next to one another.

There is something in your CSS which is causing them to be wider than the middle <td> they are in and this is causing them to flow downward, one on top of another.

<see screenshot>

If you attach your CSS I'll take a look at it, or take a look at your rendered HTML vs the CSS being used and you should be able to find the problem.
LayoutSample.jpg
0
 
codefingerAuthor Commented:
See attached CSS:

/* Kristin de Baroncelli */
/* Last Edit: 10/17/2011 */

/* --[ GLOBAL STYLES ]-------------------------------------------------- */
body {
	background-image: none;
	background-position: 0% 0%;
	background-color: #e6edfc;
	background-repeat: no-repeat;
	width: 970px !important;
	margin: 10px auto;
	color: #000000;
	font: normal normal 12px Arial, Tahoma, Sans-Serif; }

/* --[ LAYOUT STRUCTURE ]----------------------------------------------- */
#wrap {
	background: url("images/kdb-wrap_background.png") repeat-y;
	width: 970px !important;
	border: 0px;
	padding: 0px 0px; 
	text-align: left; }

#banner {
 	width: 970px;
 	height: 230px; /*170*/
  margin: 0; 
 	background: url("images/kdb-banner.png") no-repeat; }

#footer {
  border-width: 0px;
  text-align: left;
  width: 944px; /*970-padding*/
  height: 15px;
  padding-left: 26px;
  padding-top: 130px;
  margin: 0;
 	background: url("images/kdb-footer.png") no-repeat; }

#main {
	width: 920px;
	margin: 25px;
	background-color: #ffffff; }

/* --[ HEADINGS ]------------------------------------------------------- */
/* Page Title */
#main h2 {
	background: transparent url(images/kdb-h2.gif) no-repeat 0 0;
	margin: 20px 0;
	padding: 18px 0 7px 30px;
	width: 96%;
	border: 0px; 
	color: #072b61;
	text-transform: none;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
	font-family: Arial, Tahoma, Sans-Serif; }

#main h3 {
	margin: 5px 0 5px 32px;
	padding: 10px 0;
	text-align: left;
	font-size: 14px;
	font-weight: normal;
	font-family: Arial, Tahoma, Sans-Serif;
	color: #0096d6; }

/* --[ HYPERLINKS ]----------------------------------------------------- */
/* Generic Hyperlinks without a specific class */
a {
	color: #072B61; }

a:link {
	color: #072B61;	}

a:visited {
	color: #072B61; }	
	
a:active {
	color: #666666; }	

a:hover {
	color: #666666; }

/* --[ FORM ELEMENTS ]-------------------------------------------------- */
#main #tblContent {
/*	width: 920px; */ }

#main #tblContent td {
	vertical-align: top;
	width: 310px; }

#main form div.item {
	margin: 0 0 0 20px;
	padding: 10px;
	font-size: 12px;
	font-weight: normal;
	font-family: Arial, Tahoma, Sans-Serif; }

#main form label {
	width: 88%;
	margin: 0 0 4px 0;
	font-size: 12px;
	font-weight: normal;
	font-family: Arial, Tahoma, Sans-Serif;
	display: block;
	position: relative;
	left: 0;
	color: #072b61;
	top: 0px;
}

/* Hint Labels */
#main form div.item div.hint {
	margin: 0 0 10px 0;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	font-family: Arial, Tahoma, Sans-Serif;
	display: block;
	color: #666666; }

/* Input Fields */
#main form input {
	border-left: 1px solid #e2e3ea;
	border-top: 1px solid #abadb3;
	border-right: 1px solid #dbdfe6; 
	border-bottom: 1px solid #e3e9ef;
	padding: 3px;
	font-weight: normal; 
	font-family: Arial, Tahoma, Sans-Serif;
	font-size: 12px;
	width: 220px; }

#main form input.radio {
	width: 18px;
	border: 0px; }

/* Buttons */
#main form input.button {
	color: black;
	font-size: 12px;
	font-weight: normal;
	font-family: Arial, Tahoma, Sans-Serif;
	background: #f3f3f3 url(images/kdb-button.png) repeat-x;
	height: 24px;
	width: 70px;
	padding: 0px 10px;
	border: 1px solid #707070;
	cursor: pointer; }
	
.center {
	text-align: center; }
	
/* --[ TABLE/GRID ]----------------------------------------------------- */
#main #tblData {
	width: 100%; }

#main #tblData td {
	vertical-align: top; 
	padding: 5px;
	border: 1px solid #d1d7e2; }

#main #tblData td.edit {
	font-size: 10px;
	width: 20px;
	background-color: #d1d7e2; }

/* ALTERNATING ROW */
#main #tblData tr.altrow {
		background-color: #e6edfc; }

/* ROW HOVER COLOR */
#main #tblData tr.hover td {
	background-color: #d1d7e2;
	cursor: pointer; }
	
/* HEADER ROW */
#main #tblData thead tr td {
	border: 0px;
	font-weight: bold;
	color: #666666;
	background-color: #ffffff;
	}

Open in new window

0
 
ddayx10Commented:
A modification of these two pieces of CSS will fix your issue. It may have caused other subltle changes I am not aware of but in general I can identify where/how for resolution.

In short having a global width for inputs(all types) and labels is not working out for you in this instance.

Hope that helps :)

***Modified CSS***
#main form label {
      width: 88%;
      margin: 0 0 4px 0;
      font-size: 12px;
      font-weight: normal;
      font-family: Arial, Tahoma, Sans-Serif;
      display: inline;
      position: relative;
      left: 0;
      color: #072b61;
      top: 0px;
}


#main form input {
      border-left: 1px solid #e2e3ea;
      border-top: 1px solid #abadb3;
      border-right: 1px solid #dbdfe6;
      border-bottom: 1px solid #e3e9ef;
      padding: 3px;
      font-weight: normal;
      font-family: Arial, Tahoma, Sans-Serif;
      font-size: 12px;
      /*width: 220px;*/ }
LayoutSample2.jpg
0
 
codefingerAuthor Commented:
Excellent!

But I have another page, almost identical, trying the same suggestions, not quite getting there.

Please stay tuned for my next question.

Thanks!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now