...

View Full Version : Links for Suckerfish not working in IE6



web_girl
04-23-2009, 08:21 PM
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

<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


<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


#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;
}

_Aerospace_Eng_
04-23-2009, 09:21 PM
Were you wanting your submenu links to be all on one line?

web_girl
04-23-2009, 11:22 PM
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!

_Aerospace_Eng_
04-24-2009, 12:02 AM
Try this for the CSS

#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.

<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>

web_girl
04-24-2009, 12:08 AM
THANK YOU!

It totally worked...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum