View Full Version : CSS popup menu issues

Dec 19th, 2006, 01:58 PM
Okay, so, I'm working on a css popup menu for cougarrentals.com.
Check out http://www.cougarrentals.com/test2.php
Everything is working like it should be there. (minus png tranparency in ie6)

Now, when I put it in the context of the page, it gets ALL jacked up.
Everything works great in FF. Splendid.

Opera displays the menus way off to the side, so I'm thinking that has something to do with the position being relative to something else?

IE7 displays the menus, just puts them underneath the images below the menu, which makes them useless. The menu is at z-index 1, so that *should* fix it. It doesn't. Go IE.

IE6 however, since it doesn't do :hover with css is run via JS. Now I don't have a true version of ie6 on my computer (ie6 standalone still uses some ie7 libs, and ie6 on linux is closer, but I still can't be certain everything is the same) but from what I can tell the menus pop up like they should, they just don't disappear. That AND it puts the menu under the pictures like ie7. I hate IE.

Any help is greatly appreciated.

Dec 20th, 2006, 02:37 AM
Hi Gidgidonihah
One problem is that you need to add

#menu {
position: relative;

Remember, when you use, properties such as left, right, top, bottom, for an element, these values are with respect to the elements nearest positioned containing block. This is why the #apply element drops out of the menu.

Dec 20th, 2006, 06:42 AM
Okay, thanks. On the full page, that isn't so much the problem as the container is set to relative.

I forgot to post a link to the page I'm having issues with. Oops.

http://www.cougarrentals.com/ is the menu in context where it is problematic. Thanks.

Update: The problem with the menu being underneath the images is fixed.
Now I'm just left with 1 issue.
In opera the menu appears way off to the right.

Dec 20th, 2006, 08:30 AM
I am not exactly an expert in JavaScript.

But as I see it, you have a script that emulates the :hover for the menu list items. This sets a class name 'sfhover' for the LI element in the mouseover state. For the mouseout event it should revert back to normal state. This is taken care of by removing it class name again. Using string pattern matching you want to replace 'sfhover' with the empty string, but with one extra backslash?

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

Instead try:

this.className=this.className.replace(/ sfhover\b/, "");

Dec 20th, 2006, 08:44 AM
koyama, I appreciate your help.

I forgot to state the the JS issue was fixed. I had inadvertently put the JS in an include with the menu and not in the head of the document. That solved the problem.

So now, my only real issue is that in opera the menu doesn't appear where it should.