IE, inline-block, text-indent and background-images

[bobslaede]

Hey fellas.

Here’s a tip for you guys.

Say you have a link to a pdf file for your users to download, like so:

Code:

Download PDF

But we really want to show an icon to the user instead of the text.

To make this look pretty, we need to hide the text, and show a background image instead. But we don’t want to break the flow of whatever content surrounds this link, so we want to use inline-block.

Code:

.icon { display:inline-block; width:16px; height:16px; text-indent:-9999px; }
.icon-pdf { background-image:url(pdf.png); }

That should do the trick right? Well, yeah. Unless you’re using IE.
IE will hide the whole paragraph, or table-cell if you want your icon in one of those.
Now i now that IE6 and below, doesn’t support inline-block, but this doesn’t matter for this, you can use whichever inline-block hack you want for that, the issue still applies.

There’s at least two ways of fixing this. One in CSS, and one in HTML.
CSS:

Code:

.icon { display:inline-block; width:16px; height:16px; font-size:0; line-height:0; }

HTML

Code:

­
Download PDF

Both of these will make the paragraph visible in IE again.

[Author]

Posts