SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    569
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul OB's Drop Down Menu, Not Working In IE.

    Hi

    I made slight modification to one of Paul OB's drop down menu, by adding an id before every block of css code see below. The reason for doing this was it was conflicting with other list items within my stylesheet.

    Code:
    #navholder{
    	border-right:1px solid #fff;
    	border-left:1px solid #fff;
    	font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    	height:3em; 
    	text-align:center;
    	background:url(images/navbg.jpg);
    	margin:0 auto;
    	width:770px;
    }
    #navholder ul,li{
    	margin: 0;
    	padding: 0;
    	list-style: none ;
    }
    
    #navholder ul li{
    	float: left;
    }
    #navholder li ul{
    	position: absolute;
    	left: auto; 
    	top:auto;
    	margin-top: 2.2em;
    	display: none;
    }
    	
    /* Styles for Menu Items */
    #navholder ul li a{
    	border-right:1px solid #f16222;
    	border-left:1px solid #fab974;
    	display: block;
    	text-decoration: none;
    	color: #fff;
    	background: transparent; /* IE6 Bug */
    	margin:10px 0 10px 0;
    	padding:0 8px 0 9px;
    	float:left;
    }
    #navholder li a.last{
    	border-right:none;
    	border-left:1px solid #fab974;
    }
    #navholder li a.active{
    	background:url(images/bground-nav-active.gif) #fab974 no-repeat center top;
    }
    
    
    /* drop down menu \*/ 
    #navholder li ul{background:#f58220;}
    #navholder li ul li{float:none;border-bottom:1px solid #fab974;white-space:nowrap;}
    #navholder li ul a{float:none;border:none;position:relative;margin:0 0 0 0;}
    
    /* commented backslash mac hiding hack \*/ 
    * html #navholder ul li{position:relative;}	
    * html #navholder li ul {left:0;top:0;}
    * html #navholder ul li a{height:1%;}
    * html #navholder li ul li a {
    	margin-left:-16px;
    	height:auto;
    	ma\rgin-left:0;
    	voice-family: "\"}\""; voice-family:inherit; 
    }
    * html #navholder li ul li a{height:1px;	width:1px;he\ight:auto;w\idth:auto}
    /* end hack */ 
    
    /* this sets all hovered lists to red */
    #navholder li:hover a, li.over a,
    #navholder li:hover li:hover a, li.over li.over a
    {
       color: #fff;
       background-color: #fab974;
       text-align:left;
    }
    
    /* set dropdown to default */
    #navholder li:hover li a, li.over li a
    {
    	color: #fff;
    	margin-top:0;
       background-color: #f58220;
    }
    #navholder li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    
    #navholder ul li:hover ul, ul li.over ul{
    	display: block;
    }
    #navholder ul#nav li#homeiconhome {
    	border-left:none;
    	border-right:1px solid #f16222;
    	display: block;
    	margin:10px 0 10px 0;
    	padding:0 8px 0 9px;
    	width:30px;
    	text-align:center;
    }
    #navholder ul#nav li#homeicon a {
    	border-left:none;
    	border-right:1px solid #f16222;
    	width:30px;
    	text-align:center;
    }
    #navholder ul#nav li#homeicon a:hover {
    	background:url(images/icon-home.gif) #fab974 no-repeat 43% 33%;
    	width:30px;
    	text-align:center;
    	text-indent:-999px;
    }
    This works in FF but not IE, here is the javascript that goes with the css

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    And below is an example of the HTML used for the navigation.

    Code:
    <div id="navholder">
    <ul id="nav">
    
    <li><a href="link.htm">Link 1</a>
    <ul>
    <li><a href="link.htm">Link 2</a></li> <li><a href="link.htm">Link 3</a></li>
    </ul>
    </li>
    </div>
    Hope someone can help as I really need to crack this today.

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Italy
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    try changing this in the javascript

    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    var sfEls = document.getElementById("navholder").getElementsByTagName("LI");

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    569
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry should of said I have already tried that, does not work thanks for the reply though!

  4. #4
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    569
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Anyone got a solution to this, really need to get this sorted, I have been trying all day!

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    569
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I have changed is putting the id "navholder" before all classes, as not to conflict with other list item classes I have.........


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
  •