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)
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
- 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”
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.