line-height vertical align font-face

Question

I have the following markup:

<div class="blockSection">
<h5>Title of the section</h5>
...
</div>

now, the h5 for the .blockSection has a fixed height and a background image, 40px. For aligning the text vertically i always set the line-height same as the height, since the text wont break in 2 or more lines. But the problem is i'm using a font with font-face and i doesnt want to aligning vertically in Firefox, Safari on Mac. In windows IE looks good.

Anybody know the trick to make it right, without applying different line-height for browsers ?

Answer 1

It sounds like conditional comments would do the trick. Create an IE only stylesheet within one line-height and a main stylesheet with the line-height for the other browsers.

I know you don't want to set different line-heights for different browsers, but if IE is doing what you want and other browsers aren't, this is the best solution.

Answer 2

One solution for vertical centering (in non IE browsers) is using display: table-cell and vertical-align: middle on your h5 .