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 { […]

Share online:

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

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.