I have the following web page and I am trying to have the Field lables NOT
to wrap. It looks fine in a designer but when I run the program in a
browser the lables that have a space wrap. How do I prevent this? Also, is
there a better way to design an data entry web page without using tables,
(it's a realy paint in you know what to do that with tables), but I don't
know how to line up the fields any other way.
Thank You
Peter
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs"
Inherits="Default4" %>
<!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" runat="server">
<title>Test</title>
<style type="text/css">
..bodyTable {
padding: 14px;
border-style:solid;
border-width:thin;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}
..mainSelect
{
font-family: Courier New,Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
background-color:#C0FFFF;
border-style:solid;
border-width:thin;
border-color:Olive;
font-style:normal;
}
..bodyCell {
padding-top: 0px;
padding-left: 1px;
padding-right: 0px;
vertical-align:middle;
border-top: 0px;
border-left: 1px solid #D5D291;
border-right: 1px solid #D5D291;
border-bottom: 1px solid #D5D291;
border-style:none;
font-size:10pt;
}
.firstlabel
{
width: 212px;
display:block;
}
.style10
{
width: 192px;
}
..readonlyfield
{
background-color:InfoText;
margin-left: 0px;
}
.style11
{
width: 19px;
}
.style20
{
padding-top: 0px;
padding-left: 1px;
padding-right: 0px;
vertical-align: middle;
border-left: 1px none #D5D291;
border-right: 1px none #D5D291;
border-bottom: 1px none #D5D291;
font-size: 10pt;
width: 130px;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0px;
}
.field
{
background-color:White;
}
.style27
{
height: 26px;
}
.style29
{
width: 90px;
height: 26px;
}
.style30
{
height: 26px;
}
.style23
{
width: 90px;
}
.style25
{
}
.style24
{
width: 1px;
}
.style33
{
padding-top: 0px;
padding-left: 1px;
padding-right: 0px;
vertical-align: middle;
border-left: 1px none #D5D291;
border-right: 1px none #D5D291;
border-bottom: 1px none #D5D291;
font-size: 10pt;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0px;
}
.style34
{
width: 25px;
}
.style35
{
width: 59px;
height: 26px;
}
.style36
{
width: 59px;
}
.style37
{
width: 111px;
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table id="Id" class="bodyTable" style="width: 63%">
<tr>
<td class="style37">
Select Name
</td>
<td colspan="5">
<asp:DropDownList ID="ddSelect" runat="server"
AutoPostBack="True"
CssClass="mainSelect" Height="20px" Width="257px">
</asp:DropDownList>
</td>
<td align="right">
</td>
<td align="right" class="bodyCell" colspan="2">
Trans ID</td>
<td align="left" class="bodyCell" colspan="2">
<asp:TextBox ID="txtTransactinID" runat="server"
BackColor="WhiteSmoke"
ReadOnly="True" Width="44px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style37">
Last Name</td>
<td class="style10">
<asp:TextBox ID="txtLastName" runat="server"
BackColor="WhiteSmoke"
CssClass="readonlyfield" ReadOnly="True"
Width="192px"></asp:TextBox>
</td>
<td class="style11">
MI</td>
<td class="style34">
<asp:TextBox ID="txtMiddleInit" runat="server"
BackColor="WhiteSmoke"
CssClass="readonlyfield" ReadOnly="True"
Width="31px"></asp:TextBox>
</td>
<td class="style20" colspan="2">
First Name</td>
<td colspan="5">
<asp:TextBox ID="txtFirstName" runat="server"
BackColor="WhiteSmoke"
CssClass="readonlyfield" ReadOnly="True"
Width="120px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style37">
Address</td>
<td class="firstlabel" colspan="4">
<asp:TextBox ID="txtAddress1" runat="server"
CssClass="field" Width="252px"></asp:TextBox>
</td>
<td class="style35">
</td>
<td colspan="2" class="style27">
</td>
<td colspan="2" class="style29">
</td>
<td class="style30" style="width: 268435456px">
</td>
</tr>
<tr>
<td class="style37">
Address 2</td>
<td class="style14" colspan="4">
<asp:TextBox ID="txtAddress2" runat="server"
Width="255px"></asp:TextBox>
</td>
<td class="style36">
</td>
<td colspan="2" class="style14">
</td>
<td colspan="2" class="style23">
</td>
<td class="style25" style="width: 268435456px">
</td>
</tr>
<tr>
<td class="style37">
City</td>
<td class="style10">
<asp:TextBox ID="txtCity" runat="server"
Width="197px"></asp:TextBox>
</td>
<td class="style11">
St</td>
<td class="style24" colspan="2">
<asp:DropDownList ID="ddState" runat="server" Height="24px"
Width="56px">
<asp:ListItem Value="AL">AL</asp:ListItem>
<asp:ListItem Value="AR">AR</asp:ListItem>
<asp:ListItem Value="AZ">AZ</asp:ListItem>
<asp:ListItem Value="CA">CA</asp:ListItem>
<asp:ListItem Value="CO">CO</asp:ListItem>
<asp:ListItem Value="CT">CT</asp:ListItem>
<asp:ListItem Value="DC">DC</asp:ListItem>
<asp:ListItem Value="DE">DE</asp:ListItem>
<asp:ListItem Value="FL">FL</asp:ListItem>
<asp:ListItem Value="GA">GA</asp:ListItem>
<asp:ListItem Value="HI">HI</asp:ListItem>
<asp:ListItem Value="IA">IA</asp:ListItem>
<asp:ListItem Value="ID">ID</asp:ListItem>
<asp:ListItem Value="IL">IL</asp:ListItem>
<asp:ListItem Value="IN">IN</asp:ListItem>
<asp:ListItem Value="KS">KS</asp:ListItem>
<asp:ListItem Value="KY">KY</asp:ListItem>
<asp:ListItem Value="LA">LA</asp:ListItem>
<asp:ListItem Value="MA">MA</asp:ListItem>
<asp:ListItem Value="MD">MD</asp:ListItem>
<asp:ListItem Value="ME">ME</asp:ListItem>
<asp:ListItem Value="MI">MI</asp:ListItem>
<asp:ListItem Value="MN">MN</asp:ListItem>
<asp:ListItem Value="MO">MO</asp:ListItem>
<asp:ListItem Value="MS">MS</asp:ListItem>
<asp:ListItem Value="MT">MT</asp:ListItem>
<asp:ListItem Value="NC">NC</asp:ListItem>
<asp:ListItem Value="ND">ND</asp:ListItem>
<asp:ListItem Value="NE">NE</asp:ListItem>
<asp:ListItem Value="NH">NH</asp:ListItem>
<asp:ListItem Value="NJ">NJ</asp:ListItem>
<asp:ListItem Value="NM">NM</asp:ListItem>
<asp:ListItem Value="NV">NV</asp:ListItem>
<asp:ListItem Value="NY">NY</asp:ListItem>
<asp:ListItem Value="OH">OH</asp:ListItem>
<asp:ListItem Value="OK">OK</asp:ListItem>
<asp:ListItem Value="OR">OR</asp:ListItem>
<asp:ListItem Value="PA">PA</asp:ListItem>
<asp:ListItem Value="PR">PR</asp:ListItem>
<asp:ListItem Value="RI">RI</asp:ListItem>
<asp:ListItem Value="SC">SC</asp:ListItem>
<asp:ListItem Value="SD">SD</asp:ListItem>
<asp:ListItem Value="TN">TN</asp:ListItem>
<asp:ListItem Value="TX">TX</asp:ListItem>
<asp:ListItem Value="UT">UT</asp:ListItem>
<asp:ListItem Value="VA">VA</asp:ListItem>
<asp:ListItem Value="VT">VT</asp:ListItem>
<asp:ListItem Value="WA">WA</asp:ListItem>
<asp:ListItem Value="WI">WI</asp:ListItem>
<asp:ListItem Value="WV">WV</asp:ListItem>
<asp:ListItem Value="WY">WY</asp:ListItem>
</asp:DropDownList>
</td>
<td class="style36">
Zip Code</td>
<td class="style14" colspan="5">
<asp:TextBox ID="txtZip" runat="server"
Width="73px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style37">
Phone</td>
<td class="style10">
<asp:TextBox ID="txtPhone" runat="server"
Width="197px"></asp:TextBox>
</td>
<td class="style11">
Email</td>
<td class="style12" colspan="8">
<asp:textbox id="txtEmail" runat="server"
Width="205px"></asp:textbox></td>
</tr>
<tr>
<td class="style37">
Graduation Date</td>
<td class="style10">
<asp:textbox id="txtGradDate" runat="server"
Width="73px"></asp:textbox><asp:imagebutton id="imgGradDate" runat="server"
ImageUrl="images/ShowCalendar.gif"
CausesValidation="False"></asp:imagebutton></td>
<td class="style11">
</td>
<td class="style34">
</td>
<td class="style33">
</td>
<td class="style36">
</td>
<td colspan="2" class="style14">
</td>
<td colspan="2" class="style23">
</td>
<td class="style25" style="width: 268435456px">
</td>
</tr>
<tr>
<td class="style37">
Discipline</td>
<td class="style14" colspan="4">
<asp:TextBox ID="txtDiscipline" runat="server"
BackColor="WhiteSmoke"
CssClass="readonlyfield" ReadOnly="True"
Width="256px"></asp:TextBox>
</td>
<td class="style36">
User ID</td>
<td colspan="2" class="style14">
</td>
<td colspan="2" class="style23">
<asp:textbox id="txtUserID" runat="server" Width="56px"
ReadOnly="True" BackColor="WhiteSmoke"></asp:textbox></td>
<td class="style25" style="width: 268435456px">
</td>
</tr>
<tr>
<td class="style37">
School</td>
<td class="style14" colspan="4">
<asp:TextBox ID="txtSchool" runat="server"
BackColor="WhiteSmoke"
CssClass="readonlyfield" ReadOnly="True"
Width="256px"></asp:TextBox>
</td>
<td colspan="3">
Last Update</td>
<td colspan="2" class="style23">
<asp:textbox id="txtLastUpdate" runat="server" Width="128px"
Font-Size="8pt" ReadOnly="True"
BackColor="WhiteSmoke"></asp:textbox></td>
<td class="style25" style="width: 268435456px">
</td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
