Question

I’m working on some cross-browser form styling and have hit upon a snag in ie7.

If you look at my linked fiddle here in ie7 you will see that the input on the first line is offset. The span styled similarly below it is not subject to the same problem.

The system I’m testing works on every other browser I’ve tried.

Does anyone have a fix to this or indeed a simpler way to style it?

Answer 1

The answer is to wrap a div around all field elements undoing the hasLayout bug.

More info can be found here: http://my.safaribooksonline.com/book/web-development/css/9780321703392/the-usual-suspects/ch04lev1sec3

<form action="#" class="form-horizon">
<fieldset>
    <legend>Test Form</legend>
    <!-- div fixes hasLayout inherited margin bug in ie7-->
    <div>
        <label for="input-focused">Focused</label>
        <input type="text" id="input-focused" class="focus" value="focused input" />
        <label for="input-no-edit">Non editable</label>
        <span id="input-no-edit" class="no-edit-input">none editable</span>
    </div>
</fieldset>
</form>