Results 1 to 2 of 2

Thread: Drop Down Menus different in IE and FF

  1. #1
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down Menus different in IE and FF

    Hi. I'm creating a website with iWeb. I used dynamic drive codes to create a elementary school website with horizontal drop down menus at the top of the website. The menus look fine on Firefox and Safari, but the entire menu is different on IE. Here's the website address:

    http://nestleweb.com/Welcome_Home.html


    Here is the code I used. Can anyone tell me what's going on with IE? I really don't understand css/html too well.

    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .suckertreemenu ul{
    margin: 1;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #F3F3F3; /*overall menu background color*/
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90x; /*Width of top level menu link items*/
    padding: 5px 20px;
    border: 2px solid black;
    border-center-width: 1;
    text-decoration: none;
    color: blue;
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{ 
    left: 159px; /* no need to change, as true value set by script */
    top: 0;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid #ccc;
    }
    
    .suckertreemenu ul li a:hover{
    background-color: black;
    color: white;
    }
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (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.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>
    <div class="suckertreemenu">
    <ul id="treemenu1">
    <li><a href="http://nestleweb.com/Welcome.html" style="border-left: 1px solid black">Home</a></li>
    <li><a href="http://nestleweb.com/Calendar.html">Calendar</a></li>
    <li><a href="">About Us</a>
      <ul>
    <li><a href="http://nestleweb.com/API.html">Academic Performance</a></li>  
    <li><a href="http://nestleweb.com/Bell_Schedule.html">Bell Schedule</a></li>
      <li><a href="http://nestleweb.com/Location.html">Location</a></li>
      <li><a href="http://nestleweb.com/Mission_Statement.html">Mission Statement</a></li>
      <li><a href="http://nestleweb.com/Policies.html">Policies & Procedures</a></li>
      <li><a href="http://nestleweb.com/Principals_Message.html">Principal's Message</a></li>
        <li><a href="http://nestleweb.com/Teacher_Directory.html">Teacher Directory</a></li>  
      <li><a href="http://nestleweb.com/School_Profile.html">School Profile</a></li>
      <li><a href="http://nestleweb.com/Staff_Directory.html">Staff Directory</a></li>    
    </ul>
    </li>
    <li><a href="">Programs</a>
      <ul>
      <li><a href="http://nestleweb.com/Accelerated_Reader.html">Accelerated Reader</a></li>
     <li><a href="http://nestleweb.com/Arts_Prototype.html">Arts Prototype</a></li>
      <li><a href="http://nestleweb.com/Beyond_the_Bell.html">Beyond the Bell</a></li>  
      <li><a href="http://nestleweb.com/GATE/Information.html">GATE Program</a></li>
      <li><a href="http://nestleweb.com/NASA/NASA_at_NESTLE.html">NASA School</a></li>
      <li><a href="http://nestleweb.com/Gardens.html">Nestle Gardens</a></li>
      <li><a href="http://nestleweb.com/Recycle_Club.html">Recycle Club</a></li>
      <li><a href="http://nestleweb.com/Student_Council.html">Student Council</a></li>
    </ul>
    </li>
    <li><a href="">Parents</a>
      <ul>
      <li><a href="http://nestleweb.com/PTA.html">PTA</a></li>
      <li><a href="http://nestleweb.com/Nestle_Councils.html">Nestle Councils</a></li>
     </ul>
    </li>
    <li><a href="http://nestleweb.com/Students.html">Students</a></li>
    <li><a href="http://nestleweb.com/Library.html">Library</a></li>
    <li><a href="http://nestleweb.com/Cafeteria.html">Cafeteria</a></li>
    <br style="clear: left;" />
    </div>
    
    <p id="iepara"></p>
    Thanks.

  2. #2
    Join Date
    Feb 2009
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    That's IE for you...

    Not to give you any more problems, but the menu's too big in Firefox, on Linux (See attached).

    Cheers,
    X96
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

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
  •