Cross browser display inline-block
While drinking stout at @pubstandards on Thursday, we did broach the subject of code. While talking about equal height list items which have traditionally been difficult to work with, I raised an interesting technique that doesn’t seemed to have got much traction.
Instead of using floats to line up your items in rows, where varying heights that can tangle the floats, use display: inline-block.
#inline-block-example {
width: 530px;
word-spacing: -3px;
}
#inline-block-example li {
display: inline-block;
vertical-align: top;
word-spacing: 0;
width: 120px;
}
The biggest problem with display: inline-block is that it’s not supported by IE 6 and 7. That’s ok though, because of Microsoft’s proprietary property hasLayout we can declare an element to be inline but also give it hasLayout which combined makes it display inline-block.
<!--[if lte IE 7]>
#inline-block-example li {
display: inline;
zoom: 1;
}
<![endif]-->
Finally you should notice the use of word-spacing, this is because the list items are treated as inline elements and gain the default browser property for this. Letter-spacing could also be used but word-spacing is supported by Opera as well as the other browsers, the actual value will depend on your site.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare porttitor pellentesque.
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare porttitor pellentesque.
Images from Battlestar Galactica.
Tags: CSS
3 Responses to “Cross browser display inline-block”
[...] This post was mentioned on Twitter by tombaromba, George Paterson. George Paterson said: Cross browser display inline-block. http://www.georgepaterson.com/2011/02/04/cross-browser-display-inline-block/ #html #css [...]
You might also mention that inline-block elements act exactly like inline content in terms of raw markup, i.e. they get treated like flowing text. So any whitespace between inline-block elements gets treated in the same way as text (at least it does in Firefox 3.6.8 where I actually used this technique tonight).
So, weirdly, if there is any whitespace between inline-block elements in your markup then a space will be added between two inline-block elements on the page. And if you are exactly fitting your blocks to a fixed-width container this can lead to a very confusing CSS debugging session…
Yeah they do get inline element properties which gets a little weird. I brushed on the letter-spacing and word-spacing, as a developer would need to nullify these to match a fixed width container.
When i wrote the two Web Font articles, there was going to be a third article outlining block and inline element properties showing how they work. I’ll finish the article, as in general it can be an area of disagreement between Interface Developers and Designers.