I was looking at the CSS 2.1 Candidate Recommendation today and notices that there’s a New ‘display’ value- ‘inline-block’. That caught my eye as I’m long actually familiar with the inline-block display value. I’ve used it a couple of times for IE-specific browser hacks and I’ve always thought it would be cool if it were picked up by Firefox. Hopefully now that it’s made its way into a candidate recommendation and, presumably a real specification, they’ll add support and then I’ll be happy- in a really nerdy way.

Oh… you want to know why?

Basically inline-block does what it sounds like it does. It’s an inline element (it’s displayed within a containing block and flows in the same line) that behaves like a block (which in practical terms means it can have explicit height, width, padding and margins, etc.) The one place I would use it all the time is in the all-too common “logo inline in a corporate footer” situation. Here are a couple of examples of ones I’ve implemented recently, so you know of what I speak.

From MSLifeLines – Offering multiple sclerosis (MS) education & support:

From EForAllExpo.com:

As you can imagine they’re both implemented with an image and a link. In the case of the EForAll site, something like this:

An <a href="http://www.idgworldexpo.com/"><img src="/themes/idg_assets/images/idg_world_expo.gif" alt="IDG World Expo"></a> Event

With inline-block, I could instead do something like this and I would have a nice computer (or human with a screen reader) sentence instead of some text with an image rammed in the middle obscuring the actual meaning:

An <a href="http://www.idgworldexpo.com/" id="idg-link" >IDG World Expo</a> Event

Here’s the CSS:


#idg-link {
background:url(idg_world_expo.gif) no-repeat;
display:inline-block;
width:150px;
height:60px;
text-indent:-9999px;
}

It’s a very typical image replacement, but with inline-block you can have an image replaced anchor behave just like an image. That’s useful to me. I approve.

Here’s a sample. IE6/7, Safari 1.2+ and Opera 9.+ should see this work (with some variation in Opera.) Firefox 2 and below? Not so much. As reported in the comments this now works in Firefox 3