sIFR : Doesn't seem to work with nested HTML (e.g., <b> tag within an <h1> tag)

Question

I have an H1 selector that I'm replacing with sIFR. Within some of the H1 selectors are < strong>< /strong> selectors; e.g.:

<h1>Hello world, <strong>this is some bold text</strong> and this is normal text</h1>

Everything outside of the < strong>< /strong> tags is replaced fine -- and the text within the tags does not display. I'd like to apply different styling to the < strong> text. Is this possible?

Here is my relevant sIFR code from sifr-config.js:

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

I tried adding this, but no luck:

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

Answer 1

sIFR makes text inside <strong> tags bold. For the text to show up, the bold glyphs of the font need to have been exported. When creating the sIFR Flash movie, make sure to select a character and make it bold.