hasLayout.net

Affected Versions

This bug affects: IE7

Symptoms

horizontal margins on <input> and <textarea> elements are "inherited" from the ascendant with a margin and "layout"

Date of the Tutorial

Mon Aug 17 22:37:49 2009

Demo

Note: even though, the demo shows valid HTML markup, this is not a proper way to create HTML forms; the demo is a simplified version.

HTML Code:

<form action="">
<div>
    <input type="text" name="ber"><br>
    <textarea cols="10" rows="5" name="baz"></textarea><br>
    <select name="ber"><option>foo</option></select><br>
</div>
</form>

CSS Code:

div {
    margin-left: 100px;
    width: 100%; /* gives "layout" */
}

What we have here is an ascendant that has "layout" and margin-left set on it. In IE7 the ' element"><input> element and ' element"><textarea> element seems to have "inherited" the margin from the ascendant ' element"><div> and their margin is doubled. Same happens with margin-right set on the ascendant. In sane browsers ' element"><input> and ' element"><textarea> will vertically align with the ' element"><select> element.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Conditional Comments Solutions)

Date of the Solution

Mon Aug 17 22:47:07 2009

Fixed Versions

All of the affected

Description

The fix for this bug is a rather brute-force hack. Let's take a look:

HTML Code:

<form action="">
<div>
    <input type="text" name="ber"><br>
    <textarea cols="10" rows="5" name="baz"></textarea><br>
    <select name="ber"><option>foo</option></select><br>
</div>
</form>

CSS Code:

div {
    margin-left: 100px;
    width: 100%; /* gives "layout" */
}

Conditional Comments Code:

<!--[if lte IE 7]>
    <style type="text/css">
        input,
        textarea {
            margin-left: -100px;
        }
    </style>
<![endif]-->

Let's break down what I did here. This is the only fix I have found so far. I have used conditonal comments to target IE7 - feel free to use whatever method you like to do that. For those specific IE versions I've set negative margin-left equal to the margin-left set on the ascendant (except negative, of course) on our ' element"><input> and ' element"><textarea>. Now both of those elements align with ' element"><select> in affected browsers just as they supposed to. The same principle would apply for margin-right. Just a note: you're not mean to use the same selector I've used, make sure to localize the negative margin for it to be applied only on form elements that manifest this bug.