The day IE6 finally made me crack!

I lost it. It was bound to happen. The last project I worked on finally took me over the edge. I took it pretty well when everything scrolled on the page except the title. I kept my head when I was trying to fix the custom H3 tagged headers in my modules when they got cut off, widened the column and broke the layout, I even kept my sanity as I re-sized every %$(#ing box to match the pixel-perfect design the client needed that was displaying differently on IE6 than on every other browser available on Earth…

but this… this was the code that broke the programmer’s brain.

We created a custom component for this site that had two arrows to scroll through content using AJAX.  They were each positioned halfway down the page on each side. I had been working on the site for a few weeks now, and in that time I’d viewed the component several times. Finally, everything seemed to work fine (after half a day of cross-browser fixes… 3/4 of which involved fixing IE6). Well, today I was putting the finishing touches on the site and finishing up the last of the cross-browser fixes (which included Safari, Firefox 2 and 3 on both Mac and PC, and IE6 and 7). I clicked on the component’s tab to take ONE LAST look in IE6 and both arrows were at the top of the content box. Ummmmm… what? What happened? I didn’t touch the code to the component!

When I view my CSS, it reads:

.left-arrow, .right-arrow {margin-top:115px;}

Well, I didn’t want whatever the problem was to affect all the other browsers, especially since I know every other browser looked perfect. I used my custom identifier code to single out IE6 and put an important statement on it so it knew I meant business:

#ie6 .left-arrow, #ie6 .right-arrow {margin-top:115px!important;}

At first, that seemed to work. It looked just like the other (more competent) browsers.

So here I am with a code that is apparently fixed. I should just walk away, right? Nope. I’m the kind of person who’s never happy with a solution unless I find out WHY the solution worked. I change some code around to see what could possibly have happened. Seems to me the first question that should be answered is the most obvious… if it works using my custom code to only target IE6 then it should work on the normal CSS statement. Since it’s only an important statement that is different, I can probably erase my new line, put !important on the old one and save some code. So I erase my new code and put !important on the old line… because it is !important for me to fix this sorry excuse for a browser…and this is what I end up with:

.left-arrow, .right-arrow {margin-top:115px!important;}

Now every part of my being tells me that this should work. No reason not to, right?


I notice my laughter getting more and more uncontrollable as I feel a tear running down my face. Now I can handle a lot of crap from IE, but when you start messing with my mind just because you can and have NO LOGIC behind it, it causes a kernel of panic to appear in my brain and I start crashing. I continue laughing for a few minutes with a mixture of curiosity, sheer wonder and dark expletives running through my mind, but no answer comes as to how or why this piece of ancient technology can bring me to my knees on a daily basis. Why do I have to attempt to support it?

I wish I had a moral to the story, but I really don’t. If I had one I guess it would be to NOT get into programming unless you absolutely LOVE it and hopefully your desire will give you enough strength to make it through crap like this when it happens.

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.