CSS website layout problem

fusi.eon · Joined: 16 Jun 2008 Posts: 2

I have made a website using CSS. I got the controls aligned well, but there's one form whose textboxes display outside the line and are not aligned properly.

This is the image of the website:
http://img145.imageshack.us/img145/2069/codeci3.png

THe CSS of the ContentPlaceHolder (using MasterPages):

body

{
font-size: smaller;
}

#main
{
float: right;
width: 67%;
background: #fff;

margin-right: 40px;
padding-bottom: 10px;
padding-right: 10px;
margin-top:-38px;
}

#right
{
float: left;
width: 15%;
background: #fff;
border-right: 2px solid #000;
margin-left: 48px;
padding-bottom: 10px;
padding-right: 45px;
margin-top:-34px;
}

This is IE. In Firefox, everything is complete haywire. But we'll come to that later.

fusi.eon · Joined: 16 Jun 2008 Posts: 2

This is the source code of that form:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table border=0>
<tr>
<td>
<img src="images/proj_logo.jpg"/>
</td>
</tr>
</table>

<fieldset style="width:95%; text-align: center">
<legend class="legend">User Details</legend>
<table border="0" cellspacing="0" cellpadding="0" class="t1" frame="box">
<tr>
<td colspan="2" style="width: 170px">Custodian</td>
<td colspan="2" style="width: 200px" ><asp:TextBox ID="txt_custname" runat="server" Font-Names="Verdana" Font-Size="7.5pt" AutoPostBack="true" Width="150px" BorderStyle="Groove"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="width: 170px">Region</td>
<td colspan="2" style="width: 200px"><asp:DropDownList ID="ddl_region" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td>

<td colspan="2" style="width: 170px">Station</td>
<td colspan="2"><asp:DropDownList ID="ddl_station" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td>
</tr>
<tr>
<td colspan="2" style="width: 170px">Branch</td>
<td colspan="2" style="width: 200px"><asp:DropDownList ID="ddl_branch" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td>

<td colspan="2" style="width: 170px">Department</td>
<td colspan="2"><asp:DropDownList ID="ddl_depart" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td>
</tr>
</table>
</fieldset>

<fieldset style="width:95%; text-align: center;">
<legend class="legend">Asset Details</legend>
<table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1">
<tr>
<td style="width: 170px">Model</td>
<td style="width: 200px"><asp:TextBox ID="txt_model" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td>
<td style="width: 170px">Manufacturer</td>
<td><asp:TextBox ID="txt_manufacturer" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 170px">Lamp Capacity</td>
<td style="width: 200px"><asp:TextBox ID="txt_ast_lp_capacity" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="115px" BorderStyle="Groove"></asp:TextBox> Watt</td>
<td style="width: 170px">Resolution</td>
<td><asp:TextBox ID="txt_ast_resolution" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td>
</tr>
</table>
</fieldset>

<fieldset style="width:95%; text-align: center;">
<legend class="legend">Resource Info</legend>
<table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1">
<tr>
<td style="width: 170px">Vendor Name</td>
<td style="width: 200px">
<asp:DropDownList ID="ddl_ri_vname" runat="server" Width="154px" Font-Names="Verdana" Font-Size="7.5pt">
</asp:DropDownList>
<asp:ImageButton ID="addvend" runat="server" OnClientClick="ShowTxt('mydiv'); return false;" ImageUrl="~/edit_add1.png" style="left: 1px; position: relative; top: 4px" />
</td>
<td style="width: 170px">Procurement Date</td>
<td>
<asp:TextBox ID="txt_date" runat="server" Width="135px" Font-Names="Verdana" Font-Size="7.5pt" BorderStyle="Groove"></asp:TextBox>
<a href="Cal.aspx?src=ctl00_ContentPlaceHolder1_txt_date" target="cal" onclick="document.getElementById('cal').style.display=''"><img src="date.png" alt="Calendar" style="left: -3px; position: relative; top: 5px;border:white;" /></a>

</td>
</tr>
<tr>
<td style="width: 170px">
<asp:RadioButton ID="warranty" runat="server" Text="Warranty" GroupName="warrant" /></td>
<td style="width: 200px">
<asp:RadioButton ID="rd_amc" runat="server" Text="AMC" GroupName="warrant" />
</td>
<td style="width: 170px">Year(s) of Warranty</td>
<td><asp:DropDownList ID="ddl_year_warranty" runat="server" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td>
</tr>
<tr>
<td style="width: 170px">Expiry Date</td>
<td style="width: 200px"><asp:TextBox ID="txt_expdate" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td>
<td style="width: 170px">Allotment Date</td>
<td><asp:TextBox ID="txt_allot" runat="server" Width="135px" Font-Names="Verdana" Font-Size="7.5pt" BorderStyle="Groove"></asp:TextBox>
<a href="Cal.aspx?src=ctl00_ContentPlaceHolder1_txt_allot" target="cal" onclick="document.getElementById('cal').style.display=''"><img src="date.png" alt="Calendar" style="left: -3px; position: relative; top: 5px;border:white;" /></a>
</td>
</tr>
<tr onclick="return toggle();">
<td style="width: 170px">Condition</td>
<td style="width: 200px">
<asp:RadioButton id="rdb1" runat="server" Text="Active" GroupName="condition" Checked="true" />
<asp:RadioButton id="rdb2" runat="server" Text="Non-Active" GroupName="condition" />
</td>
<td style="width: 170px">
<asp:RadioButton id="rdb3" runat="server" Text="Others" GroupName="condition" />
</td>
<td id="txt" style="display:none">
<asp:TextBox ID="txt_others" runat="server" Font-Names="Verdana" Width="150px" Font-Size="7.5pt"></asp:TextBox>
</td>

</tr>
</table>
</fieldset>

<fieldset style="width:95%; text-align: center;">
<legend class="legend">Additional Details</legend>
<table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1">
<tr>
<td>Remarks</td>
<td><asp:TextBox ID="txt_remark" runat="server" Width="291px" Font-Names="Verdana" Font-Size="7.5pt"></asp:TextBox></td>
</tr>
</table>
</fieldset>

======================
CSS:

.legend
{
/*

color: buttontext;
*/
font-size: 7.5pt;
font-weight: bold;
font-family: Verdana;
/*background-color:#006697;*/
color:#000080;
/*border-color:#006697;*/

}

.t1
{
vertical-align: middle;
width: 677px;
font-family: Verdana;
font-size: 7.5pt;
text-align: left;
}

.t1 tr td
{
width:179px;
color:#000080;

}