Friday, 22 January 2010

Inline-block and Internet Explorer

I use to collaborate with the press office of the University. In particular, I was asked to develop a sort of enhanced, multidimensional, collaborative "address book" that they use as a database of journalists.

During the development process they often changed requirements, with the result that the project grown way too much. In order to keep the user experience pleasant I did my effort to allow high interactivity to the operators, giving them a very intuitive interface. I do think that one of the best interfaces for contacts collection and relationships definition remains the Facebook's one. In particular, I love the way it displays collection of items as set of icons, in a web 2.0 fashioned way.

To obtain this kind of representation, I used HTML lists and set items' display property as inline-block. Bad idea: Internet Explorer (even the 8!!) does not understand it. Well, the latest release (that is supposed to be CSS 2.1 compliant) actually understands it, but only if the object is natively an inline, which is weird.

So, here comes the workaround:

display: inline-block; 
zoom: 1;
*display: inline;   

This fixes everything.

No comments: