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

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; }
...

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>   
  </fieldset>
</form>
...
  • Sorry for the formatting. Still figuring this site out. Dane O'Connor over 7 years ago
  • Formatting fixed. Dane O'Connor over 7 years ago

4 answers

Emily G 620
3
points
This was chosen as the best answer

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;}
Answered over 7 years ago by Emily G
1
point

Try this. This should make it look the same in FF, Chrome and IE 7, but Emily is right best thing to do is to put a row wrapper around each row of content and clear that.

form label  { float: left; margin: 0px 10px 0px 0px; }
form input  { width:100%; display:block;}
form select { width:100%; }
form fieldset {float:left;width: 320px; }
form label.field-title        { width: 100%; clear: left; }
form label.field-title select { width: 50px; display:block;  }

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; }
Answered over 7 years ago by Matthew R
0
points

actually i misread the post. so therefore my answer was wrong. dang -2 points for that. i'm new here i guess i better watch what i post

Answered over 7 years ago by dougmays
  • Yes, you should watch what you post. You can always edit your answer to make it more useful and thus merit some (at least not negative) points. Dane O'Connor over 7 years ago
  • You should delete this answer too. As it also merits negative points. Dane O'Connor over 7 years ago
-2
points

change your css to this: form label { float: left; margin: 0px 10px 0px 0px; display:block}

this should fix it.

Answered over 7 years ago by dougmays
  • It doesn't. Have you tried it? Dane O'Connor over 7 years ago