inline block ie7 on h2

Question

I think im going to kill someone high up in microsoft very very soon:

Please can someone help me get my head around this bug: http://www.yellostudio.co.uk/tm/selection.html#

I'd like the top h2 to display inline block alongside the help icons on the right.

The issue only exists in ie7 and its doing my sweed in...

Any help would be very very much appreciated

Answer 1

I would do float: left on this H2 instead of display-inline and clear: both on form beneath it. Or if there can be different content after H2 then clear:both on everything that will be directly after your icons:

#help-icons + * {
  clear: both;
}

It works for IE7 also.

Answer 2

Probably not the best practiced way, but why not use a class instead of an h2?

.h2class 
{
    /*styles here*/
position:relative;
top:0px;
left:100px; /*use px value that lines it up where you want*/
display:inline-block;/* since IE7 only allows this for naturally inline elements*/
}

<span class="h2class">My Selections</span>

Might work...

Answer 3

try this

display: -moz-inline-stack; // for FF2
display: inline-block;
zoom: 1; // HASLAYOUT
*display: inline; // LTE IE7