hasLayout.net

Bookmark and Share

Form Control Double Margin Bug

Table of Contents

Affected Versions

This bug affects: IE7, IE6

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

Description

Here's another bug I found on Gérard Talbot's IE7 Bug Collection Page. Double Margin bug takes on a new face and is present in IE7! Now it takes on its face on affecting <input> and <textarea> elements. Let's have a look:

Demo

The demo is available on a separate page

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 IE6 and IE7 the <input> element and <textarea> element seems to have "inherited" the margin from the ascendant <div> and their margin is doubled. Same happens with margin-right set on the ascendant. In sane browsers <input> and <textarea> will vertically align with the <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:

Fixed demo is available on a separate page

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 IE6 and 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 <input> and <textarea>. Now both of those elements align with <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.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: