Down with extra margin in IE!

HTML and CSS XSLT JavaScript Images Soft Etc

Internet Explorer is required to view this example.

	Task:	Get rid of 3 px margin that IE adds before elements with `float: left`.

This can be fixed by setting margin to a negative value. And the parent object should have the least possible height.

How it looks in the browser

<style type="text/css">
    #example { width:  15em; }
    #example input { float: left; }
    #example label { margin-left: 20px; display: block; }
    /* sufficient rules */
    .selector { clear: left; //height: 1px; }
    .selector input { float: left; margin-right: -20px }
    .selector label { margin-left: 20px; display: block; }
</style>
<form id="example">
    <div>
        <input type="checkbox" name="some" value="0" id="some_0" />
        <label for="some_0">there is a&nbsp;margin before the&nbsp;second line
            that violates the&nbsp;flush left alignment</label>
    </div>
    <div class="selector">
        <input type="checkbox" name="some" value="1" id="some_1" />
        <label for="some_1">and here there is no such margin,
            the&nbsp;alignment is strong</label>
    </div>
</form>

Order a design...

Down with extra margin in IE! 18 September 2005

How it looks in the browser