1

I can get this to work in all browsers but IE7.

HTML

<span class="verticalMiddle"></span>
                        
<span class="jArrow inlineWrapper"></span>
                        
<h2 class="inlineWrapper">What is depression?</h2>

CSS

.inlineWrapper {
    width: 606px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

.verticalMiddle {
    vertical-align: middle;
    height: 50px;
    width: 0;
    display: inline-block;
}

.jArrow {
    background: url(http://www.healthquestlongbeach.com/images/library/faq/arrow.png) no-repeat left top;
    height: 20px;
    width: 22px;
}

h2.inlineWrapper {
    width: 563px;
    margin-right: 13px;
}

Fiddle: http://jsfiddle.net/RfRrG/5/

The problem is that the h2 is being pushed down buy the .verticalMiddle {height: 50px;}, but for some reason only in IE7 (but not .jArrow for some odd reason).

I can fix this problem by adding

.inlineWrapper {display:inline;}

But then it breaks it in the other browsers. Why is the text getting pushed down and how can I align it correctly?

Community
  • 1
  • 1
Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
  • 1
    IE 7 does not support display: inline-block property, that's your issue most probably – mkk Aug 31 '11 at 23:10

1 Answers1

2

display: inline-block in IE7 only works on elements that are naturally inline.

Fortunately, there's an easy workaround. Replace this:

display: inline-block;

with this:

display: inline-block;
*display: inline;

In most instances you must also add zoom: 1, but it's not required in your case.

* is a "safe hack" that applies the property in only in IE7 and lower.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Works great. Out of curiosity in what situations is `zoom: 1` applicable? All I understand about it is that it sometimes fixes IE7 bugs. – Steve Robbins Sep 01 '11 at 00:08
  • No problem. In answer to your additional question, [read this](http://www.satzansatz.de/cssd/onhavinglayout.html#begin). It's applicable when it's applicable :) – thirtydot Sep 01 '11 at 00:14