Monday, January 14, 2008

Getting inline-block working across browsers

In mobtropolis, there's a gallery of pictures that I have to show. While, normally, it's not too hard showing them as inline elements, if you just have pictures, it gets a bit tougher if you have a bunch of stuff that you have to inline correctly. Sites like facebook solve the problem by using a fixed layout, so you know the width of the area you can work in, and can thus use a table.

When you have a stretchable layout, however, that doesn't work. And what you need to do is use CSS, "display: inline-block" The problem is, it doesn't have consistent support across browsers. Only Opera and Safari use "display: inline-block" and "display: inline-table" correctly. IE6 and Firefox both use "display: inline" only and don't recognize inline-table and inline-block.

So thank goodness for design blogs out there: Align List Items Horizontally with CSS . His solution is a bit of a work around, but it prevents me from writing any javascript when I didn't need to.

.ib-fix li { display:-moz-inline-box; -moz-box-orient:vertical;
display:inline-block; vertical-align:top; word-wrap:break-word; }
* html .ib-fix li { display:inline; }
* + html .ib-fix li { display:inline; }
.ib-fix li > * { display:table; table-layout:fixed; overflow:hidden; }

I should add that you need to also add this to get it to work in IE6, and get rid of the weird padding on the left:

list-style: none inside none;
padding: 0px;

Yay. small tip! As a bonus, I also found out about ie7.js, a javascript library that fixes incompatibilities in ie7 and ie6.


  1. Anonymous1:05 PM

    You were mentioning IE7.js. Check out Mootools. It's a bit of a learning curve at first but it ends up making things a lot easier once you figure it out. I haven't had to think about browser compatibility at all since I got Mootools figured out.

    When IE7 came out I pretty much gave up on AJAX as it had slight incompatibilites with both IE6 and Firefox giving me 3 branches of code for a request. Now I use a single line.

  2. Anonymous9:12 AM

    Actually, Firefox does render inline-block perfectly, no need for any hack.

  3. This may have been for FF2, when i wrote it.