CSS display: inline-block – underused and underrated?
View DemoBefore I continue, I must point out this this is neither new or revolutionary; but it amazed me that after 6 years of front-end devlopement, I had never used the CSS2 display: inline-block selector. It’s usefulness has been pointed out many times in the past, but I still thought that it would be worthwhile documenting my usage of it.
What I basically wanted to do was to add an icon after a heading, that would always line-up next to the last word, regardless of the amount to text. For various reasons I was using a span element, to which I applied Mike Rundle’s Phark image replacement technique. However, in order for the span to obey any dimensions, it caould not be displayed inline. I started to think about how I would achieve this, and all my solutions were fairly longwinded for what would appear to be a pretty trivial task: that’s when I remembered the inline-block selector! Using this allowed me to give the span the desired dimensions, whilst allowing it to line-up against the text.
Unfortunately, this doesn’t work in IE6+7 or Firefox 2. But fear not, these can be addressed (at the expense of a stylesheet that no longer validates). Here is the code:
h3 span {
width: 16px;
height: 16px;
overflow: hidden;
text-indent: -9999em;
background: url(/img/secure_lock_icon.png) no-repeat 0 0;
display: -moz-inline-stack; /* Get FF2 to play nicely */
display: inline-block; /* Modern browsers get this */
vertical-align: top;
/* these go in your IE specific stylesheet to make it play fairly as well */
zoom: 1;
display: inline;
}