Journal
Hoverbox IE7 Fix
16 May 2006 › 8 comments
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.
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)
Discussion + Dissension
Comments closed after 2 weeks.
#1 Robert
Nice! I agree with you about IE7. They have dragged their feet, but they are working hard to get up to par.
I personally have come to like conditionals instead of hacks in my CSS files. One it makes it easier to update for each browser when updates are made. Besides, who wants to get Vitamin Zen-fu-ed!
#2 Jon
Awesome, I still love Hoverbox and I think this modification will help developers from here out. I do agree that the Microsoft team is working hard, but in the same breath I feel that we can all thank Roger Johansson for wording things just right in some respects for IE7 and Microsoft in his recent article “Microsoft and Internet Explorer vs. web standards”. So much time and effort utterly devoted to making sure our projects display properly on an inferior product.
One of the main reasons I think conditional comments will be the way to go is version control. Using them you can target specific versions of IE, and with the presence of IE7 we will all need to do so. We can all get our ‘Helping Old Lady Microsoft Cross the Street’ scout badges. I’m excited.
#3 Lelia Katherine Thomas
Things like this make me wonder why anyone’s still using IE. I don’t plan to download IE7 at any point—figure I’ll have it pre-installed on my next computer with Windows, right? :p
My opinion is that for my personal sites I no longer cater to anything IE-related. If my site renders properly in Firefox and Opera, I consider myself done. (Of course, any client work I’ve done, I have a different perspective, obviously.) This choice has been an interesting one, but I wish I had done it long ago; it goes to show that any quality content I might publish is what ultimately matters. Despite no major shifts in the number of users visiting my site on IE or Firefox (about 40-50%), and despite my website not looking as good on IE, I have had a steady number of returning users and traffic has continued to go up.
I think designers and artists as a whole are bordering compulsive perfectionism. Sometimes it’s good to remember that things don’t have to be perfect.
Of course, don’t take that to the extreme. You know, as Microsoft’s IE has done…
#4 Ara Pehlivanian
Yeah, I’ve started using conditional comments to separate IE CSS and it’s kind of cool to know that my code’s hack free. Trouble is though, that this is kind of like the old days of “code forking”. :-/
Good of MS to provide a safe alternative to hacks though.
#5 Nathan Smith
Jon: Helping old lady Microsoft, priceless. I’ll have to remember that.
Ara: I don’t think their conditional IE comments were motivated by altruism. It was originally a way for them to serve special content to their own browsers from their own websites, back in the days of the wars with Netscape. But now, it’s proving useful. If you come to my site in IE, you’ll see a nice pseudo XP security warning, telling you to get Firefox.
#6 Jonathan Eckmier
Nathan: great work, I whole-heartedly agree with your statements about separating hacks from your CSS. For anyone who hasn’t learned about conditional comments yet, I posted an article today on how to use them.
#7 Mike Zemina
Sorry that this is not IE7 related, but the Hoverbox journal was closed for comments.
I liked what I saw and wanted to see if it would work on my webserver. I downloaded the files and placed them on my webserver (Apache on Linux) and jumped to see if it looked like on your website. Bummer, not good! http://thezems.mine.nu/hoverbox/index.html
I found out it would not appear (the hover images) correctly using IE6 but was OK using my Firefox browser. Strange that if I went to your website it looked correctly using my IE6 browser. Not sure what the issue is. I haven’t done a compare yet, but will start on that tonight.
I hope if anyone has an idea – they would send me some info, this is my first trial with CSS. But want to start using it more!
Mike
#8 Nathan Smith
Mike: For some reason, the Zip file was slightly messed up. I have uploaded it again, and it should be working just fine now. Sorry for any confusion that might have caused, and thanks for bringing it to my attention.