Over the last week, while trying to design a new site, I have discovered quite a few handy tools for us developers. I thought I would share a few of them with you. Some of you may already be aware of these, but for those who aren’t, I wanted to put them all in one place.
I have found the following useful items in my search for IE solutions this week:
- How to install multiple versions of IE on one computer
- How to effectively use transparent, 24-bit PNG images in IE versions earlier than 7 (IE7 finally knows how to handle alpha transparency in 24-bit PNG files)
- How to create clean, effective, efficient dropdown menus that will work in Firefox with no proprietary code at all, and will work in IE with a very small amount of javascript, rather than using a large amount of messy javascript code for both browsers
Multiple Versions of IE
First of all, for those of you that have upgraded to IE 7, and want to know what your sites look like in older versions of IE, or for those of you that are afraid to upgrade to IE 7 for fear that you won’t know what’s going on with older versions, there is a very nice piece of software. The tool is called “Multiple-IE”, and its name should be pretty self-explanatory. It allows you to install multiple versions of IE on your PC (and apparently even in Linux, although I’ve yet to try it). You simply upgrade your browser to IE 7, then download the Multiple-IE package. Once you download the package, you double-click on the installer, and it asks you which versions of IE you want to install. You are given the option to install any or all of the following: IE3, IE4.01, IE5, IE5.5, and IE6. Here two screenies from the official web site:
PNG Transparency in IE
Next, I found some pretty good, reliable code for fixing the non-existent PNG transparency support in earlier versions of IE. I actually found two solutions, one of them using a small amount of javascript, and the other using an external htc file. They both work almost flawlessly, with two minor exceptions:
- If you use a PNG as a background image, any links within that CSS element might not be clickable. I’ve seen quite a few people say that setting the “position” of their links to “relative” fixed that problem for them, but it hasn’t helped me out.
- Every once in a while, since they are both triggered by onload event handlers, they will not load properly, and you’ll see your ugly old PNG’s with that nasty IE gray/off-white background. However, reloading the page usually fixes that problem.
There are some great examples on the page with the first solution. I found the information about the htc file fix in a blog entry called “The easiest way to PNG support in IE6”
Cross-Browser Dropdowns
Finally, I also found some really nice suggestions on how to make good, efficient cross-browser dropdown (or fly-out) menus with very little javascript (in fact, none at all in non-IE browsers). The solution is simple. First of all, any standards-compliant browser is going to support the “li:hover” definition within your CSS file, so you can simply set the display of your li to “none”, and then set it to “block” when the user hovers over the list item.
Unfortunately, IE (any version, so far) does not recognize the li:hover definition, so you have to get a little creative. Essentially, you need to dynamically assign a special class to those list items when they’re hovered over, using a little bit of javascript. The javascript is very efficient, as, when you hover over an item, it loops through all of the child nodes within a specific list as denoted by that list’s “id”. Then, it assigns each of those child nodes a special class that makes them appear. Basically, you plug in a few lines of javascript, then define that new “special” class the same as you define your “li:hover” elements in your CSS file.
The information on these “Son of Suckerfish Dropdowns” can be found at HTML Dog. Why are they called “Son of Suckerfish”? Well, it’s quite simple, actually. Originally, there was a script like this called “Suckerfish” over at A List Apart, which allowed you to create single-level dropdown menus. Then, someone took that script and modified it to allow child lists to fly-out or drop-down from your original drop-down items. Therefore, with this script, you can actually create multi-level dropdown menus very easily. Heck, you could probably even create a drop-down menu 10 or 20 levels deep if you ever felt so inclined. Of course, if you are ever working on a site that needs that many levels of navigation, you really ought to sit down and re-map the site. In addition, with the original Suckerfish solution, you could only create horizontal “dropdown” menus. With the “Son of Suckerfish”, you can choose whether to create horizontal dropdowns or vertical fly-outs.
Anyway, you can read about and find the necessary script in the HTML Dog article called “Son of Suckerfish Dropdowns”
If you put those babies inside of some good conditional comments to hide them from all the non-effected browsers, you’ll be good as gold.
Good luck with everything, and here’s hoping that IE will eventually catch up to the rest of the world, and that all of the faithful IE users will subsequently upgrade to the new, perfected version at that point. Either that, or they’ll finally switch over to an actual standards-compliant browser. Of course, by then, the world will have probably ended and all of this will be useless anyway.