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.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Links for Suckerfish not working in IE6

    I've tried all the fixes and still nothing works in IE6. My nav is out of alignment and not even the links work. I followed the Suckerfish tut. to no avail. If anyone has any insight that would be awesome.

    This is the HTML
    Code:
    <ul id="main_nav">
    <li id="home" class="nav"> <a class="top_menu" href="index.html">home</a></li>
    <li id="projects" class="nav" ><a class="top_menu" id="projects_dropdown"  href="#">projects</a> 
    	<ul id="projects_subnav">
        	<li id="new_construction" class="sub_menu"><a href="qdc.html">brand new construction</a></li>
            <li id="redesign" class="sub_menu"><a href="ch.html">redesign</a></li>
        </ul>
    </li>
    <li id="about"  class="nav"><a class="top_menu" href="about.html">about</a></li>
    </ul>
    </div>
    In the <head> i have added the IE Javascript fix
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("main_nav");
    		for (i=0; i<main_navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    Here is the CSS
    Code:
    #main_nav .nav a{
    	text-indent: -9999em;
    	}
    
    #main_nav li a {
    	background-image:url(../images/sprite.jpg);
    	position: relative;
    	margin-left: 25px;
    	float:left;
    	display: inline;
    	zoom:1;
    	}	
    
    #home a{
    	height: 35px; width: 55px;
    	background-position: -450px 0;
    }
    #home a:hover{
    	background-position: -450px -36px;
    	}
    #home_page #home a{background-position: -450px -36px;
    	}	
    	
    #projects #projects_dropdown{
    	height: 35px; width: 72px;
    	background-position: -520px 0;}
    #projects #projects_dropdown:hover{
    	background-position: -520px -36px;
    	}
    #project_page #projects_dropdown {background-position: -520px -36px;}	
    	
    #about a{
    	height: 35px; width: 55px;
    	background-position: -602px 0;}
    #about a:hover{
    	background-position: -602px -36px;
    	}	
    	
    #about_page #about a{background-position:-602px -36px;
    	}	
    /*************************************************************************DROPDOWN MENU***********************************************/	
    #projects ul{display: none;}
    #projects:hover ul, #projects.over ul{display:block;
    	clear: left;
    	}
    
    #projects_subnav li{
    	float: none;
    	background-color: #CCCCCC
    	color: #333;
    	}
    
    #projects_subnav a:hover{
    	color:#339999;
    	text-decoration: none;
    	}
    li ul a{ position: absolute;  left: 750px; top: 27px;}
    
    li ul  {
      display: none;
      position: absolute; 
      top: 0.5em;
      left: 0;
      }
      	
    #new_construction a{
    	height: 26px; width: 135px;
    	background-position: 0 -288px;
    	}
    	
    #new_construction a:hover{
    	background-position: 0 -314px;
    	}
    #redesign a{
    	height: 26px; width: 135px;
    	background-position: -143px -288px;	
    	}
    #redesign a:hover{
    	background-position: -143px -314px;
    	}

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Were you wanting your submenu links to be all on one line?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No they should be on top of each other.
    it works in FF

    in IE7 it tries to go in one line.
    in IE6 they don't show up at all!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for the CSS
    Code:
    #main_nav, #main_nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #main_nav .nav a{
    	/*text-indent: -9999em;*/
    	}
    #main_nav li {
    	float:left;
    	position:relative;
    	margin-left: 25px;
    	display: inline;
    }
    #main_nav li ul li {
    	float:none;
    }
    #main_nav li a {
    	background-image:url(../images/sprite.jpg);
    	display:block;
    	}	
    
    #home a{
    	height: 35px; width: 55px;
    	background-position: -450px 0;
    }
    #home a:hover{
    	background-position: -450px -36px;
    	}
    #home_page #home a{background-position: -450px -36px;
    	}	
    	
    #projects #projects_dropdown{
    	height: 35px; width: 72px;
    	background-position: -520px 0;}
    #projects #projects_dropdown:hover{
    	background-position: -520px -36px;
    	}
    #project_page #projects_dropdown {background-position: -520px -36px;}	
    	
    #about a{
    	height: 35px; width: 55px;
    	background-position: -602px 0;}
    #about a:hover{
    	background-position: -602px -36px;
    	}	
    	
    #about_page #about a{background-position:-602px -36px;
    	}	
    /*************************************************************************DROPDOWN MENU***********************************************/	
    #projects ul{display: none;}
    #projects:hover ul, #projects.over ul{display:block;
    	clear: left;
    	top:35px;
    	left:0;
    	}
    
    #projects_subnav li{
    	float: none;
    	background-color: #CCCCCC;
    	color: #333;
    	}
    
    #projects_subnav a:hover{
    	color:#339999;
    	text-decoration: none;
    	}
    
    li ul  {
      display: none;
      position: absolute; 
      width:400px;
      top: 1em;
      left: 0;
      }
      	
    #new_construction a{
    	height: 26px; width: 135px;
    	background-position: 0 -288px;
    	}
    	
    #new_construction a:hover{
    	background-position: 0 -314px;
    	}
    #redesign a{
    	height: 26px; width: 135px;
    	background-position: -143px -288px;	
    	}
    #redesign a:hover{
    	background-position: -143px -314px;
    	}
    I've added some stuff to reset some margins and I made it so the links in the submenu aren't floated. Use this for the JS. You had a js error stopping it from working in IE6.
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("main_nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    web_girl (04-23-2009)

  • #5
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    THANK YOU!

    It totally worked...


  •  

    Posting Permissions

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