Results 1 to 2 of 2

Thread: [RESOLVED] Ekstra gap in IE with float left:

  1. #1

    Thread Starter
    Retired G&G Mod NoteMe's Avatar
    Join Date
    Oct 2002
    Location
    @ Opera Software
    Posts
    10,190

    Resolved [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?


    - ØØ -

  2. #2

    Thread Starter
    Retired G&G Mod NoteMe's Avatar
    Join Date
    Oct 2002
    Location
    @ Opera Software
    Posts
    10,190

    Re: [RESOLVED] Ekstra gap in IE with float left:

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


    - ØØ -

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width