CSS :before and Internet Explorer 7

Well, if your company is like mine, you have a requirement to support Internet Explorer and versions as old as seven. While supporting Internet Explorer isn't in itself a huge deal, attempting to use new-age CSS with Internet Explorer 7 is.

For me, the CSS psuedo tags :before and :after are particularly useful. Many of the pages I've had to implement recently have included funky icons before menu items. While this wouldn't normally be a big deal as you would think I'd just add the image to the menu's HTML and be done with it. Well, that would work all fine and well except that we have custom built controllers that will automatically generate the menu for us. The reason for this is so that each user of our site can have their own custom made menu. So this is where the problem is: how do I add the funky images to a menu I cannot edit. The answer: Do it with CSS!

I implemented the menu icons using the CSS's :before tag. And it worked beautifully in Firefox, IE8 and IE9; however IE7 displays nothing. So I did a quick Google search and found that it is possible to do this in IE7.

The keen observer will note from that page that the implementation uses the :first-child tag to apply the image to. The problem I observed with this was the image I wanted essentially became a repeating background for the menu item it was to be in front of. So to get around this, I decided to implement a little JQuery script to insert a new element before the menu item.

JQuery:

$(window).load(function () {
    if ($.browser.msie && $.browser.version >= 7 && $.browser.version < 8) {
        var newP = document.createElement('p');
        var newParaText = document.createTextNode("");
        newP.appendChild(newParaText);
        $('#menu-item-selector').before(newA);
    }
});

HTML (in an IE7-specific style tag):

#menu-item-selector>*:first-child {
   background: url('path-to-image');
   height: 5px;
   width: 3px;
   position: relative;
   padding: 0;
   margin: 0 0 0 10px;
}


By inserting a blank <p> before the menu item, the :first-child css would be applied to the P instead of the menu item. And the final result looked like this:



I will note, I didn't feel this was the most graceful approach out there as it uses some of IE7's holes to work, but with our support for IE7 being dropped as soon as our user base drops below 5% on it (currently ~10%), I decided not to worry about it.