We've all used Internet Explore, some of us still are using it (we won't judge as long as it isn't version 6) If you're not a designer / developer then you may not know much difference between different IE versions or even different browsers. Now if you are a designer / developer you probably grumble or cringed just at the mention of it. Now we're not here to bash it, that's too easy. Let's talk about some or if you want you can just skip ahead to the bugs & fixes.

IE is notorious for displaying websites, well we'll just say different. Though it gets better with newer and newer versions, it is still an issue. What it comes down to is there are various technologies available to enhance websites, such as CSS3 and HTML5, and IE doesn't always support these or they support them incorrectly. The newest version, IE9, has some of these issues but it is a great improvement from 6.

What this means to a client / business owner

When IE displays something differently than all other browsers, your web developer has to spend more time trying to fix or 'hack' your site which means more cost for you.

What this means to a developer

You waste more time on what seems to be unnecessary code. It is usually sloppy, invalid, and not easy to scale or upgrade. Sometimes there aren't even 'hacks' and really great methods and designs are unusable.

What Should I Do?

The most important thing is to know your target audience. If you're trying to reach young developers, they are probably using the latest version of Firefox. If you're trying to reach old knitting grandmothers, they are probably using IE6 (maybe even Netscape Navigator).

IE Stats

In 2007 over half of the users were on IE. Currently only 23% use IE. Out of those 23%, 2.3% are on IE 6, 4.4% are on IE 7, 12.9% are on IE 8 and 3.6% are on IE 9. As a general rule of thumb, we do not support IE 6 any longer. Upon request we can put a message up for those on IE 6 telling them they are in a very old version of IE and it is a good idea to update their browser for best results.

As you can tell, other browsers are gaining market share and IE is loosing market share. We hope eventually they will get their issue worked out so they perform with compliant standard code. Until then, we will continue to insert IE hacks.

Firefox leads all browsers with 42.2% of users while chrome comes in second with 27.9%.

IE Bugs & Fixes

IE7 inline-block Bug
IE7 just does not support inline-block, which is a bummer because it's pretty useful, but we can trick ie 7 with this:

.class { display: inline; zoom: 1; }

.class { *display: inline; *zoom: 1; }

.ie7 .class { display: inline; zoom: 1; }

To target IE7 specifically you can add an * right before each attribute but I prefer conditional classes. This is were you use conditional comments to determine if it is IE and if so which version. If so, it applies a class.

IE7 z-index Bug
IE7 supports z-index but it can be buggy sometimes. This bug is a little less common than the above one but you still may encounter it from time to time. In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. To fix this you just give the parent element a higher z-index than the child. Remember, you still have to position any elements using z-index or else the z-index will just be ignored.

<p style="z-index: 3000"> <p style="z-index: 1000;"> </p>

I generally like to keep hacks separate, even if they are valid code, it's just not intuitive. So in this case I would put the z-index in a css file and use conditional classes to apply a higher z-index on the parent.