Technogrette




Vladimir Tokmakov

Down with extra margin in IE! 18 September 2005


Viewing this example requires IE.

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 a browser

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
<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>



Share this page:


© 1995–2012 Art. Lebedev Studio