line-height is messed up when using sIFR

Question

When using sIFR on the titles (.content h1.pagetitle) in my WP theme, it somehow messes up the spacing and pushes the title down. The actual flash video is the same size as the font, so I think it has something to do with CSS, though I've tried just about everything I could think of and can't get it lined up properly. Here's a link to the site:

http://seanandpeter.com/

Any help would be absolutely appreciated :)

Sean

Answer 1

The layout issue seems to be caused (and fixed) by playing with your bottom:

In sifr.css:

.sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
    height:31px;
    position:relative;
    bottom:31px;
}

(from http://seanandpeter.com/wp-content/plugins/wp-sifr/sifr/sifr.css)

Changing that to bottom: auto is a start, but it really looks like the CSS rules are quite poor - unable to cope with multi-line sifr and using a really confusing choice of position and offset properties... I'd question whether you're using the best sifr plugin available...