For some reason, sIFR 3 is behaving oddly in Firefox.
In other browsers like IE, Chrome, and Safari, the Flash element within a 412px wide box remains consistent at that width. However, in Firefox, it initially stretches to the width of the Body element before adjusting itself. Sometimes, even after the page has fully loaded, the Flash element stays expanded, breaking the layout by causing text to flow beneath the sidebar.
When I set a specific width in the CSS for the .sIFR-flash element, it does remain the correct size of 412px, but the text doesn't wrap—it just gets cut off at the right edge, with the height remaining only one line high.
The HTML structure is simple; it's basically just an h2 inside a div.
This is 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',
});
Even setting forceWidth: 'true' results in the same issue as using a CSS width on the .sIFR-flash element.
So, how can I ensure that the sIFR text maintains the width of its container while allowing for line breaks in Firefox?
Any assistance would be greatly appreciated!