CSS: inline-block

So much time spent on one CSS statement - "display: inline-block;"

This statement is perfect for a new site I am working on. I want three columns of data to display side-by-side. But, I had many frustrations trying to get it to work cross-browser. This is what I found...

Inline-block works great on IE 8, Chrome and recent versions of Safari.

I had issues when it came to IE6 and IE7, no big surprise there. I fixed this with some conditional comments and the CSS property "display: inline" which acts the same as inline-block in IE.

I also had problems with Firefox 3! My old love of a browser takes issue with this statement (when used with other specific statements). Apparently "display: inline-block" does not play nice with "overflow: hidden" and "text-align: center". This strange alignment of the planets causes my text to align left, instead. Quirky. I ended up commenting out the overflow property, and everything worked for Firefox 3. (I also added a strange Firefox style statement to make sure it worked on FF 2: "display: -moz-inline-stack;".)