[RESOLVED] Ekstra gap in IE with float left:

I have this markup:

Code:

---

<div class="vcard" id="hcard">
    <img class="photo" src="http://www.noteme.com/images/div/oyvind-ostlund.jpg" alt="photo" />
    <div class="org">CERN</div>
    <span class="title">Technical Student</span>
    <a class="url fn" href="http://www.noteme.com">
        <span class="given-name" lang="no">&Oslash;yvind</span>
        <span class="family-name" lang="no">&Oslash;stlund</span>
    </a>
    <b>E-mail:</b> <span class="email">oyvind(at)noteme(dot)com</span>
    <b>Address:</b>
    <div class="adr">
        <div class="street-address">Ch Francoiss Lehmann 14</div>
        <span class="region">Gd. Saconnex</span>
        <span class="postal-code">1218</span>
        <span class="country-name">Switzerland</span>
    </div>
    <b>Phone numbers:</b>
    <span class="tel">
        <span class="type">Cell</span>phone Switzerland:
        <span class="value">+41 79 44 86 418</span>
    </span>
    <span class="tel">
        <span class="type">Cell</span>phone Norway:
        <span class="value">+47 9969 1888</span>
    </span>
    <b>Birthday:</b> <abbr class="bday" title="1981-12-07">7th December 1981</abbr>
</div>

---

And I am trying to get those two marked lines just under each other to the left under the picture:http://www.noteme.com/contact.php But IE makes an extra gap. This is my CSS right now (hacked to pieces sorry):

Code:

---

div.vcard{
    width 480px;
    background: #ffffff url("../pic/vcard.gif") repeat-y;
    padding: 12px 0 10px 10px;
    border: 1px solid #000000;
}

img{
    border: 0;
    margin: 0;
}

img.photo{
    margin: 0 40px 10px 0;
    width: 147px;
    float: left;
}

div.org{
    display: inline;
    color: #ffffff;
    background: #00e63c;
    padding: 0 139px 0 15px;
    margin: 0;
    float: left;
    clear: left;
    font-weight:bold;
}

span.title{
    color: #ffffff;
    background: #e40010;
    padding: 0 0 0 15px;
    margin: 0;
    float: left;
    clear: left;
    font-weight:bold;
}

a.fn{
    position: relative;
    display: block;
    margin: 0 0 0 191px;
}

span.email{
    position: relative;
    display: block;
    margin: 0 0 0 191px;
    display: block;
}

b{
    position: relative;
    display: block;
    margin: 0 0 0 191px;
}

div.adr{
    position: relative;
    display: block;
    margin: 0 0 0 191px;
    display: block;
}

abbr.bday{
    margin: 0;
    padding: 0;
    border: 0;
}

span.tel{
    position: relative;
    display: block;
    margin: 0 0 0 191px;
}

---

ANy ideas for a some nice CSS to make the gap go away in IE?


- ØØ -

Worked sweet with a bit of extra markup. Which looks like is legal after all..:)


- ØØ -