DHTML Javascript & Mac IE5

I started out like most people in the web design field, using a pseudo WYSIWYG program to generate code. One of the first programs I used was Macromedia Fireworks to make some DHTML menus. Oh, when I figured out how to make my first drop down menu, I was estatic! It worked, sort of, in IE5 on the PC, not very good in NS 4.7, and the drop down part of the menu showed up somewhere else on the page, if at all on the Mac.

After this fiasco, I tried the XARA drop down, All the Web, Dynamic Drive , and even Suckerfish. My latest particular problem involved a drop down menu that used images for the buttons and did not working in IE5. Granted, this is the summer of 2005, and IE 5.2, which is still shipped on Macs yet hasn’t been updated by Microsoft in at least 2 years and support stops completely by 2005. However, making it work in this browser was the task at hand.

Earlier in the year I had purchased the latest DHTML menu from Project Seven, Pop Menu Magic to create fly-out menus, and even though I was reluctant to give up my Son of Suckerfish Menu (I had graduated to that one by now), I decided to give it a whirl.

The menu STILL did not work in IE 5.2 on Mac. The Pop Menu Magic worked fine as long as I used the CSS the program generated for text buttons, which assumes a fixed-width for the buttons, and also worked fine with a fixed width for image buttons, but these buttons varied in width.

These are the steps I used to make the menu work in IE5.2 for Mac. (This assumes you have Dreamweaver, know how to install extensions and have purchased the Pop Menu Magic from Project Seven) :

  1. I created the menu using the Pop Menu Magic in Dreamweaver.
  2. Using Dreamweaver’s Insert, Image Object, Rollover Image, I let Dreamweaver insert each button on the menu (even though I am not a fan of Dreamweaver’s rollover javascript).
  3. I then edited my menu by specifying a specific width for each <li>. You can do this using inline CSS or by creating a separate ID for each button in your stylesheet.
    <li style=”width:72px;”>

Although this method seems quite simple to me now, It took several revolutions before I finally got it all together and it works great now. For additional information, visit the support forum at Project Seven.

This entry was posted in Browsers, Coding, Javascript. Bookmark the permalink.