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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS drop-down menu problems in Moz

    Hi, all.

    Small problem buring a redesign: I'm moving all of our menu info from hard-coded table layout to a CSS-styled list, complete with drop-down function via sucker fish.

    So far it's all systems go in IE. However, when I test in FF, the hover which keeps the second list displayed seems to go false when I mouse over part of the menu which covers a DIV below it. This only happens when the DIV being covered contains a link, and I do not have to mouse over the link itself to cause the error.

    A quick description of how I have this set up: I have a DIV called holder; inside that, I have one called nav that contains the menu lists and is absolutely positioned and has a z-index of 1000. I then have a div called content that holds all of my other divs; content is absolutely positioned with a z-index of 1.

    When the menu drops down over the divs in content, I can mouse down over the menu options all the way to the end if the div in content I'm moving over has no a links. If it does, the menu dissapears as soon as the mouse enters the div with the links.

    The site is current on our test server on our LAN, so I can't post a link to it, but I can copy/past most of the code here: The menu itself:
    Code:
    <ul id="nav">
    <li><a href="/default.asp">Home</a>
    <ul>
    <li><a href="#">Stuff 1</a></li>
    <li><a href="#">Stuff 2</a></li>
    <li><a href="#">Stuff 3</a></li>
    <li><a href="#">Stuff 4</a></li>
    </ul>
    </li>
    <li><a href="/members/default.asp">Members</a>
    <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Upcoming events</a></li>
    <li><a href="#">Etc.</a></li>
    </ul>
    </li>
    </div>
    The styles:
    Code:
    #navigation{
    background-image: url('../images/header.jpg');
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #999966;
    position: absolute;
    top: 66px;
    margin: 0px;
    width: 100%;
    height: 58px;
    padding: 0px;
    z-index: 1000;
    }
    
    #navigation ul{
    margin: 0px;
    padding-top: 35px;
    padding-left: 0px;
    margin-left: 5px;
    list-style-type: none;
    text-align: left;
    }
    
    #navigation li{
    float:left;
    position: relative;
    margin-right: 8px;
    padding: 0px;
    height: 25px;
    }
    
    #navigation li ul{
    list-style-type: disk;
    display: none;
    position: absolute; 
    top: 25px;
    left: -1px;
    margin: 0px;
    padding: 0px;
    width: 135px;
    background-color: #999966;
    border: solid 1px #000000;
    border-top: 0px;
    }
    
    #navigation li ul li{
    float: none;
    padding: 0px;
    margin: 0px;
    }
    
    #navigation li:hover ul{
    display: block;
    }
    
    #navigation li.over ul{
    display: block;
    }
    
    #navigation a, #navigation li.current a{
    padding-left: 7px;
    padding-right: 7px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 8pt;
    }
    
    #navigation li.current{
    background-image: url("../images/main_style_images/nav_right_corner.gif");
    background-repeat: no-repeat;
    background-position: top right;
    }
    
    #navigation li.current a{
    background-image: url("../images/main_style_images/nav_left_corner.gif");
    background-repeat: no-repeat;
    background-position: top left;
    color: #000000;
    text-decoration: none;
    }
    
    #navigation li.current ul{
    background-color: #ffffff;
    border: solid 1px;
    border-top: 0px;
    }
    
    #navigation li li a:hover{
    color: #000000;
    }
    
    #navigation li.current li a{
    background-image: none;
    color: #000000;
    }
    
    #navigation a{
    padding-top: 5px;
    display: block;
    }
    
    #content{
    position: absolute;
    top: 143px;
    width: 800px;
    margin: 0px;
    padding: 0px;
    background-color: #ffffff;
    z-index: 1;
    clear: left;
    }
    
    /*one of the divs causing trouble*/
    #multimedia{
    border: solid 1px;
    position: absolute;
    width: 500px;
    margin: 0px 10px 10px 00px;
    padding: 10px;
    height: 300px;
    overflow: auto;
    text-align: left;
    }
    That last div contains a few links. That's all.

    I'm not sure what the problem is - I've set the z-index and clear:left 'ed the content. Anyone have a guess as to what the issue might be?

    Any replies greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Posts
    195
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try these (multi-level) menus, they work better cross-browser, forget suckerfish for a moment (good explanations too):

    <http://www.aplus.co.yu/adxmenu/examples/ >
    Last edited by _com; 08-24-2005 at 07:10 PM.

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, _com. Those menus seem to have a similar problem, except with IE. When I try them in IE and open a menu that extends down over the footer with the link, the menu vanishes.

    I'll have to take a little time to read through that site and see what their approach is, but in the meantime I'd still like to find out what is wrong with my code, if anyone has any ideas. Thanks!

  • #4
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ~bump~

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you have troubles with that? Check the instructions. If that fails, drop me a comment, and I will help, but only if you:

    1. use standard-compliant browser mode
    2. validate your HTML
    3. post an example URL

    You don't know what the first two means? Well, I honestly think you will have too much problems with all this stuff, especially in Internet Explorer. Please learn, and then come back.
    Author states it well. Got a proper doctype?
    CATdude about IE6: "All your box-model are belong to us"

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using some of the provided links, I was able to find these:

    http://www.aplus.co.yu/adxmenu/examples/netymology/
    http://www.aplus.co.yu/adxmenu/examples/netymology-hs/


    Now, if I could get the categories to be in 2 vertical panels like our original home page, and then have the dropdowns open towards the middle...


    That, or maybe I'll rethink the entire site design.

    hmmmm.

    Thanks, keep the info coming...

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Holden1
    Using some of the provided links, I was able to find these:

    http://www.aplus.co.yu/adxmenu/examples/netymology/
    http://www.aplus.co.yu/adxmenu/examples/netymology-hs/


    Now, if I could get the categories to be in 2 vertical panels like our original home page, and then have the dropdowns open towards the middle...


    That, or maybe I'll rethink the entire site design.

    hmmmm.

    Thanks, keep the info coming...

    Oops. Sorry, I meant to put this reply over here:

    http://www.codingforums.com/showthre...722#post348722


    I must have been nosing around in this thread, and forgot that it wasn't the one I started. I'll move the reply over there manually. Thanks and sorry.

  • #8
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, MrRuben5.

    I've got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> as my doc type declaration, and my HTML is validating in my devl application (Homesite 5). I can't post up a URL as the site is currently running from my test server on our LAN (I don't want to put it out on our real server till I remove some of our more sensitive info).

    I also have found that this behavior is not always constant - the site is currectly very sparse, but there appear to be only to DIVs which have this effect. Other DIVs (even those with links within them) do not cause this.

    The styles for the two offenders are:
    Code:
    #news_box{
    position: absolute;
    left: 525px;
    text-align: right;
    margin-left: 10px;
    padding: 0px;
    width: 250px;
    height: 275px;
    overflow: hidden;
    }
    
    #news_box a{
    font-size: 8pt;
    }
    
    #news_box_content{
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    height: 235px;
    overflow: auto;
    text-align: left;
    }
    
    #news_box_content a{
    color: #004584;
    font-size: 8pt;
    text-decoration: none;
    }
    	
    #news_box_content a:hover{
    text-decoration: underline;
    }
    
    #news_box h1{
    margin-bottom: 0px;
    padding-left: 10px;
    border-bottom: solid 1px #000000;
    background-color: #3399CC;
    color: #ffffff;
    font-size: 12pt;
    text-align: left;
    }
    
    #news_box_content p{
    text-align: left;
    color: #662426;
    font-size: 8pt;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 0px;
    margin-top: 15px;
    }
    
    #multimedia{
    border: solid 1px;
    position: absolute;
    width: 500px;
    margin: 0px 10px 10px 00px;
    padding: 10px;
    height: 300px;
    overflow: auto;
    text-align: left;
    }
    
    #multimedia img{
    float: left;
    width: 250px;
    margin-right: 20px;
    }
    
    #multimedia h1{
    font-size: 12pt;
    color: #662426;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 0px;
    }
    Anyone have any idea why this might be happening?

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by japangreg
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    A DTD without url will force browsers to go in quirks mode also.

    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    You need the above.
    CATdude about IE6: "All your box-model are belong to us"

  • #10
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, MrRuben5. That had the effect of completely destroying my layout in IE; but, it is still okay in FF, so I must be doing something right.

    However, the menu bug still continues; if no one can figure this out from my description and code examples, I'll try to get an example up on a server somewhere soon.

    Thanks for the help so far!

  • #11
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Obviously you like to have IE to be in what we call "quirks mode". Put a comment at the top of your page, then the doctype underneath that. Anything before the doctype will throw IE into quirksmode, while it doesn't for others.

    If you develop in XHTML you can put a xml prolog instead of a comment in there and it will still be quirks mode for IE. (Yeah most of us here use xhtml)

    Hope that helps.
    CATdude about IE6: "All your box-model are belong to us"

  • #12
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quirks mode is just easier, as it lets me be a bit sloppy in my work. I'm trying to get myself into the habit of using web standards, so I'll try to rework it with the correct doctype declaration. Thanks again, MrRuben5.

    Still working on the drop down issue though - as always, any insight is appreciated.

  • #13
    New Coder
    Join Date
    Sep 2002
    Location
    Washington, DC
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...one last bump...

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    don't forget taht with Suckerfishes menu, you need to include his small amount of JS otherwise it won't work in IE.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...Well we'd really have to see more of your code to help you.
    Quote Originally Posted by bazz
    don't forget taht with Suckerfishes menu, you need to include his small amount of JS otherwise it won't work in IE.

    Bazz
    japangreg said it worked fine in IE
    CATdude about IE6: "All your box-model are belong to us"


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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