Doctype issues possibly messing up line-height and line-breaks in IE
I seem to be having problems with declaring doctypes (possibly) in IE and FireFox.
This is the code that I'm having the issues seen in the screenshots with:
<div id="contact" style="position:absolute; left:81px; top:2440px; width:639px; ">
<span class="contact_header">Getting in touch is easy
</div>
<div style="position:absolute; left:80px; top:2500px; width:320px; ">
<br><span class="contact_title">email me:</span></br>
<br><span class="contact_links"><a class="white" href="mailto:hello@superallan.com?subject=Hello superallan!&body= "> hello@superallan.com</a></span></br>
<br><span class="contact_title">tweet me:</span></br>
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan"> &开发者_JS百科nbsp; @superallan</a></span></br>
<br><span class="contact_title">phone me:</span></br>
<br><span class="contact_links"> +44 (0) 7540 308 682</span></br>
</div>
<div style="position:absolute; left:400px; top:2500px; width:320px; ">
<br><span class="contact_title">write to me:</span></br>
<br><span class="contact_address"> 11 abbeyview</span></br>
<br><span class="contact_address"> crossford</span></br>
<br><span class="contact_address"> fife</span></br>
<br><span class="contact_address"> scotland</span></br>
<br><span class="contact_address"> united kingdom</span></br>
</div>
This is my current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>
This is the CSS for the section:
.contact_title {
font-family:"FairfieldLTStd55Medium", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_links {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_address {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
This is how it renders in Firefox and IE. http://i.stack.imgur.com/l8h4q.jpg
When I change the doctype to strict it still looks fine in FF but IE makes the line-heights even greater.
Any ideas? Or possibly - how to fix it just for IE as it works fine in eveything else...
I note that you're using pt measurements for your font-size and line-height styles.
Note that pt is intended for use with printed pages, and is not rendered accurately on the screen. If you want a pixel-perfect accurate font size on the screen, use px instead. (You can also use em or % for relative measurements, but it looks like you're intending to use a fixed size measurement, so px is the one).
For more info, see this page: http://css-tricks.com/css-font-size/
To quote from the relevant section of the linked page:
Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes.
For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different.
...which does sound like exactly the symptoms you're seeing.
Hope that helps.
加载中,请稍侯......
精彩评论