sIFR 3 randomly placing text on a single line in FF3.6

Question

Hello,

sIFR 3 is behaving strangely in Firefox.

The actual sIFR flash element is set within a box that is 412px wide. In IE, Chrome, Safari, etc., the with of the Flash element is a consistent 412px; however, in Firefox, the Flash element is briefly as wide as the Body element, before correcting itself. When the page finishes loading, sometimes the Flash element remains that wide, breaking the layout (the Flash text flows underneath the sidebar to the right).

Setting a width in the CSS for the .sIFR-flash element causes it to remain the proper 412px wide, but the text doesn't wrap at all--it just cuts off at the right edge, and the height of the flash element remains one line high.

The markup is simple; it's just an h2 within a div.

My sIFR code:

var clerkenwell = { src: '/flash/sifr.swf' };

sIFR.activate(clerkenwell);

sIFR.replace(clerkenwell, {  
    selector: '.post h2',  
    css: '.sIFR-root { color: #1899c4; text-transform:uppercase; font-size:30px; }',  
    transparent: 'true',  
});

Setting forceWidth: 'true', just causes the same problem as using a CSS width on the .sIFR-flash element.

So: how can I get the sIFR text to remain as wide as its containing element while allowing for line breaks in Firefox?

Thanks for any and all help!

Answer 1

This isn't really an answer to your question; but I recently converted a large website from sIfr to Cufon and it was a breeze! It was way simpler than sIfr, easy to setup, and much faster as well. The poor performance and misc headaches (like yours) drove me to switch and I'm happy with it.

Answer 2

FINALLY found the fix, from another StackOverflow post.

The problem was solved by uncommenting sIFR.useStyleCheck = true; in sifr-config.js. I'd love to know why that worked, but the answer to that is probably over my head. :)