sIFR 3.0 - Text wrap/wrapping inconsistent in Firefox 3 on PC only.

Question

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 an 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? I can't figure it out! Please help!

Answer 1

A possibility is that you might need to specify a height on the element. IE7 can have a similar problem.

Answer 2

sIFR may be initializing too early. Easiest fix is to set sIFR.useDomLoaded = false; before sIFR.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.

Answer 3

Is sIFR.activate() located in the sifr.js file or the sifr-addons.js file?

Answer 4

I'm pretty sure it's text-transform:uppercase enlarging the word width after the flash width has been set

I've been trying to figure a solution to this for some time

Answer 5

Per Mark's advice, uncommenting sIFR.useStyleCheck = true; just before sIFR.activate() worked for me.

Robert, sIFR.activate() is found in sifr.js.

Answer 6

2 thumbs up for sIFR.useStyleCheck = true; :)

Answer 7

For the common user... make sure that you set your width and height of the div container for your object or image. Firefox will wrap any text following if these values are not set.