Internet Explorer or "Internet Exploder"?

by Chris London

Seriously, are there any web designers who actually like Internet Explorer or as I like to call it "Exploder"? Who could possibly like designing websites for a slow running browser that consistently has problems displaying text, images, columns, properties, etc., with the added bonus of perpetual crashes? I just can't imagine. One thing I do know is that Internet Explorer is a giant thorn in the side of most web designers. As web designers we are constantly cross checking browsers for compatibility. And there's one browser that really stands out for causing problems and hours of trouble shooting. That's right - Internet Exploder! Even worse, we have to worry about more than one version. There's IE5, IE6, IE7, IE8, and the cousin everyone hates Vista. They all have their own special problems and quarks. It's especially brilliant when you fix one problem and it creates a new one in another version.

Until we get rid of Exploder completely... we've put together a short list of common problems that can really make a website ugly in IE (just pick a version). Oh, their solutions are listed too just incase you feel it's necessary to cater to the Exploder machine.

1. IE6 double margin bug when using float property on a div Common, but at least it's easy to fix. If you use margins on a floated DIV, most of the time but not always, it will double your margin value. The solution is simple. Add display:inline property.

2. Height:100% on a position absolute div not working. It doesn't understand the 100% because it's IE6. You must add a fixed height to it's parent. If you want to have 100% of your body you need to add height:100% on your html and body elements.

3. Why aren't my PNG's Transparent? Surprise! Another thing IE6 doesn't understand. Here's the patch: back\ground-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yourPNG.png", sizingMethod="crop");

4. My floated columns are stacking instead of floating side by side. This is pretty common too. If you have a div, an input, or anything larger than your column width, it will probably move under the other columns. Solution: Look inside your column for an element that is larger than your column width and correct it.

5. Why aren't my list bullets aligned with my text? Because people are still using Internet Exploder. . .don't worry you probably have a top padding on your list element (<li>, etc.). Just put a top margin instead and that should fix the problem on all versions of Explorer.

6. Why is my website centered in every browser except Internet Explorer. You've gotta love that! You are probably missing your DOCTYPE code at the very top of your page right above the and tags. This code may look unnecessary, but don't be fooled... make sure you keep it in your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

As long as Internet Explorer exists there will be people finding ways to fix it's bugs. But let's ask ourselves... is it really necessary to continue catering to Internet Explorer? Maybe if we stop going out of our way to make things work on Internet Explorer it will just go away. There are plenty of Web Browsers out there now like; FireFox, Mozilla, Opera, and Safari that simply don't have all the design issues that Exploder has. Web Designers, it's time to band together and put an end to this conspiracy - Let your clients know that there are alternatives.

I am the Art Director for Pixel Productions Inc. We pride ourselves on taking a thoughtful, fresh approach to each and every design solution. Whether it's creative graphic design for print media or website development, our design process allows us to provide meaningful and practical solutions that get results!