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">Øyvind</span> <span class="family-name" lang="no">Ø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?
- ØØ -


Reply With Quote
