Where to specify line height for sIFR

Question

I have not had any luck changing the line height for sIFR. I have tried changing the sIFR css and config file as well as my general style sheet. Is there a special trick?

GENERAL CSS

h1 {
    font-family: Georgia, Times, serif;
    font-size: 24px;
    font-style: normal;
    line-height: 16px; (has had zero impact, even when I go negative)
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    outline: none;
}

CONFIG FILE

sIFR.replace(minionpro, {
  selector: 'h1', wmode: 'transparent',
  css: '.sIFR-root { color:#000000; text-transform: uppercase; }'
});

Answer 1

I'm going to take a wild guess and say that because your font-size > line-height (24px > 16px) sIFR is going to ignore the line-height property and use the font-size to create your flash.

If you're trying to get two lines of overlapping text (24px text on a 16px line will result in 8px of overlap), you're probably stretching the capabilities of sIFR.

EDIT

It looks like sIFR has some strange methods for calculating font size based on different factors...check out the link for the details (without knowing your version of sIFR, I can't comment on your situation).

Novemberborn: Font Sizing with sIFR

Answer 2

Line height inside the Flash movie is controlled using the (custom) leading CSS property for the .sIFR-root class. Flash doesn't have the concept of line-height as you might be familiar with from CSS.

Answer 3

Flash uses leading instead of line-height, so simply just use:

sIFR.replace(minionpro, {
  selector: 'h1', wmode: 'transparent',
  css: '.sIFR-root { color:#000000; text-transform: uppercase; leading: 1.5; }'
});

The leading value must just be a number on its own with no measurement value such as px, em, %, etc.

Answer 4

At first I thought it wasn't working, but I realized that the units for leading are totally different from em. I tried a larger value "leading: -10;" and it worked fine. I'm using sIFR 3 r436.