monotasker
monotasker

Reputation: 2112

CSS line-height problem in Firefox 5

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.

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!

Upvotes: 0

Views: 1006

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

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

Upvotes: 1

Benny Tjia
Benny Tjia

Reputation: 4883

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.

Upvotes: 0

Related Questions