Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS popup menu issues

    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.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hi Gidgidonihah
    One problem is that you need to add
    Code:
    #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.
    Last edited by koyama; 12-20-2006 at 01:37 AM. Reason: typo

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Gidgidonihah; 12-20-2006 at 07:17 AM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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?

    Code:
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    Instead try:
    Code:
    this.className=this.className.replace(/ sfhover\b/, "");
    Last edited by koyama; 12-20-2006 at 07:43 AM.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •