[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

Problems with HTML formatting

Having some problems with the attached html even after using the stylesheet as attached,

Trying to get radiobuttons and checkboxes to align across, and labels and fields to align to the left.

Please take a look at the screen shot attached and the attached HTML and see if you can determine what it is I am doing wrong.

Thanks!
<%@ Page Language="vb"   MaintainScrollPositionOnPostback="true" AutoEventWireup="false" CodeBehind="UserDetails.aspx.vb" Inherits="MyChartInternal.UserDetails" %>
<%--<%@ Register TagPrefix = "sstchur" Namespace = "sstchur.web.SmartNav" Assembly = "sstchur.web.SmartNav" %>--%>
<!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 id="Head1">
    <title>My Ochsner - HIM Access </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 - HIM Access</h2>
		<h3>All fields with an asterisk are required.</h3>

    <form id="form1" runat="server">
    <%--<sstchur:SmartScroller 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="RequiredFieldValidator6" runat="server" 
            BackColor="White" ControlToValidate="TextBoxFirstName" 
            ErrorMessage="Required Field" ForeColor="Red"></asp:RequiredFieldValidator>
        </div>
        <br />
        <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" RepeatDirection="Horizontal" TextAlign="Left">
            <asp:ListItem Value="M">Male</asp:ListItem>
            <asp:ListItem Value="F">Female</asp:ListItem>
        </asp:RadioButtonList>
        &nbsp;<br />
                        <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 />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" 
                ControlToValidate="TextBoxClinicNo" ErrorMessage="Required Field" 
                ForeColor="Red"></asp:RequiredFieldValidator>
        </div>
        <br />
        <br />
        <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>
        <br />
        <br />
        <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" ></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>

        <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="RequiredFieldValidator1" 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" 
            OnServerValidate="ValidateState" 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>
    </td></tr></table>
   <%-- </div>--%>
  <%-- <div>--%>
  <div>
          <div class="item">
        <asp:Label ID="Label5" runat="server" Text="Approve/Deny:"></asp:Label>
        <asp:DropDownList ID="DropDownListApprove" runat="server" 
            AutoPostBack="True">
            <asp:ListItem Selected="True">Not Decided</asp:ListItem>
            <asp:ListItem>Approved</asp:ListItem>
            <asp:ListItem>Denied</asp:ListItem>
            <asp:ListItem>Rejected</asp:ListItem>
        </asp:DropDownList>
        <asp:CheckBox ID="CheckBoxDenial" runat="server" Text="Denial Email Sent" 
                  Visible="False" />
        <asp:CheckBox ID="CheckBoxRejected" runat="server" 
            Text="Rejected Email Sent" Visible="False" Enabled="False" />
        <asp:CheckBox ID="CheckBoxApproval" runat="server" 
            Text="Approval Letter Mailed" Enabled="False" />
                <asp:Button ID="ButtonReSend" runat="server" Text="Re-send" 
            Visible="False" CssClass="button" />   </div></div>
       
          <br />
       
        <div class="item">
        <asp:Label ID="Label6" runat="server" Text="Notes (3000 characters):" 
            ></asp:Label>
        <asp:TextBox ID="TextBoxNotes" runat="server" Height="65px" MaxLength="3000" 
            Width="264px" AutoPostBack="True" TextMode="MultiLine"></asp:TextBox></div>
        <br /><br /><br />
            <div align="center">
                <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" CssClass="button" />
            </div>

    
    <%--</div>--%>
    <%--</div>--%>
    </form></div></div>
    <div id="footer">
        </div>
</body>
</html>

Open in new window

/* 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;
	width: 259px;
}

/* #main form label {
	width: 100%;
	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; } */
	
#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;
}	

/* 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 {
      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

screenshot-2.doc
0
codefinger
Asked:
codefinger
  • 5
  • 3
1 Solution
 
ddayx10Commented:
Your issue seems at this point to only be with the inputs aligning left to match the labels. Correct?

The issue displayed in your screen shot only exists in IE7. In 8 its fine. Not sure about 9.

Fixing the alignment issue is as simple as this:
#main form div.item {
      margin: 0 0 0 0px;
      padding: 10px;
      font-size: 12px;
      font-weight: normal;
      font-family: Arial, Tahoma, Sans-Serif;
      width: 259px;
}


LayoutSS3.jpg
0
 
codefingerAuthor Commented:
That took care of the alignment nicely...

My last  html issue is the way the check boxes text next to the bottom drop down list (approved, denied, etc) is all scrunched up and wraps back under the drop down list.  And ideally, the Notes text box should span the bottom of the page.  I tried not to include them in any of the table columns, but not sure I was successful.

0
 
codefingerAuthor Commented:
btw, only one of the check boxes will be visible at any given time.
0
Industry Leaders: 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:
That ddl and checkbox with labels at the bottom is squished because it is assigned the CSS class "item" and in the CSS div.item has a width set of 259px.

You can either remove the class from the div or if you need those styles then change the class on the div to something else, create a new class and remove the width:

EX.

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



<div class="item2">
  <asp:Label ID="Label5" runat="server" Text="Approve/Deny:"></asp:Label>
  <asp:DropDownList ID="DropDownListApprove" runat="server" AutoPostBack="True">
        <asp:ListItem Selected="True">Not Decided</asp:ListItem>
        <asp:ListItem>Approved</asp:ListItem>
        <asp:ListItem>Denied</asp:ListItem>
        <asp:ListItem>Rejected</asp:ListItem>
  </asp:DropDownList>
  <asp:CheckBox ID="CheckBoxDenial" runat="server" Text="Denial Email Sent" Visible="False" />
  <asp:CheckBox ID="CheckBoxRejected" runat="server" Text="Rejected Email Sent" Visible="False"
        Enabled="False" />
  <asp:CheckBox ID="CheckBoxApproval" runat="server" Text="Approval Letter Mailed"
        Enabled="False" />
  <asp:Button ID="ButtonReSend" runat="server" Text="Re-send" Visible="False" CssClass="button" />
</div>
0
 
ddayx10Commented:
If you wanted more spacing between the ddl and the checkbox you might add something like this:

#main form div.item2 select{ margin-right:5px; }
0
 
ddayx10Commented:
And finally...sorry I missed this earlier if you want the textbox wider either:

a) remove its width property and add some CSS:
#main form textarea{ width:800px; }

OR

b) Just increase its width until it looks right to you:

<asp:TextBox ID="TextBoxNotes" runat="server" Height="65px" MaxLength="3000"
            Width="800px" AutoPostBack="True" TextMode="MultiLine"></asp:TextBox>
0
 
ddayx10Commented:
<<<<Goin to bed you're on your own :)
0
 
codefingerAuthor Commented:
I really appreciate all the help and my app looks great.

THANK YOU!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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