Cross Browser Inline-Block
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;
}
Thank you
Inline-block come in really handy for form layouts (applied to labels, inputs, error spans). Works brilliantly in IE6+, Mozilla 3.6+, Safari, Chrome, etc.
This is very useful hack! It’s much better than floating li items. Thank you.
If you want to avoid nasty CSS hacks and don’t care about IE6 (which you shouldn’t), you can ensure proper inline-block handling in all browsers if you use a tag that has a default display of inline (other than the <p> tag).
So tags such as <span>, <b>, <s>, <q>, <u>, <i>, or <a> work perfectly in all browsers if you apply display:inline-block to them.
I recommend <span> because it’s semantically similar to <div>.
Just remember that whitespace between inline-blocks is rendered just like it is between text.
Click here to see a demo and test it in various browsers.
The is a block-level element by default, but good comment otherwise.
Darnit, HTML disabled. The *paragraph tag* is block-level by default.
That would be true except for Firefox 2 which is why the -moz-inline-stack is included
I gotta say, your site is very useful, I end up here frequently, also the css frog rules.
Not ready to share my site yet, perhaps when It’s a little more finished!
Hi there, any known issues with inline-block with Chrome, look at this weird behaviour I have found at the new beta version of WordPress 2012 – http://wordpress.org/support/topic/twentytwelve-nav?replies=17
Any suggestions or ideas anyone ?
want this with divs