Drop Down Menu Behind List Box

[MarcieZoob]

I am working on a dynamic photo gallery and have a problem viewing the site menu in IE on that PHP page. I have a drop down CSS menu at the top of a page and then the item below the menu is a list box that works as a "jump to..." menu for categories in the photo gallery.

In Firefox, the drop down site menu appears above the list box (jump to...) menu, which is perfect. In IE, the drop down site menu is behind the list box, which looks stupid. Anyone know how to fix this error in IE?

You can view the error at the link below:
http://walstrom.s437.sureserver.com/gallery/index.php

[cyanide]

I believe the work-around for this is to hide the form elements visibility='hidden' , when the menu drops down.

ofcourse, the other option is to move the form, it might look nice above the navigation, in the header. maybe just use some css to make the form elements a bit smaller, to fit in.

Is this a Dynamic Drive menu? - maybe try their forums, to see if a proven fix is there.

[MarcieZoob]

Thanks for the reply - I started at the Dynamic Drive forum but didn't find a fix for this particular CSS menu. I'll try some of your suggestions and keep you posted on the results...

Thanks again!

[Tim]

Hi Marcie,

I had hoped that playing with z-indexing would sort this out but the 'anylinkmenus' are already set high. Don't you just love Microshaft? I'm flummoxed too.

This may sound perverse but can you make the menu drop-up? Unorthodox I know but it would sort the problem out.

[bodgekaloopie]

Originally Posted by Tim

... can you make the menu drop-up?

LOL! That will freak the client out!

[imvain2]

I agree with cyanide, your best bet is to play around with the form.

An idea that I had was instead of using a select box, use 3 radio buttons and place them under the text box and button. Instead of using the long descriptions, you can break them down. Something like I have down below.

(o) Channel Cruise (o) 2004 Channel Cruise (o) 2005 Channel Cruise

(o) = my generic radio buttons

[ptellep]

Yeah - this is a real pain in the butt with IE. For some stoopid reason IE thinks a combo box resides in the application layer, not the page layer. There is a work around out there, but it has to do with creating a seperate layer in a <div> and using javascript to have the div appear over the combo box.

The trick is having the div move with your drop down menu and being the same size as your drop down menu.

If I can find the link to what we used, I'll post it here.

[Tim]

You could always use css for the 'Jump to' menu and match the appearance of the search field.

[venividi]

Originally Posted by MarcieZoob

In Firefox, the drop down site menu appears above the list box (jump to...) menu, which is perfect. In IE, the drop down site menu is behind the list box, which looks stupid. Anyone know how to fix this error in IE?

Nice site indeed, very 'clean'. I like it.
When I have problems with one browser while things seem ok with another, first thing I do is attempt to validate the css. I've checked your css with W3C and found some errors. Once you've amended, you may find that everything falls into place. I hope it's your case ...


Valeria

[Tim]

Originally Posted by venividi

Once you've amended, you may find that everything falls into place. I hope it's your case ...

Unfortunately Venividi, as far as I can make out this is a recognised IE bug. As I'm sure Marcie has already done, I have played about with this page for ages and even when the css validates it won't work in IE. Ptellep is correct and the select box rides over the page layer whatever you do. As he says 'stoopid'. There are possible work-a-rounds but frankly I don't think it's worth it. The css solution is the best I can come up with.

I agree, very nice site.

[MarcieZoob]

The jump menu is created dynamically by the photo gallery so I can't really create radio buttons. We are creating a PHP photo gallery that the marina staff can update on their own so I'm trying to keep it really easy (for staff and for visitors).

After a few days of hair-pulling, I think I'll move the jump menu to the bottom.

Thanks for all the replies!

[paulhiles]

Hi Marcie,

I recognise this problem with IE, but like ptellep, I can't remember the exact fix! There is one suggestion posted on the dynamic drive forum which uses Javascript to hide the form boxes when the div covers them. Check out the following link:
http://www.dynamicdrive.com/forums/s...ead.php?t=3194

Another possible workaround involves creating an invisible div the same size as your drop down div. Not sure whether you could adapt the Javascript used in this example, but check it out anyway.

One last solution... move the select boxes into the header area (i.e. above the menu!)
This is the easiest solution by far!!

Paul

[drummin]

Hi Marcie,

I had the same problem on a site I'm working on.
I took Paul's advice and found a soluntion.
On your site, just add this div around your menu.
I didn't do a check as I don't want to download your CSS etc. But this worked on my project. Here's the code.

<div onMouseover="if (document.all&&!window.opera){document.all('jump_m enu').style.visibility='hidden'};" onMouseout="if (document.all&&!window.opera){document.all('jump_m enu').style.visibility='visible'};">

Don't forget to close your div after your menu table.
Best to ya,
Drummin

[drummin]

Hi Marcie,

In looking closer at your code, I see the the form NAME and select NAME need to be different for the hide code to work. Once I changed them to different names the hide js worked fine.

Regards,
Drummin