CSS line-height problem in Firefox 5

Question

I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.

The page in question is here: http://www.tyndale.ca/~missiodei/ Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.

• the large title link in the banner (#blogtitle a)

  position:relative;
  display:block;
  margin:0;
  padding:0;
  color:#fff;
  text-decoration:none;
  letter-spacing:.1em;
  font-family:"Palatino Linotype", Palatino, serif;
  font-weight:bold;
  opacity:0.6;
  height:120px;
  line-height:120px;
  

• any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)

  font-size:3em;
  font-weight:bold;
  position:relative;
  float:left;
  height:48px;
  color:#ccc;
  line-height:48px;
  margin-right:4px;
  

You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).

Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.

Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!

Answer 1

The vertical centering seems to work fine for me....

The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253

Answer 2

Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.