Things You Can’t Do In IE8

It is February of the year two thousand and twelve, and while overall web stats claim that older Internet Explorer versions account for only ~ 15% of web traffic, the reality for your business could be quite different. What if you are looking to update your (company’s) website for the new year, but find that the majority of your visitors have not updated their web browsers in the past year (IE9 was released on 3/14/11)? While it may be true that with enough diligence, you can get IE6 – IE8 to do just about everything that modern browsers can do, there are a few things, specifically when working in CSS (Cascading Style Sheets), that can really throw a wrench in the works. Here are some CSS pitfalls to be sure and avoid:

1. “display: inline-block”

<ul class="menu">
<li>...</li>
<li>...</li>
</ul>


If you have some html like a menu, and you want that to appear inline (in a line) rather than as a default bullet list, you maybe be tempted to just set the style as display: inline-block. Be warned! Before IE9, previous versions will see your styling, and completely disregard it. Or rather, they will just say “oh, display: something- BLOCK, ok display: block. We’re cool, right?”

Wrong! To avoid this, you should be able to just use “float: left” instead. But the caveat there is once you start floating things, you may have to float a lot of elements to get them to play nice together. And don’t forget that IE6 likes to further wrench it up with the classic IE6 Box Model Bug, so you should really just replace that “display:inline-block” with “float: left; display:inline” (and a small amount of finger-crossing)

2. CSS selectors like ” > ” and “:”

What if you have some sort of menu structure, and you want to add styling for the top level of list items in that menu? In the latest and greatest CSS, you could say something like “ul.menu > li” or “ul.menu > li > a” to target the top level items. Those same selectors work in jQuery, even in lesser versions of IE! But in CSS, IE<9 will say “hey, Carrots are for horses, man!” and completely disregard what you were hoping for. So it is just better to add more classes to your HTML, and get more specific with your CSS rules.

<ul class="menu">
<li class="menu-item">
<a href="#" class="top-level">top level link</a>
<ul class="submenu">...</ul>
</li>
</ul>


Taken a step further, if you are looking to target the first-child or last-child in a list of elements, and you are thinking about using “:last-child” in CSS to do so, you should really just throw another class=”last-child” in to the HTML, and do it that way, to be sure IE picks up what you are putting down.

3. Fancy styling like border-radius, text-shadow, and box-shadow…

Check It Out

<h2 style="padding:20px; border: 1px solid #000; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); text-shadow: 2px 2px 2px #333; -moz-border-radius: 10px">Check It Out</h2>

Nice Browsers that pay attention and follow directions, see something like:

IE8 sees it more like…

So check yourself before you wreck yourself. Is that box-shadow and/or rounded corners 100% vital to your site design? If so, you better look at using CSS background-images to replicate that functionality. But maybe IE<9 users can live without that stuff? Then you are ok. “Graceful degradation” is the key there.

And that about covers what I would figure are “the big 3” here. Still with me? Here’s a quick jQuery snippet that is either another pitfall, or just something giving me the case of the Mondays on a Friday :

jQuery('#nav li').bind('mouseenter, mouseleave', function() { jQuery(this).toggleClass('hover'); });

vs

jQuery('#nav li').bind({
mouseenter: function() {
jQuery(this).addClass('hover');
},
mouseleave: function() {
jQuery(this).removeClass('hover');
}
});

Both should do exactly the same thing, but IE8 just did not like me trying to save a few lines…