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 {
        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

Contextual Related Posts:

3 Responses | RSS comments on this post | Leave a comment»

1
Andrew Jhonson says#3 | August 20th, 2009 at 2:28 am

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites at http://www.bestpsdtohtml.com/7.....r-website/
2
Adam says#2 | August 2nd, 2009 at 7:10 am

Also, test this site in ie7... all that stuff on the right is broken.
3
Adam says#1 | August 2nd, 2009 at 7:06 am

It's a good idea.
My problem being that I'm struggling to understand the reason for it, given that "float" works the same way...
For example, you want to align a load of advertisement banners together next to each other. As you've mentioned, they are all 125 x 125 so we know there's a dimension limit.

Float is clever enough to automatically wrap elements just as inline-block can.. so why not just do

li{
float:left;
width:125px;
height:125px;
}

and then after the UL has been finished you do a simple clear:left to then clear the floating content?

That way it's genuinly cross-browser compliant?
Obviously, assuming your banner heights are fixed (and they have free-form text in them) is a big error because if the text size changes in size, those boxes won't resize. I would recommend making the heights in em so that they try their best to take into account resize of the text via the browser options. But hey, if you've fixed your text size on your page using px then you don't have to worry about that anyway, it just means you're not doing a cross-browser attempt without a cross-user attempt.

Anyway, I'm sure some people will follow that example and find great use of it!