How to use the HTML5 Boilerplate ir class with inline elements?

Question

I'm using HTML5 Boilerplate css and I would like to apply the ir class to my footer menu. The menu is in a list, and I use inline-block to display this list horizontally.

Here is the fiddle of the code. You can see that the image replacement works, but the text menu element after (that has no image) is translated to the bottom. This is due to the .ir:before css rule that simulate a block element which takes some room.

Is there a way to use the HTML5 Boilerplate technique without this side-effect ? If not, I will go back to the text-indent:-9999px technique.

Bonus question : what are the benefits of the HTML5 Boilerplate technique compared to the text-indent one ?

Answer 1

The text-indent: -9999px method has some drawbacks. The main are:

• does not work in IE6 and IE7 on inline-block elements.
• 1st gen. iPads have proven to have performance issues with this technique, with page rendering slowing down quite a bit.
• Even if we don't see it, any browser in any device has to draw a huge div (more than 9999px) that overflows the screen. This is bad for performance as it adds page load time and requires more memory resources.

The .ir technique in HTML5 Boilerplate has proven much more performant and reliable. You're doing the right thing.

Having said that, I'm not 100% sure of what you're trying to achieve in your code. I have restructered the html a bit in this fiddle.

As you can see I have put red borders to understand where exactly elements are and how much space they take up. Every image/text is now in its own <li> which is semantically logic (one link/one list item), like so:

 <ul>
     <li>facebook<li>
     <li>twitter</li>
     <li>example page</li>
 <ul>

I've also removed the float:left to the nav as you need to float the elements inside it, not the container itself. Hope this clears it up a bit and helps you get to where you want. I'm ready to edit this answer if any improvement is needed or if I have misunderstood what you're trying to achieve.