Internet Explorer, Don’t You Just Love It

I had a horrible problem on a website I have been working on with a very simple popup menu. The problem only actually occurred in IE7 (didn’t check earlier versions) but worked fine in:

• Mozilla Firefox
• Google Chrome
• Netscape
• Opera
• Safari

I posted around various forums but didn’t get any answers to my questions or suggestions on how to fix the problem.

I thought it would be something really simple that someone would say to me just tweak the code here and it will be fine, nah life isn’t that easy.

There were some posts on using CSS driven menus or buying 3rd party software and I have to admit I did consider that for a while as I was spending so much time trying to get this fixed.

The Problem

You can see from the images that I would get the menu minus the text when it first triggered, if I moved the cursor slightly up or down then the text would appear or if I just put the cursor into the popup menu box. So it wasn’t a major problem but was very irritating.

To add to the problem sometimes the top box (income) didn’t display text when the other 3 were displaying, but sometimes it did, so was very intermittent in nature making it difficult to determine if it was fixed or not with the various changes I was making to try and resolve the issue.

Also when it didn’t display the only way to get the text was to put the cursor into the very top box of the popup menu, but then it would disappear again when you moved to the main menu or one of the other popup options. Not really satisfactory and proving to be a bit of an issue.

So here comes the solution

I found a suggestion to someone else’s question in one of the forums to use a DHTML menu which also had a link to an online tutorial here at Dreamweaver DHTML Menu – Tutorial.

I had a look through and it didn’t seem too complicated plus I really do like simple solutions, so I decided to give it a go. The tutorial doesn’t give you all the answers because, well every website design has it’s own requirements, but it did provide me with enough of the basic approach to enable me to work out my own solution.

The principle behind it is that you use the hide/show behaviors option in Dreamweaver to select elements that either show or hide your menu. The menu itself is placed in it’s own layer and is hidden until you hit the show trigger.

Then you create some hide triggers so that when you move off the menu it gets hidden again and that is basically it.

You can create a submenu layer and then nest divs inside that to configure your menu and control it all with CSS for size, colour, borders etc.

You also need to create a small transparent .gif file which you can size and use for the hide triggers again creating a layer for these to sit in (I used the same layer for all (3) of the hide triggers) which you can then position where you want them and sized to suit your needs. I used Photoshop to create the .gif, really easy.

It took me a little while to work out the details but it wasn’t really that long before I had a working solution.

One little note however, I created 4 separate divs for my popup menu and because of the effect I was looking for I left slight gaps in between them so I could see the background colour. This proved to be a problem with, you’ve guessed it, IE7. What happened was there was just enough of a gap to trigger the hide area which was sitting behind the menu, this resulted in the menu going to hide before I could select my required link. It was a little confusing because Mozilla didn’t seem to mind the gaps and worked fine.

Anyway the solution was to close the gaps and use CSS to put a border on the edges that looked like background, I got the effect I wanted with no gaps and IE7 then worked fine.

So if you want a nice simple popup menu that works with not too much overhead in terms of code and with the added advantage that the search engines can follow/spider these links (which they can’t through javascript) I would suggest that you take a look at the tutorial and give it a go.

If you want any help from me then just leave me a comment or drop me a line and I will be happy to help where I can.

Also bear in mind that I only needed one popup menu so this was a fairly simple design, may need a bit more thought for multiple popup menus but I am pretty sure it can be done with a little perseverance.

This is what the final version looked like, apparent gaps and everything, but the best of all is that it works in all the browsers listed, including IE7 – fantastic.