Tips to create Cross-Browser CSS Inline-Block

Ryan Doherty has a really nice walkthrough on “Cross-Browser Inline-Block” that helps us in creating a ready to use CSS inline block that expand to fit, if content is bigger. The block can be handy in displaying picture gallery, 125x125 ads or many other usage on your website / blogs. Look at the final code below: <style> li { […]

Ryan Doherty has a really nice walkthrough on “Cross-Browser Inline-Block” that helps us in creating a ready to use CSS inline block that expand to fit, if content is bigger. The block can be handy in displaying picture gallery, 125x125 ads or many other usage on your website / blogs.

Look at the final code below:

 
<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
<div>
<h4>This is awesome</h4><img alt="lobster" src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" width="75" height="75" / /> </div></li>

More info:Cross-Bowser Inline Block

Source:→ Ajaxian