If I can get philly-sophical for a moment, the IE team has clearly set out to be the hillbilly cousin of modern browsers and I, for one, can appreciate that. It’s a liberating space to occupy. You can spew out pretty much anything and if it’s good, people are pleasantly surprised. And if it’s crap, you can always claim questionable parentage and/or convoluted gene pool.Highlight

We had a bug in BookedIN. Normally, when you mouse around the schedule, you should see a nice little highlight box in a colour I call Kraft Dinner Orange showing you what time you’re hovered over. Clicking it brings up a dialog allowing you to book an appointment.

The way we do this is with a hidden interaction layer in each column. All mouse interactions in a column are handled there, including clicks. The highlight is a bit of HTML that we add before the interaction layer. That way, it sits behind the interaction layer in the z-order so it doesn’t swallow any clicks.

The bug: In IE8 and IE9, if your mouse happens to be on the border of the highlight box, nothing happens when you click it. Works fine if you click inside the box, just not right on the border. Here’s a demonstration: http://baley.org/IETesting.htm.

Our solution is courtesy of the mighty James, The Professor, Kovacs. He explains:

You have two absolutely positioned divs, inside and outside. According to the CSS spec (http://www.w3.org/TR/CSS2/visuren.html#z-index), since z-index isn't specified, the divs are layered back-to-front in document order. So the inside div is behind the outside div.

In FF and Chrome, when you click on what looks like the inside div, you are actually clicking on the outside div since the inside div is underneath.

Note that event capture and bubbling does not apply here. Events traverse up and down the DOM, but inside and outside divs are siblings, not parent-child.

This was exactly how we designed it and how we want it to work. The highlight is supposed to be behind the invisible interaction widget so that we can deal with mouse overs and clicks. He continues:

Now what's up with IE? For some reason, IE thinks that the border and text of the inside div are above in the z-order and swallow the event. The click event propagates, but it goes document->body->div.inside in capture mode then div.inside->body->document in bubble mode. At no time does the event hit the div.outside.

At this point, I didn’t even realize the problem also occurred with the text in the inside div. That didn’t matter much to us because we don’t have any text inside the highlight box.

Now, this wouldn’t be a James Kovacs response if it didn’t come with a solution:

If you nest the inner div inside the outer, click events propagate as expected in IE, FF, and Chrome. (Haven't tested in others.)

And as expected, it works: http://baley.org/IEWorking.htm.

I shall append another six months on to James’s already lengthy “Honorary Hillbilly” status for allowing me to return to my normal reduced usage of Internet Explorer.

Kyle the Grateful