This is a recurring problem I have in Firefox 3.0. It seems when I keep refreshing sometimes it wraps, sometimes it doesn't. When it doesn't wrap, I can adjust the window size and the sIFR'd element will snap to its correct size. I need my elements to wrap on load, based on the width of it's container.
I have the most current 'nightly build' of sIFR 3.0.
I want to sIFR a h2 tag. The h2 tag is enclosed in a div, and both have set widths.
<div class="recipe-title">
<h2>This is a recipe title</h2>
</div>
In my sifr.js file, I have the following parameters set:
forceWidth = true;
fitExactly = true;
preventWrap = false;
My .sifr.CSS file looks like this:
@media screen {
.sIFR-active .recipe-title h2 { width:455px; font-size:16px; text-transform:uppercase; }
}
And my normal CSS file looks like this:
.recipe-title, .recipe-title h2 { width:400px; }
Everything else seems to work in all other browsers except for FF3 on PC only. Is this a known bug?
Best Answer
sIFR may be initializing too early. Easiest fix is to set
sIFR.useDomLoaded = false;
beforesIFR.activate()
, which will wait until page load before replacing the elements.You can also look into using
sIFR.useStyleCheck = true;
which needs a bit more CSS but will wait until the CSS has loaded.