Question

I am attempting to use the HTML5 Boilerplate system (http://html5boilerplate.com/) for a client’s website, but I am having trouble with the built in .ir class when the site is viewed in certain browsers and on certain devices.
Namely IE7 and some (or all) Blackberries based on feedback and testing on my end. The main nav and other elements of the design are not appearing / are not navigable in these situations.
The client is a restaurant that caters to a large business district, so unfortunately a ton of their prospects and customers are on corporate systems still using IE7 and are unable to use the site, as-is.

Here is a link to the relevant page(s):
http://www.vb3restaurant.com

vb3restaurant.com/index-pizza.html

Here is the .ir class that I believe to be the issue (though it could be something else):

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

Would be quite appreciated if someone could point me in the right direction as to what is “breaking” or a better/cross browser/IE friendly way for me to accomplish this design, with image replacement or some other technique.

I am not an expert programmer by any means, but I have put up a few sites and have worked with a few different frameworks, CMS’s, etc. I have attempted looking on this site and elsewhere for answers, so I apologize in advance if I am missing an obvious thread that answers this question or if I have asked it in the wrong place or incorrectly.
And of course- thanks in advance for your time and help!

Best,
AB

Answer 1

The ir class is hiding the content with text-indent:-999em (improvement: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/).

But the images that replace those items have new nth-child selectors that are not recognised by IE7, or IE8: http://kimblim.dk/css-tests/selectors/. The rendering engines in these browsers pre-date the nth-child selector unfortunately.

You can either write a jQuery shim to patch your selectors: http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere. Or rewrite your selectors for all browsers, giving the menu items ids or class-names.

Sucks right? Well, some think that of image-replacement! (particularly for low-bandwidth mobile devices) So… you could also forget using image-raplacement for IE7/8 using an IE-specific stylesheet to style your plain text.