Inline-block workaround for IE7 list items

HTML & CSS
1

In the markup below, I’m applying a display:inline-block to the list items to create a nice column layout.

Since IE7 is does not obey inline-block, what’s the required CSS to make this work in IE7?

<ul class="column-grid" style="list-style-type:none;margin:0;padding:0">
	<li style="display:inline-block;padding:10px 10px 10px 0;text-align:center;">
		<a href="#" ><img src="" style="" class="ce4-cat-img" /></a>
		<a  style="display:block;margin-top:5px;" href="#">Chai Tea</a>
	</li>
	<li style="display:inline-block;padding:10px 10px 10px 0;text-align:center;">
		<a href="#" ><img src="" style="" class="ce4-cat-img" /></a>
		<a  style="display:block;margin-top:5px;" href="#">Chai Tea</a>
	</li>
</ul>
2

IE6/7 understand inline-blocks on inline elements but not on block elements. For block elements you just need to set the element to display:inline and then apply a haslayout trigger for inline elements (such as zoom or strangely enough display:inline-block).

However you can’t apply display:inline and display:inline-block in the same rule as they cancel each other out

You need first to declare display:inline-block and then subsequently declare display:inline.


.column-grid li{display:inline-block}
*+html .column-grid li{display:inline}/* ie7 inline block fix - keep separate from other rules and follow original - not before it*/
* html .column-grid li{display:inline}/* ie6 inline-block fix - keep separate from other rules/

You can’t do this in your inline styles so remove your inline styles to an external class.