Home/ Questions/Q 354825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T11:57:38+00:00

I’m trying to get this css layout to work with IE7 and I’m a

  • 0

I’m trying to get this css layout to work with IE7 and I’m a bit stuck. Any thoughts on how I can get the form to look like it does in FF and Chrome without changing the page structure? I know there are some IE specific CSS hacks out there, but I’m not totally sure how to apply them.

In FF and Chrome the form correctly displays the form as follows:

title
first last
street
city state zip
occupation bday

In IE the form is all jumbled:

title last state zip
street 
city

CSS

...
form label  { float: left; margin: 0px 10px 0px 0px; }
form input  { width:100%; }
form select { width:100%; }

form label.field-title        { width: 50px; clear: left; }
form label.field-title select { width: 50px; }

form label.field-first { width: 150px; clear: left; }
form label.field-last  { width: 150px; }

form label.field-street{ width: 310px; clear: left; }

form label.field-city  { width: 150px; clear: left; }
form label.field-state { width: 70px; }
form label.field-zip   { width: 70px; }

form label.field-occupation   { width:150px; clear:left; }
form label.field-bday   { width:150px; }
...

HTML

...
<form>
  <fieldset>
    <legend>Basic Information</legend>
    <label class="field-title">
        Title &#42;<select name="EmployeeName.Title">
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Ms.">Ms.</option>
        </select>
    </label>
    <label class="field-first">
        First Name &#42;<input name='first' /></label>
    <label class="field-last">
        Last Name &#42;<input name='last' /></label>
    <label class="field-street">
        Street &#42;<input name='street' /></label>
    <label class="field-city">
        City &#42;<input name='city' /></label>
    <label class="field-state">
        State &#42;<select name='state' >
        <option>test</option></select></label>
    <label class="field-zip">
    Zip &#42;<input name='zip' /></label>   
    <label class="field-occupation">
    Occupation &#42;<input name='occupation' /></label>
    <label class="field-bday">
        Birth Day &#42;<input name='bday' /></label>
  </fieldset>
</form>
...

Doctype

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t think you can without modifying the source. IE6/7 uses different float logic than the other browsers and there is not any way to tell them “don’t float this all the way to the top”.

    This is why most forms use some sort of wrapper to clear the rows. I use divs

    <div class="row">
    <label class="field-title">
        Title &#42;<select name="EmployeeName.Title">
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Ms.">Ms.</option>
        </select>
    </label>
</div>
<div class="row">
    <label class="field-first">
        First Name &#42;<input name='first' /></label>
    <label class="field-last">
        Last Name &#42;<input name='last' /></label>
</div>

.row {clear:both;}
    • 0