Support for inline-block CSS display property

We are working on our new website and we stumbled upon yet another cross-browser inconsistency - the inline-block CSS display property. Firefox 3, Google Chrome, Opera and Safari displayed it just fine - but can you guess which browser made a mess of it?

That's right - Internet Explorer. It would seem that support for this property has been completely ignored in IE7 so we went on the hunt for a solution.

Our new website design (which will be launched very soon) uses stylish little sticky label strips for h2 tags for headings (which also use Cufon font replacement technology). They looked just as they should in most browsers - strips of background colour just long enough for the text. The problem was that in IE these background colour strips ran straight across the width of the containing div just as though they were still block level elements.

We found the solution on Aaron Russell's website [original article here - thanks for the good work, Aaron!] and here it is broken down into its bare essentials. If you're simply looking for a quick fix then just copy-and-paste away!

On our site we have been styling our h2 tags using this technique, but you can change the occurrences of "h2" for ".yourclass" or "#yourid" as you need.

h2 {
	/* other style declarations go here */
	display: -moz-inline-box; /* for Firefox 2 */
	display: inline-block; /* for all suppoprting browsers */
}
* html h2 { display:inline; }  /* for IE6 */
* + html h2 { display:inline; }  /* for IE7 */