sIfr (3.436) and IE8 - My h1 and h2 are flickering

Posted by André on Stack Overflow See other posts from Stack Overflow or by André
Published on 2010-03-23T08:15:02Z Indexed on 2010/03/23 8:23 UTC
Read the original article Hit count: 592

Filed under:
|

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 direction is appreciated!

The sifr-config.js looks like this (h1/h2 is basically the same):

sIFR.fitExactly = true;
sIFR.fixWrap = true;
sIFR.forceWidth  = true;

sIFR.replace(fedraSerif, {
  selector: '#placeholder-top h1',
  css: '.sIFR-root { background-color: #FFFFFF; color: #000000; }',
  ratios: [8, (...), 1.26]
});

And sifr.css (bottom):

@media screen {
   .sIFR-active #placeholder-top h1 {
    visibility: hidden;
    font-family: Verdana;
    font-size:2.5em;
    line-height:40px;
    }
   .sIFR-active #placeholder-top h2 {
    visibility: hidden;
    font-family: Verdana;
    font-size:2em;
    line-height:30px;
    } 
}

My style.css (general for the site has):

html, body {
    font-family: Verdana, Arial, Sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background: #cccccc url('images/background.gif') repeat-y top center;
}
h1 {
    font-size: 35px;
    line-height: 40px;
}
#placeholder-top h1 {
    margin: 20px 120px 10px 5px;
    font-size:2.5em;
    display:block;
    line-height: 40px;
}
h2 {
    line-height: 30px;
    color: #009bdb;
   }
#placeholder-top h2 {
    margin: 0px 120px 20px 5px;
    font-size:2em;
    display:block;
    line-height: 30px;
}

© Stack Overflow or respective owner

Related posts about sifr

Related posts about ie8