Sifr3 extra padding around replaced element

Question

Hello,

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.

Answer 1

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.

Answer 2

Hey, I had a similar problem where I had some extra padding at the bottom which was at the bottom of the H2 tag I was trying to convert SIFR.

I found my issues was related to the doc type I was using.

I was using an XHTML Strict and when I changed it to a transitional doc type the padding was removed.

I hope this helps people, I wasted a day and went completely f-ing mental trying to track it down and fix it.