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:


ul.ib-fix
{
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.

Advertisements

3 thoughts on “Getting inline-block working across browsers

  1. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s