ie6 css fixer v0.8 / adding inline-block support

It's been a while since we released version 0.7 of the IE6 CSS Fixer, just know that we haven't abandoned further development of our tool. To prove our dedication to the mental health of all front-enders out there, we even updated the tool with a nifty new feature and some general improvements. Brace yourself for inline-block support!

inline-block

The following fix has been suggested by a couple of people before (thank you!), but somehow we always seemed to lack the time to really dig into it. It seems that for a while now there has been a pretty valid workaround for ie6 and ie7, enabling the inline-block behavior on elements. Some testing revealed that the fix isn't perfect (still some issues left with vertical alignment it seems), but in most cases it works just fine.

I won't be going into full detail about the specifics of the inline-block display value, you can read up on that in yesterday's article on floats vs inline-block, but it's an invaluable asset to solve certain longstanding design/css issues. The problem with inline-block is that is had poor support in older browser versions. Both ie6 and ie7 have partial support (it works on native inline element - meaning you can't use it on divs or lis, rendering it somewhat useless), FF2 had -moz specific support.

ul li {display:inline; zoom:1;}

That's all there is to it really. Use display:inline and add a zoom:1 for block properties support. A pretty logical fix if you think about it, but this gives us basic inline-block support in ie6 and ie7. An additional advantage is that you can now decrease the use of unnecessary floats, eliminating the need for fixing certain overflow:hidden declarations and floats in general. On top of that, the "add zoom to backgrounds" option becomes less harmful as it behaves flawlessly inside inline-block elements (while in floats it pushes the element to 100% width).

On top of that, version 0.8 has some additional performance fixes and better png detection. The 0.7 version was a little flawed when using different syntaxes for background image declarations. So that should make it easier to get all pngs fixed.

test it yourself

So that's all for the 0.8 release of the IE6 CSS Fixer. For thoughts, comments or suggestions you can always contact us. Let us know what you are still missing!

Check out v0.8 of the IE6 CSS Fixer.