Internet Explorer and web design

add me to the list...
This subject is nothing new, but one that every aspiring web designer must endure: IE flat out sucks! As I've been redesigning my new portfolio site, I've been excited about how it's turning out as well as my understanding of [DIV] boxes; until I previewed it in IE6. At first I didn't want to believe that it was just the browser, and it was my code. As a new programmer you tend to get things working that aren't always semantically correct or universal in use. Thing is you can kinda get away w/ it when you're using Firefox. What, you're not using Firefox?! Have I told you what a lovely browser the Fox truly is?

Anyway it's rapidly becoming apparent that IE is a little slow in reading CSS rules. A simple example would be leaving a [P] tag unaligned. In FF it automatically sends it to the left where IE likes it to be front and center; back into the code we go setting all text-aligns where we want them, just for IE. I don't mind that so much as it forces you to provide clearly defined markup; it's good practice.

the miracle of the box hack and other wonders
Here's where it gets plain stupid. I knew it existed, but I hadn't encountered it yet. IE doesn't display dotted lines. DOTTED LINES!! IE7 is supposed to display them now, but IE6 has been out for an eternity! IE also doesn't recognize the pseudo-class :hover to enable CSS rollovers for class/id attributes either.

The best of all is the legendary "box hack" or hacks that have resulted in IE's miserable display of the box model. You have to trick IE and hide that code from all the other accurate browsers in order to get it to display correctly. What kind of self-serving crap is that? IE wants to do things their own way, but that's usually reserved for a product that someone makes money from, not a free and sometimes mandatory download. Windows is on 90% of the personal computers out there so it's not like MS is hurting for money and that will be supplemented by a deviously written browser. Check this out:

#top {
margin: 0px 0px 0px 0px;
padding: 10px;
border: 0px;
background: #fff;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 80px;
}
html>body #top {
height: 80px; /* ie5win fudge ends */
}

I thought I was learning CSS code, not Morse code. I'm not even going to pretend that I understand what kind of voodoo is being crafted here. I can't truly say that though; people had to come up w/ these hacks, and they're leaning the same things I am, so I should as well. Just not today. I want my box to work, and now it does. It's still voodoo.

The code above is from Owen Briggs' site The Noodle Incident. You should check it out; he gives a ton of info on this subject and more. If you want some more fun, just Google "box hack" and see what pops up! Isn't IE wonderful?


Technorati Tags: web design, IE6, IE7, box hack, CSS, The Noodle Incident, web standards