How can I get sIFR to render the .sIFR-alternate correctly with FlashBlock enabled?

Posted by berkleebassist on Stack Overflow See other posts from Stack Overflow or by berkleebassist
Published on 2010-04-10T20:32:03Z Indexed on 2010/04/10 20:43 UTC
Read the original article Hit count: 199

Filed under:

sifr

|

sifr3

|

flash

So I've looked this up in a few different places, and the only answer I've seen is "style the span.sIFR-alternate element". Problem is, if I apply any styles to that element that will actually have it appear & be placed correctly, it shows up alongside the sIFR text when FlashBlock isn't present (e.g. in Safari/IE) or is disabled.

Here's the default styles for .sIFR-alternate:

.sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}

And I'm adding these:

span.sIFR-alternate {
    font-family: Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 14px;
    color: #000000;
    padding: 0;
    margin-top:12px;
    margin-bottom:7px;
}

What am I missing?

Otherwise though, sIFR is working well.

© Stack Overflow or respective owner

Related posts about sifr

problem with sIFR 3 not displaying in IE just getting XXX

as seen on Stack Overflow - Search for 'Stack Overflow'
I am having a problem with sIFR 3 not displaying in IE. I get 3 larges black XXX in IE yet it displays fine in Firefox. I have checked i do have the most recent version of flash installed correctly. Here is the code on the page <div id="features"> <div id="mainmessage_advertisers"><h2>Advertisers</h2><br… >>> More
sIFR 3 HTML text does not display, .sIFR-alternate causing problem

as seen on Stack Overflow - Search for 'Stack Overflow'
It seems my sIFR 3 text does not show HTML text if the Flash text is not displayed. Here's one of the pages in question: http://www.jeremyschultz.com/client/orchardplace/website/beta/volunteer/ One person has reported not seeing anything when viewing this page, and I can recreate it by removing… >>> More
SIFR 3.0 - Font Size

as seen on Stack Overflow - Search for 'Stack Overflow'
I have been working with SIFR 3.0 for some time now and the font-size never seems to work correctly. I understand the most basic concepts behind SIFR. SIFR runs when you load the page. It does some calculations one the size of the HTML rendered font and then replaces it with a flash movie that is… >>> More
Problem Rendering SIFR with revision 436 on IE6 and IE7

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I seem to have a problem with SIFR3. I'm using version 436 and from all my testing it appears to be a problem associated with IE6 and IE7 as I cannot replicate the issue in Firefox, Chrome, Safari for Windows, or even IE8. The problem is occurring on my company's website and can be seen here:… >>> More
sIfr (3.436) and IE8 - My h1 and h2 are flickering

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using sIfr (3.436) for my H1 and H2 tags. In IE8 the text flickers and jumps around alot. See example: http://www.addenergy.no/drilling-production/category352.html I have tried various font-tuning as explained at Wiki.Novemberborn, but can't get a good result. Any help to lead in the right… >>> More

Related posts about sifr3

How to get soft drop shadow in sIFR3?

as seen on Stack Overflow - Search for 'Stack Overflow'
like this >>> More
sIFR3 - diagonal text?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I'm wondering if it's possible to create diagonal text with sIFR3 ? I searched the net, but haven't come up with any leads so far. Any nudge in the right direction would be much appreciated. Thanks >>> More
sIFR3: controlling a and a:hover styles inside replaced through CSS rather than JS

as seen on Stack Overflow - Search for 'Stack Overflow'
For graceful degrading and minimal coding for the sIFR feature on my websites I would want to define styles in CSS as much as possible. Here's what I do: Define a H3 tag to be replaced by sIFR3. H3 comes in varying colors by CSS depending on it's container, say body.blue-txt h3{ color: #009CDA;… >>> More
Is there any cons to use @font-face?

as seen on Stack Overflow - Search for 'Stack Overflow'
I found @font-face is good alternative of sIFR3 but every browser need different extension of font. If any font which is freely available as a download on net or if font is purchased by client of purchased by my company. in all condition can i use those fonts? Is there any cons to use @font-face… >>> More
sIFR3 and line-height/leading

as seen on Stack Overflow - Search for 'Stack Overflow'
I've successfully implemented sIFR3 using the nightlies from the end of Oct. All is well and much easier to work with than sIFR2 except where it comes to line-height. I was able to deal with my headings fine. But I have a pullquote that needs more line-height/leading and though I've read through… >>> More