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!
