SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Menu Falling Off in IE

    I am a newbie to Sitepoint, and relatively new to CSS and JS. I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The menu looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. But if you scroll really slow, they stay up. Any idea of a fix? I am trying to avoid re-doing the whole thing.

    Both the CSS and the HTML are below. The site is computerdepot-online.net

    Code:
    .vertmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 15px Verdana;
    width: 220px; /* Main Menu Item widths */
    }
     
    .vertmenu ul li{
    position: relative;
    }
     
    /* Top level menu links style */
    .vertmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 5px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    }
     
    .vertmenu ul li a:link, .vertmenu ul li a:visited, .vertmenu ul li a:active{
    background-color: #3266cc; /*background of tabs (default state)*/
    }
     
    .vertmenu ul li a:visited{
    color: white;
    }
     
    .vertmenu ul li a:hover{
    background-color: #7c1d1d;
    }
     
    /*Sub level menu items */
    .vertmenu ul li ul{
    position: absolute;
    width: 220px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }
     
    .vertmenu a.subfolderstyle{
    background: url(right.gif) no-repeat 97% 50%;
    }
     
     
    /* Holly Hack for IE \*/
    * html .vertmenu ul li { float: left; height: 1%; }
    * html .vertmenu ul li a { height: 1%; }
    /* End */
    Code:
    <div class="vertmenu">
    
    <ul id="vertmenu1">
    <li class="page_item page-item-2 current_page_item"><a href="http://www.computerdepot-online.net" title="Main Page">Main Page</a></li>
    <li class="page_item page-item-22"><a href="http://www.computerdepot-online.net/our-services/" title="Our Services">Our Services</a>
    <ul>
    	<li class="page_item page-item-101"><a href="http://www.computerdepot-online.net/our-services/virusspywaremalware-removal/" title="Virus/Spyware/Malware Removal">Virus/Spyware/Malware Removal</a></li>
    	<li class="page_item page-item-106"><a href="http://www.computerdepot-online.net/our-services/home-wireless-networking/" title="Home Wireless Networking">Home Wireless Networking</a></li>
    	<li class="page_item page-item-110"><a href="http://www.computerdepot-online.net/our-services/data-recovery/" title="Data Recovery">Data Recovery</a></li>
    	<li class="page_item page-item-112"><a href="http://www.computerdepot-online.net/our-services/hardware-upgrades/" title="Hardware Upgrades">Hardware Upgrades</a></li>
    
    	<li class="page_item page-item-116"><a href="http://www.computerdepot-online.net/our-services/laptop-repair/" title="Laptop Repair">Laptop Repair</a></li>
    </ul>
    </li>
    <li class="page_item page-item-8"><a href="http://www.computerdepot-online.net/newsletter/" title="Our Newsletter">Our Newsletter</a></li>
    <li class="page_item page-item-10"><a href="http://www.computerdepot-online.net/testimonials/" title="Testimonials">Testimonials</a>
    <ul>
    	<li class="page_item page-item-55"><a href="http://www.computerdepot-online.net/testimonials/share-your-opinion/" title="Share Your Opinion">Share Your Opinion</a></li>
    </ul>
    </li>
    <li class="page_item page-item-71"><a href="http://www.computerdepot-online.net/audio-testimonials/" title="Audio Testimonials">Audio Testimonials</a></li>
    
    <li class="page_item page-item-5"><a href="http://www.computerdepot-online.net/latest-news/" title="Latest News">Latest News</a></li>
    <li class="page_item page-item-47"><a href="http://www.computerdepot-online.net/request-contact/" title="Request Contact">Request Contact</a></li>
    <li class="page_item page-item-121"><a href="http://www.computerdepot-online.net/make-an-appointment/" title="Make An Appointment">Make An Appointment</a></li>
    <li class="page_item page-item-39"><a href="http://www.computerdepot-online.net/our-warranty-policy/" title="Our Warranty Policy">Our Warranty Policy</a></li>
    <li class="page_item page-item-67"><a href="http://www.computerdepot-online.net/about-us/" title="About Us">About Us</a>
    <ul>
    	<li class="page_item page-item-84"><a href="http://www.computerdepot-online.net/about-us/the-business/" title="The Business">The Business</a></li>
    	<li class="page_item page-item-86"><a href="http://www.computerdepot-online.net/about-us/map-and-directions/" title="Map and Directions">Map and Directions</a></li>
    
    	<li class="page_item page-item-89"><a href="http://www.computerdepot-online.net/about-us/contact-us/" title="Contact Us">Contact Us</a></li>
    </ul>
    </li>
    </ul></div>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you have the dropdown happening in JS (which it looks like considering your CSS contains nothing to do a dropdown) then you need the JS section . I'll ask for a move.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. I was wondering if the problem was in my CSS. I keep seeing things about hover problems in IE. Do you think the issue is with my JS?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I would think so considering the actual dropdown isn't even done in JS, although I only looked at the code you posted, nothing else. So if you left off an important portion of CSS then...

    Although I am pretty confident it is JS .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Nope, didn't leave off any big CSS. Just strange that it works fine in everything except IE. Should I repost in JS forum?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I've asked for a move so just sit tight for a little bit and it will get moved . I'll pm another moderator (whose actually on )
    PS-If something is working in other browsers, but not IE, don't think that's strange
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Thread moved... can you post your JS so we can have full info of what's going on? Thanks

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone.

    Here is the JS.
    Code:
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["vertmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
    
    function initvertmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initvertmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initvertmenu)

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    I don't see anything particularly wrong in the code but I will have a closer look to this when I return from work.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Would you be open to the idea of finding a new script?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. I did jump to a new script, and went with the superfish script here - http://users.tpg.com.au/j_birch/plugins/superfish/

    It works, except for IE6.

    Also, I can't get the arrows to show up. Anyone have any ideas?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mattbaehr View Post
    Thanks everyone. I did jump to a new script, and went with the superfish script here - http://users.tpg.com.au/j_birch/plugins/superfish/

    It works, except for IE6.

    Also, I can't get the arrows to show up. Anyone have any ideas?
    The demo works for me on IE6.

    Perhaps it's something to do with the changes that you're made?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,711
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you are using multiple IEs to replicate IE6, hen it won't work because that is a very broken program.

    If you are using IE6, then something is amiss on your end because it works for us
    As to the arrows, you set an indicator class for it, however nowher in your HTML can that class be found?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PMW57 - The only changes I made were to colors in the CSS. That shouldn't cause the problem.

    RyanReese - I only have one instance of IE on one machine that I am testing on. My site works for you in IE6?

    I will check on the class for the arrows. Thanks.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mattbaehr View Post
    PMW57 - The only changes I made were to colors in the CSS. That shouldn't cause the problem.
    What I see on your site is that $ isn't defined. jQuery needs to be loaded before the superfish script.

    Off Topic:

    (super-patiently waiting for hiccups to go away without making use of typical solutions)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. That last hint did the trick. Evidently wordpress needs the no conflict line in there when initializing the script.

    Code:
    <!-- initialise Superfish -->
    <script type="text/javascript"> 
     var $j = jQuery.noConflict();
         $j(document).ready(function(){ 
            $j("ul.sf-menu").superfish({ 
                animation: {height:'show'},   // slide-down effect without fade-in 
                delay:     1200,              // 1.2 second delay on mouseout 
                autoArrows: true,
                dropShadows: false
            }); 
        }); 
     
    </script>
    Now it works like a champ.


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
  •