Note: sorry, no hiking or skiing this week: I’m helping a new company with some rush work on their website. Those not interested in geeky tech-talk may wish to tune out for a bit.

For the rest of you, I thought I’d tell you about a bug I’ve been dancing with today. I’ve moved into the cross-browser compatibility phase of the website’s update, which these days means pulling your hair out to try to get things to render correctly in Internet Explorer 6.

To understand why Microsoft is so widely reviled by web developers, you have only to contemplate the stunning prevalence of bugs in IE which sometimes seem almost mythic in their inscrutability. It starts as it always does: you hash out the code, tweak it a little more than you should to make things elegant. The pages render fine in Firefox, Opera, and Safari—but wait…why is that margin off in Internet Explorer 6?

Since some 50% of you still browse via IE, ignoring the browser entirely is not a viable strategy, especially when you’re a business and you want your corporate image to look polished and professional to all who visit your website. So let’s take a look at the flagship web browser from the folks in Redmond (versions 6+7).

Here’s our example source code: (edited to remove the tags)

And here’s how it renders:

This creates two boxes of identical size, one green and one blue, and encloses them in a red box. The blue box is positioned normally, in the flow of the document, and it has a top margin of 50 pixels, which means it should sit 50 pixels below the top of the red box.

The green box is positioned using a different technique: absolute positioning. Essentially, rather than let the order of elements in the page determine their position, when we use absolute positioning, we are removing an element from the document flow and arbitrarily placing it anywhere via a coordinate system. In this case, we are telling the green box to sit 100 pixels from the top of the red box and 250 pixels from the left edge of the red box.

If those two paragraphs didn’t put you to sleep, you may have noticed that the tops of both boxes ought to be level with each other, exactly the same distance from the upper border of the red box: 100 pixels. And, if you’re browsing this page using Firefox, that’s exactly what you’ll see.

But what happens if we look at this exact same page in Internet Explorer? (sorry, but in order to continue reading, you’ve got to reload this page in IE. Otherwise, it’s going to be a really boring magic show ).

Ready? Here we go:

Hmm…it looks like the blue box has lost its top margin.

Scandal…Disgust…Shock and Dismay! Yes, I share your outrage. Sure, some of you may be observing that we’re only talking about two little boxes. Who cares if they line up or not? Well, consider that a complex layout may have many, many elements, each of which depends on the other for its position. If one element moves, the entire layout can break. And if the error is happening because of the browser, and not you, it can be nearly impossible to figure out what the problem is, much less where it’s happening or how to fix it.

I have to say, when I ran into this today, I was immediately suspicious. I’ve grown to suspect IE of foul play as my first instinct. And the funny thing is, if a bug like this happened in FireFox, there wouldn’t be much hope of being able to do anything about it. But with Internet Explorer, it’s a little like alchemy. Change the formula a little bit, and even if it sounds completely crazy (a dash of toad wart instead of chicken claw) it might, might just make a difference. Case in point—let’s revise the source code a bit:

All we’ve done is reverse the order of the two elements in the source code. Now, the blue box’s html appears before the green box’s html.

This shouldn’t make any difference at all. Since we’re using absolute positioning on the Green Box, it doesn’t matter where in the code we put it—the rendered position of the two boxes is completely independent of the order in which they appear in the source code. Do this in FireFox and nothing changes. But let’s look at what happens with IE:

Ah, it’s just like magic, isn’t it? Now the boxes are properly aligned. How can I capture the full delightful absurdity of this result into a real-world analogy? Let’s image you own a refrigerator made by Microsoft. Let’s say you discover one day you put chicken in the fridge and it stops working. And then by chance you discover that if you move the chicken to the bottom shelf, the fridge starts working again. Or maybe it’s like a car where the headlights only work if the windshield wipers are off. Or, for a site-appropriate analogy, maybe it’s like discovering that your ski bindings only work if you use scott poles. The point is, IT’S INSANITY!

Now, flipping around the order of the source code might seem like a decent enough solution, but often we have good reasons for ordering our code the way we do (hello: Google!). So are there any other workarounds we can come up with? Yes. Try this:

Which gives us:

What did we do differently? We just stuck an empty div in between our green and blue boxes. ‘But…but…but’, you stammer, ‘This shouldn’t make any difference! The div is empty! It’s meaningless! It has no effect!’

Calm down, I say. It’s okay. We must simply bow our heads and acknowledge the evil genius of IE’s absurdity. IE says an empty tag make the code different. IE approves of this. IE renders it correctly. IE says it’s cool. Don’t argue. Just be glad something exists that makes it work.

Having Fun? Let’s try something else that should make no difference:

Instead of putting in an empty div, let’s put in an html comment:

And Voila!

Positively hysterical, isn’t it? Almost as funny as the fact than IE breaks SierraDescent’s layout in this example. I thought I’d leave that in for maximum impact. Well, I think that’s about enough fun for today. I know, I know…but soon it’ll be time to get back to work in the mountains. Hope you enjoyed our little tech vacation here. And remember: Microsoft keeps us all honest by making sure we earn our pay! Until next time…

Additional Resources:

IE7: A box with position:absolute next to a float may disappear

Tags: absolute position, bug, IE, internet explorer, source code order

This entry was posted on Monday, June 9th, 2008 at 9:16 pm and is filed under Web Design. So There.