Click here to Skip to main content
15,889,462 members
Search within:


Css Style : Float Left
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
ASP.NET
CSS
HTML
Hi...im having an issue with my css style. I am trying to float:left my labels, they appear fine in the designer, but when i view it in IE, each labels left margin seems to increase. here is my code:


STYLESHEET:
CSS
#divMain
{
    padding:20px 15px 20px 15px;
    background-color:#000;
    width:825px;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#000;
}
label
{

    float:left;
    display:inline;
width: 10em;
margin-right: 1em;
}
em
{
    position: absolute;

}
img
{
    vertical-align:text-top;
    width:7px;
    height:7px;

}
table
{
    width:825px;
    border-collapse:collapse;
    border-width:0.25em;
    border-color:#666;
    border-style:solid;
}


table tr td ol
{
    list-style:none;
margin-top:10px;
}
table tr td li
{line-height:25px;

}
h3
{
    margin-left:15px;
margin-bottom:0px;
margin-top:0px;
color:#FFF;
}
h2
{
    margin-left:15px;
    margin-top:30px;
    margin-bottom:30px;
    color:#fff
    ;
}
#tdMain
{
    background-color:#666;
    color:#FFF
}
#trHeading
{
    background-color:#f58d41;

}

#trAlt
{
    background-color:#F8F8F8;
}
tr
{
    background-color:#F8F8F8;
}



HTML:
XML
<div id="divMain">
<table id="tblMain">
    <tr>
        <td id="tdMain" colspan="2"><h2>New Employee Form</h2></td>
    </tr>
        <tr id="trHeading">
        <td colspan="2">
        <h3>Basic Details</h3>
        </td>
    </tr>
    <tr>
        <td colspan="2">

            <ol id="olSingle">
                <li><label>Title:</label><asp:DropDownList ID="ddlTitle" runat="server"
                        Width="257px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Title]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            <li><label>First name:</label><asp:TextBox ID="txtFName" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                    <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Middle name:</label><asp:TextBox ID="txtMName" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox></li>
                <li><label>Last name:</label><asp:TextBox ID="txtLName" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Date of birth:</label><asp:TextBox ID="txtDOB" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Nationality:</label><asp:DropDownList ID="ddlNationality" runat="server"
                        Width="257px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Nationality]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Marital status:</label><asp:DropDownList ID="ddlMStatus" runat="server"
                        Width="257px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Marital Status]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            </ol>

        </td>
    </tr>
    <tr id="trHeading">
        <td colspan="2">
        <h3>Contact Details</h3>
        </td>
    </tr>
    <tr id="trAlt">
        <td>
            <ol>
                <li><label>Address:</label><asp:TextBox ID="txtAddress" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="210px"
                        Height="76px" TextMode="MultiLine"></asp:TextBox>
                         <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Postal code:</label><asp:TextBox ID="txtPostcode" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>City:</label><asp:TextBox ID="txtCity" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px">
                   </asp:TextBox>  <em><img src="../../images/required_star.gif" alt="required"/></em>
                </li>

            </ol>
        </td>
        <td>
            <ol>
             <li><Label>Country:</Label><asp:DropDownList ID="ddlCountry" runat="server"
                        Width="200px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Country]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Work Phone:</label><asp:TextBox ID="txtWorkPh" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                <li><label>Home Phone:</label><asp:TextBox ID="txtHomePh" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                <li><label>Mobile:</label><asp:TextBox ID="txtMobile" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><Label>E-mail:</Label><asp:TextBox ID="txtEmail" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            </ol>
        </td>
    </tr>
    <tr id="trHeading"><td colspan="2"><h3>Emergency Contact</h3></td></tr>
    <tr><td colspan="2">
            <ol>
                <li><label>Contact Name:</label><asp:TextBox ID="txtEmContact" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Relationship:</label><asp:TextBox ID="txtEmRelation" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Primary Phone:</label><asp:TextBox ID="txtEmPrimaryPh" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><Label>Alternate Phone:</Label><asp:TextBox ID="txtEmAlternatePh" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="255px"></asp:TextBox></li>
            </ol>
    </td>
   </tr>
    <tr id="trHeading"><td colspan="2"><h3>Job Details</h3></td></tr>
    <tr id="trAlt">
        <td>
                <ol>
                <li><label>Job Title:</label><asp:TextBox ID="txtJobTitle" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Job Location:</label><asp:DropDownList ID="ddlLocations" runat="server"
                        Width="200px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Location]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Role:</label><asp:DropDownList ID="ddlRole" runat="server"
                        Width="200px" AppendDataBoundItems="True">
                    <asp:ListItem Value="-1">[Select Role]</asp:ListItem>
                    </asp:DropDownList> <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            </ol>
        </td>
        <td>
            <ol>
                <li><label>Hiring Date:</label><asp:TextBox ID="txtHireDate" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Termination Date:</label><asp:TextBox ID="txtTerminateDate" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                 <li><label>Total Work Hours:</label><asp:TextBox ID="txtTotalWorkHrs" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            </ol>
        </td>
    </tr>
    <tr id="trHeading"><td colspan="2"><h3>Package Details</h3></td></tr>
    <tr>
        <td>
            <ol>
                <li><label>Payment Frequency:</label></li>
                <li><label>Wage Rate:</label><asp:TextBox ID="txtWageRate" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Overtime Rate/Hour:</label><asp:TextBox ID="txtOverTime" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                                <li><label>Housing Allowance:</label><asp:TextBox ID="txtHousing" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Transport Allowance:</label><asp:TextBox ID="txtTransport" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Air Ticket Allowance:</label><asp:TextBox ID="txtAirTicket" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
            </ol>
        </td>
        <td>
            <ol>
                <li><label>Commission:</label><asp:TextBox ID="txtCommission" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                                <li><label>Medical:</label><asp:TextBox ID="txtMedical" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                <li><label>Vehicle:</label><asp:TextBox ID="txtVehicle" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox></li>
                <li><label>Vacation Days:</label><asp:TextBox ID="txtVacationDays" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                <li><label>Paid Sick Leaves:</label><asp:TextBox ID="txtSickLeaves" runat="server"
                    BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" Width="200px"></asp:TextBox>
                     <em><img src="../../images/required_star.gif" alt="required"/></em></li>
                    <li><label>Employment Visa:</label></li>

            </ol>
        </td>
    </tr>
</table>
</div>
Posted
Updated 12-Dec-10 19:30pm
v2
Add a Solution

1 solution

I guess the reason is:
MIDL
margin-right: 1em;

You have defined a right margin. Thus it makes sure it is the defined value and rest all the available space is left on left margin.

Either remove the right margin and check or define the left margin as much you want.
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Div Alignment with float:left
Alignment of div cards using CSS
Apply css style for each div.
CSS styles in a JQUERY
Div style messed up when zooming in // HTML CSS
[CSS] Split Content (Float)
How to modify CSS class to work as left menu on sample website ?
CSS Help ????
How do I center a script in CSS?
css styling for drop down menu list...using css3333333

Advertise
Privacy
Cookies
Terms of Use
Last Updated 13 Dec 2010
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900