Search code examples
internet-explorer-6internet-explorer-7sifr

Redundant I know, but sIFR in IE 6/7 issue

I promise, I've read through hundreds of Joyent posts and stackoverflow questions and I'll preface this by saying I'm certain I have no misplaced commas and have flash installed and have had others try the page in IE.

The issue is that nothing renders in IE 6/7, but IE8, FF, and Safari are all fine. Here's the code:

//sIFR-config.js

var zapfino = { src: '/fonts/zapfino.swf' };

sIFR.fitExactly = true;
sIFR.useStyleCheck = true;
sIFR.useDomLoaded = true;

sIFR.activate(zapfino);

sIFR.replace(zapfino, {
  selector: 'h1, h2, h3, h4'
  ,css: '.sIFR-root { color: #1A2F35; }'
  ,forceSingleLine: true
  ,tuneWidth: 5
  ,wmode: 'transparent'
  ,filters: {
      DropShadow: {
        knockout: false
        ,distance: 3
        ,color: '#330000'
        ,strength: 1
        ,alpha: .45
      }
    }
  ,ratios: [7, 3.59, 9, 3.56, 10, 3.49, 12, 3.5, 13, 3.46, 20, 3.47, 23, 3.43, 26, 3.44, 34, 3.42, 40, 3.41, 42, 3.4, 45, 3.41, 47, 3.4, 49, 3.41, 69, 3.4, 71, 3.39, 72, 3.4, 76, 3.39, 77, 3.4, 3.39]  
});

/* sIFR.css */
@media screen {
    .sIFR-active h1, .sIFR-active h2, .sIFR-active h3, .sIFR-active h4 {
        visibility: hidden;
        font-family: Verdana;
        line-height: 1em;
        color: #ff0000;
    }
    .sIFR-dummy { 
        width: 0px;
        height: 0px;
        margin-left: 42px !important;
        z-index: 0;
    }    
}

<!-- HTML Snippet -->
<div id="header">
    <H1>H1 Example</H1>
    <h3>H3 Example</h3>
    <h2>H2 Example</h2>
    <h4>H4 Example</h4>
</div>

Note that nearly every option you see I've tried with and without, cache clearing, etc. Also, the main css absolutely positions h1-4 within div#header, which I've also tried commenting out.

EDIT: Note that the .sIFR-active class is applied to <html>, so I know the script is firing, but other than that nothing on the page is altered.

I've also tried different fonts from different sources, still no luck in IE.

TIA,

Jay

Solution

  • Sometimes in IE6/7, when an absolute is positioned next to a float, the absolute will disappear.

    In your css you have .1header floated left and immediately following .header_text is positioned absolute.

    Try setting .header_text to position:relative. Or put an empty div between .1header and .header_text. Or wrap the div .header_text in another div.

    BTW - CSS class names must start with an underscore (_), a dash (-), or a letter(a-z). Starting a class name with a digit is invalid but I don't know if it makes a difference to IE in this case or not.

    Added after comments

    I am pretty sure that it is a css issue. Remove the <h1>...<h4> with the sifr in #header_text. Add <h1>test</h1>. In the CSS, add 'background-color:#00c;' on #header_text.

    Look at it in firefox. You should see a red test on a blue background. Look in IE, you won't.

    On #header_text change position:absolute to position:relative. Look in IE, the red test with blue background should show up (not where you want it but that's another issue).