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.
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:
width
and height
on the image so the layout doesn't change when it loadsfitExactly
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 spacesIFR.useDomLoaded = false;
before sIFR.activate()
to make sIFR replace elements on page load — after the image has been loadedYou 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.