Internet Explorer, How I Hate Thee

Thou has cast a shadow of doubt on my blog redesign effort… damn thee!

Alright sorry, that was pretty lame. But in all honesty… are you kidding me? I got most of rough elements of my redesign looking good. Asked several people how it looked in their browser. Result = good.

Then I checked it on a different computer myself and both sidebars were out of wack. What was the difference? This computer was using Internet Explorer 6.0. It even looked a wee bit messed up on IE7 but the problem there is minor. IE6 users account for 13% of my blog’s readers according to Google Analytics. So, I figured I’d better please these people. (Psssst: download firefox!)

Googling a bit led me to a quick hack that should fix the problem nicely. Essentially, Firefox and IE handle CSS box elements differently. Whereas Firefox places padding, margins and borders on the OUTSIDE of the box dimensions, Internet Explorer includes them in the total dimensions. So for example, if you had a box element with width 100 and put a 5px padding on the left and right you would have:

• Firefox- 5 pixels padding, 100 pixels content, 5 pixles padding for a grand total of 110 pixels.
• Internet Explorer -5 pixels padding, 90 pixels content, 5 pixels padding for a grand total of 100 pixels.

And that’s the problem. I was using borders, padding and margins to create the white space between the various sidebar headings and Firefox and Internet Explorer are rendering these directions differently. So what’s the fix?

The backslash button \ is called an “escape”. When a line of CSS begins with the escape in Firefox and Opera, it can’t read it and simply skips over it. However, Internet Explorer can work with it just fine. So here’s what you do: in your stylesheet, create rules for both IE and FF.

Between the hashes are example code:

————————————–

#div {
width: 100px;
padding: 0 5 0 5
}

#div {
\width: 110px;
\padding: 0 5 0 5;
}
————————————–

Firefox will read the first div as 100 pixels wide and then choke on the second set of instructions because of the \ character, keeping the width at 100 pixels wide and adding the padding to the outside of the box. 110 total pixels.

Internet Explorer will read the first set of instructions but OVERWRITE THEM when it reads the second set of CSS instructions for the same div right below. So it will use the 110 pixel box and put 5 pixels of padding on the inside right and inside left of the box.

Voila! Both should render correctly.

I was excited to find out that the fix wouldn’t be as tedious as I first imagined and so I went to open up IE and start playing with code. Oh, wait… I have Internet Explorer version 7. No problem, I’ll just download IE6. Just kidding - YOU CAN’T! I couldn’t revert and downgrade to the previous IE, making my life a living hell.

There are a couple more complicated ways to run both IE6 and IE7 on your computer simultaneously, but this isn’t something I could do at the moment. I also found a few sites that will automatically take screen shots of your website using different browsers and print the results to your screen. Unfortunately, none of them seemed to function properly. Just to spite them, I hope my browser wasn’t compatible with their design… hehehe.

Another bump in the rode, but it was nice learning that little IE6 trick. Hopefully the idiots at Microsoft will learn that CSS is the wave of the future and create browsers that work with the latest versions. Hopefully the idiot writing this post will follow suit and learn how to flawlessly code his own CSS instead of digging through other people’s CSS crates.

So apologies for the “we’re moving” feel but you may have to deal with it for a little while longer. Keep checking back to see when it’s finally done. And for that, you can always subscribe to the RSS feed.

It’s 1AM again? Ugh… I’m hittin the sack… have a good one!

One Response to “Internet Explorer, How I Hate Thee”

1. Plepco on September 29th, 2007 2:34 pm

   Hahaha…well I am sorry but I had to laugh because I think 90% of the time I spend on CSS is spend figuring out how to make it look decent in IE. The other 10% of the time initially is spend doing my initial work and seeing perfect results in FireFox and Safari. IE sucks.

Leave a Reply