Line-height in IE

[Benek]

I know that Cufon does not support line-height in IE. Is this a
feature that might be added soon? Are there any workarounds to get IE
line-height support right now? It's something that I desperately need
in order to drop sIFR for Cufon. Other than this issue I absolutely
love it. So easy to implement!

Also, the lack of line-height support in IE should be added to the
known bugs page: http://wiki.github.com/sorccu/cufon/known-bugs-and-issues.
It only mentions line-height issues when using a non-strict doctype,
but does not mention the IE issue at all.

[Simo Kinnunen]

Hi Benek,

Sorry for the late response. Unfortunately the issue is complicated
and as such has not been addressed yet. There is one way to "simulate"
line-height, but it requires some additional CSS. Let's say you have
the following HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse tellus lorem, suscipit vitae, dignissim a, molestie eu,
velit. Proin at purus. Ut rutrum neque nec massa. Morbi vitae sem.
Aliquam ultricies, ligula sed aliquet eleifend, nisl lorem convallis
odio, eu egestas felis urna feugiat lectus. Ut sit amet lorem at diam
imperdiet blandit. Vestibulum luctus ante a nulla. Mauris blandit
erat. Curabitur tincidunt odio eget neque. Mauris vitae justo et
tortor tincidunt vehicula. Aliquam lacinia. Praesent sagittis, sem a
hendrerit placerat, eros elit imperdiet enim, eu gravida risus mauris
vel ligula. Nullam sed nibh. Pellentesque nulla nunc, viverra sed,
rutrum ut, pellentesque at, sem. Nunc ante augue, accumsan quis,
mattis pulvinar, volutpat non, libero.</p>

The following styles are set:

p {
font-size: 12px;
line-height: 30px;
}

Assuming you have a strict doctype, line-height will work in every
other browser except IE 6 and 7 (8 works). But adding the following
CSS (for IE6/7 only) makes it look just like it does in IE8 (which is
correct):

.cufon-vml {
margin: 8px 0 10px 0;
}

The size of the margins depends on both font-size and line-height.
You'll just have to experiment with it to come up with good values,
but generally the top margin should be about 80% of the bottom margin.

Not an optimal solution, I know, but if you really need line-height
_now_, this is pretty much the only way.

Simo

PS. The known bugs & issues wiki is slightly out of date, as we are
moving to GitHub's Issues now (http://github.com/sorccu/cufon/issues).
Some of the known issues in the wiki have not yet been transferred to
the Issue tracker.

[Benek]

Hey thanks for the response. I'm happy that there's at least some
workaround, even if not an ideal one. I only need to adjust the line-
height on one block of text so that extra bit of CSS will be no
problem. Thanks!

[karlnorling]

I'm having issues with line-height in Firefox 2 also. Is this a known
bug, and could be addressed in a similar fashion as the line-height
bug for IE6,7 ?

.karl

[karlnorling]

Solved it by doing this:

/* IE6 and IE7 Conditional inlclude
----------------------------------------------*/

.cufon-vml{
margin: 8px 0 10px 0;
}

/* Firefox 2 Specific rules
-------------------------------------*/
.cufon, x:-moz-any-link {
position: relative;
top: 5px;
}

/* Firefox 3 Specific rules
-------------------------------------*/
.cufon, x:-moz-any-link, x:default{
top: 0;