sIfr (3.436) and IE8 - My h1 and h2 are flickering
- by André
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;
}
