Hi,

I'm trying to get rid of the vertical shift in my pages when the sIFR-replaced headings load.

I've tried working through various wiki pages and online tutorials but I haven't had any success yet.

Is there anyone here who can help out?

The test page is here:
http://sandbox.npugh.co.uk/sifr.php

extract from sIFR-screen.css:

Code:
/*---- Header styling ---*/
.sIFR-active .post h2 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  

font-size: 24px;
letter-spacing: -0.07em;
/*height: 24px; this really can't be a good way of doing it...*/
display: block;
margin-bottom: 0.2em;
  
}

.sIFR-active .post h3 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;

font-size: 21px;  
letter-spacing: -0.07em;
 /*height: 21px; this really can't be a good way of doing it...*/
display: block;
}

.sIFR-active h4 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  
  font-size: 18px;
  letter-spacing: -0.07em;
 /*height: 18px; this really can't be a good way of doing it...*/
display: block;
}

.sIFR-active h3.linda {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  
  font-size: 10.7px;
  letter-spacing: -0.07em;
/* height: 10.7px; this really can't be a good way of doing it...*/
display: block;
}
(Setting the height to the same as the font-size worked in terms of eliminating the vertical shift and getting the line-height how I wanted it, but caused problems when titles ran onto two lines.)