Cross-Browser inline-block without word spacing!
If you’re any sort of respectable web designer, you’ve obviously come across many situations when you’ve had to use divs as a sort of inline block and only wished that you could use display: inline-block to quite simply solve all your layout problems. Instead though, we’ve had to resort to using float: left and then inserting a float clearing div/br after all those floated divs. Sure, it works but it’s not what we really want to end up doing (especially having to throw in extra html markup just for visual correctness).
Well, I’ve since run in to a situation that using float: left wasn’t working for me (try centering a set of divs that have float: left – it’s a pain!), so I had to find some kind of way to use inline-block. Thankfully, Internet Explorer 8 and Firefox 3 support inline-block now, but we still have to deal with those hard-headed users that take forever (or never) to upgrade their browsers. To accomodate Internet Explorer 7 and Firefox 2 we have to use some CSS hacks (what else is new!); thankfully they’re not that bad (but it still invalidates your CSS… bummer).
First, you must make sure that you do not throw the browser in to quirks mode, otherwise it won’t work just right. This means specifying a proper DOCTYPE on your document (and if you’re using XHTML, don’t include the <?xml … ?> tag at the top). Once you have that out of the way, it’s just a little bit of CSS to add to the element(s) you want to display as inline-block:
display: -moz-inline-box;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
The first line sets a special Firefox property that we need for Firefox 2. The second line obviously sets the display to inline-block (and Firefox 2 will ignore this setting since it doesn’t understand inline-block). The third sets an IE-only property called zoom to a default 1 (no zoom) which triggers a switch in Internet Explorer 7 to enable hasLayout which allows the divs (which are block elements by default) to inherit inline display features. The fourth line re-sets the display to inline for Internet Explorer 7 to get the final effect we’re looking for. The last line fixes part of the word spacing problem we’re about to mention below.
As mentioned, there’s still one small problem which you may notice – inline items get word spacing applied to them because they’re now inline elements. That means that any space between your div tags will show up in your layout (even newlines!). If you’re trying to get your div blocks to sit side by side without any spacing, you’re probably pulling your hair out because of this spacing. There’s two fixes for it – the first is to simply get rid of it, though this usually means killing any readability in your back-end programming (if any is used) and mushing all your HTML code together in to one long line which sucks too. The second way to fix it is with a bit more CSS around the container in which all these divs are in:
word-spacing: -1em;
That line of CSS sets the word-spacing to -1em, which is like doing a backspace of 1 character to get rid of the blank space caused by any white space or newlines between your divs. The vertical-align: top CSS we already added to the individual divs gets rid of the spacing between the divs above and below, but it doesn’t fix the spacing to the left or right. By adding a negative word-spacing, we get rid of the spacing on either side of our divs which gets rid of the last of our problems.
There you have it – a cross-browser inline-block CSS solution, and even a fix for any erroneous spaces in your HTML markup that you probably won’t want either. I haven’t tested these fixes in Internet Explorer 6 for a few reasons; I refuse to code for Internet Explorer 6 any more since the browser is so old and Internet Explorer 8 is now officially released so users really should upgrade.