sIFR 3 r436 Opera + Firefox float issue

Question

I’m having an issue with sifr placed next to a floated img, Opera 9.6 is forcing the text to clear the image and display on one line. Firefox is also forcing the text to clear the first time the page is loaded, although a refresh fix’s this and the problem will never occur again, only to return if cache is cleared and the browser restarted.

Also strangley with firefox, if the bug occurs and then i load up firebug, this shoots the text up to the correct position inline with the image, very strange as i did not think firebug caused the dom to reload.

Answer 1

This is usually a timing issue. When sIFR replaces the elements, the image isn't yet loaded so the to-be-replaced element is the full width of the container. sIFR will insert a Flash movie of this width, which won't fit next to the image once everything is properly rendered. When you open Firebug, you resize the viewport of the web page. This triggers a resize in sIFR and causes sIFR to detect the proper width of the replaced element.

Solutions:

• Try setting a width and height on the image so the layout doesn't change when it loads
• Use fitExactly to make the Flash movie as wide as the text it contains. This will help prevent the clearing, unless of course the text is longer than the available space
• Set sIFR.useDomLoaded = false; before sIFR.activate() to make sIFR replace elements on page load — after the image has been loaded

You might also need to adjust letter spacing on the to-be-replaced elements such that the width of the HTML text properly reflects the width that will be taken up by the Flash text. And in case Flash is reporting incorrect values for the text width, use the tuneWidth and offsetLeft properties to adjust.