SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sub-Menu won't work right in IE6

    Hi,
    I'm having problems getting a menu and sub-menu working in both IE6 and FireFox. It works perfect in FireFox. In IE6 the sub-menu displays, but when you go to place the mouse over the sub-menu goes away.

    1) The doctype is:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">



    2) A sample page is:
    http://www.alexwenttochina.info/css_help/



    3) Code Specifics - The 'parent' menu is one div, and the sub-menu or child menu is another div. I use a mouseOut and mouseOver to set the dipslay value of the div that contains the sub-menu from 'block' to 'none' to show or not show the menu. Specifically that code is:
    <div id="main1" onMouseOver="document.getElementById('child1').style.display='block'" onMouseOut="document.getElementById('child1').style.display='none'"><a class="sidenav1" href="pictures.php?p=index">Pictures</a></div>
    <div id="child1" onMouseOver="document.getElementById('child1').style.display='block'" onMouseOut="document.getElementById('child1').style.display='none'"><a class="sidenav1" href="pictures.php?p=travel">Travel</a><br/>
    <a class="sidenav1" href="pictures.php?p=shanghai">Shanghai</a><br/>
    <a class="sidenav1" href="pictures.php?p=guilin">Guilin</a><br/>
    <a class="sidenav1" href="pictures.php?p=beijing">Beijing</a><br/>
    </div>



    In IE6 the sub-menu displays, but when you go to place the mouse over the sub-menu goes away. I guess this to execute the mouseOut from the parent div?



    Any help would be GREATLY appreciated!
    Thanks Vmusic

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A quick fix would be to add this:

    Code:
    * html #child1,
    * html #child2,
    * html #child3 {height:1px}
    However I would urge you to look at some unobtrusive semantic menus rather than that very heavy and outdated mouseover call system you are using.

    I also find that menu quite hard to navigate as the menu collapses when you get to the end of the list and leaves you in an awkward position.


    Hope it helps anyway

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well... of course my menus are one below the other - his aren't designed that way so they WON'T WORK for me.....

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    his aren't designed that way so they WON'T WORK for me...
    I was expecting a thank you for the time and effort I spent in finding a fix for your problem. I didn't expect to be SHOUTED at for spending valuable time on this. That is very bad manners

    The menus I pointed to will work vertically with little modification. Basically just removing the position:absolute from the nested lists on hover and putting the sub menus back in the flow would do it.


Bookmarks

Posting Permissions

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