Hoverbox IE7 Fix

— Topic: CSS

Okay, so now that Internet Explorer 7 is pretty much solidified in how the CSS rendering will perform, I figured it was high time I respond to all these emails I keep getting about Hoverbox not working. I fiddled with the CSS for a bit this evening, to no avail. As far as I could tell, if the * html hack was fixed in IE7, and the rendering was given an overhaul, it should have worked just like any good browser. Yet, it was still rendering incorrectly, just as IE6 had.

Then it dawned on me: Nothing has changed, in regards to how it effects this code. While the “star HTML” parsing was fixed, the actual rendering of positioned elements was not. So, the fix was quite a bit more simple than I had originally anticipated. I just moved all the IE specific CSS to a seperate file, and commented it out with conditional statements in the HTML. Boom, problem fixed. So, let that be a lesson to anyone still using CSS hacks.

IE7 Screenshot

As you can see, the z-index was broken for IE7 with hacks still in the CSS file. Also, the alt attribute still appears as a tooltip, despite the fact that most web developers agree that it is meant as an alternative to the visual layer, not as an enhancement. That is what most browsers use the title attribute for, but oh well. For more on that, read this article by Roger Johansson.

I am going to cast my lot along with Jon Christopher, and would encourage you to do the same. Try not to think of it so much as giving into Microsoft by using their proprietary comments. Rather, think of it like giving them crutches, until they can catch up to the rest of the industry and quit limping along.

So, unless you want Dave Shea to bust out the Vitamin Zen-fu on you, stop hacking and move your IE tweaks to external files. Otherwise, I have the feeling that we’ll be forever creating more work for ourselves, as old parsing bugs get fixed but new ones are introduced. Let’s learn our lesson from IE6, and not repeat the same mistakes in the future. Oh, and let’s cut the IE7 development team a little slack, because they really are working hard.

Hoverbox: View Example | Download Here (280 KB)

Latest Entries

Me, Elsewhere

icons by Komodo Media

JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript
Promote JavaScript


The thoughts and opinions expressed here are mine alone, and are not necessarily shared by any other living person.