Search code examples
sifr

Sifr3 extra padding around replaced element

I am using sifr3 to replace a few headings. One of them has a background color. The normal page css has h2 padding set to 0, the sifr css has the same for the replaced h2, anf the sifrconfig.js has the same, yet there still appears to be padding, slighly more on the bottom.

main css:

h2 {
    font-size: 22px;
    margin-bottom: 30px;
    padding:0;
    background-color: #339999;
    width: 280px;
}

sifr css:

.sIFR-active h2 {
    visibility: hidden;
    font-family: Verdana;
    line-height: 1em;
    font-size: 22px;
}

sifrconfig.js:

sIFR.replace(rockwell, {
  selector: 'h2',
   forceSingleLine: true,
  css: [
        '.sIFR-root { color:#FFFFFF; font-size: 22px; letter-spacing:-0.87; background-color: #339999; text-align: left; margin:0; padding:0;}',
        ]

});

Any ideas? This is driving me mad!

EDIT just worth mentioning, there is no inline styles or any other css that would override anything, and using web developer toolbar, it shows the flash movie has the extra height, not the containing h2.

Solution

  • Yea, Flash does that at times. You can use the tuneHeight parameter to make the movie less high. There's also tuneWidth, offsetTop and offsetLeft.