CODEWITHSUNDEEP
htmlinternet-explorer-7inlinecss
Joshua Bambrick
Joshua Bambrick

Reputation: 2699

Different line heights using inline-block on IE7

I am creating a webpage to work in IE7. I want to vertically center a span (which may be several lines long) in a speech bubble. I have achieved this in modern browsers by setting the line-height property of the span's parent to the height of the span's parent itself. The span is then given the display property inline-block, its line-height property is set to something which corresponds to its font size and its vertical-align property is set to middle. However, when I try to view it in IE7, the line height of the span's text seems not to be that of the span and instead is that of the span's parent. It is as if the span did not have the inline-block display property as this is what you would expect if it was inline. As the span element is inline by default, you would expect the inline-block property to work in IE7 but it does not. I have tried applying things like zoom: 1; and the 'cross-browser inline block' suggested by css-tricks but none of this works. I am seriously considering using a table but that is really not something I want to resort to.

You can take a look at the issue at http://jsfiddle.net/sAuhsoj/bWdwE/ (you may want to view the fullscreen version http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ using browserlab.adobe.com to see how it looks in IE7)

Upvotes: 0

Views: 521

Answers (2)

Axel
Axel

Reputation: 10772

The issue in this particular case is the use of the rem unit on the line-height attributes.

By simply changing rem to em, it solves the issue in IE.

http://jsfiddle.net/bWdwE/2/

Upvotes: 1

Giona
Giona

Reputation: 21114

To target IE7 with a CSS hack, you can add this display rule:

*display : block;

a so written *property is processed by IE7 and lower only.

May i suggest you to use conditional comments on <html> tag? Personally, i use:

<!--[if lt IE 8]>  <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]>  <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]>  <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->

Then i can target any IE browser this way:

.ielt8 .anyClass {
    /* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
    /* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
    /* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
    /* any rule here will effect ie9 only */
}
.ie10 .anyClass {
    /* ie10, for future reference */
}
.ie .anyClass {
    /* any ie but 10 */
}

That's really easier and you don't have to use hacks, which is better for validation and will exclude any future possible interference.

In your case, you could set up a completely new style for IE7, like

.userQuote .quoteText {
    display: block;
    line-height: a pixel value;
 }

Upvotes: 2

Related Questions