Forum Moderators: not2easy
I am trying suckerfish dropdown for a website, in all other browsers its working, but in ie6 on hover state main li's (1st level, it has two level menu, 1st level is float left, 2nd level is dropdown) width is increasing, I have fixed the width for li. But its not working.
Please help.
html code
----------------------
<ul id="nav">
<li><a href="index.htm"><img src="images/home_.gif" alt="Home" border="0" /></a></li>
<li style="width:82px;"><a href="our-services.htm"><img src="images/our_services.gif" alt="Our services" border="0" /></a>
<ul class="dropback" style="width:180px;">
<li style="width:180px;padding:0;height:auto;"><a href="our-services.htm" style="width:180px;"><b>Our Services</b></a></li>
<li style="width:180px;padding:0;height:auto;"><a href="waste-paper-collection.htm" style="width:180px;"><b>Waste Paper Collection</b></a></li>
</ul>
</li>
<li><a href="machine-details.htm"><img src="images/mechine-details.gif" alt="Machine Details" width="98" height="40" border="0" /></a></li>
<li><a href="sales-marketing.htm"><img src="images/sales-marketing.gif" alt="Sales & Marketing" width="112" height="40" border="0" /></a></li>
<li style="width:81px;"><a href="enquiry-form.htm"><img src="images/enquiry-form.gif" alt="Enquiry Form" width="81" height="40" border="0" /></a>
<ul class="dropback" style="width:250px;">
<li style="width:250px;padding:0;height:auto;"><a href="enquiry-form.htm" style="width:250px;"><b>Enquiry form</b></a></li>
<li style="width:250px;padding:0;height:auto;"><a href="waste-paper-enquiry-form.htm" style="width:250px;"><b>Enquiry form for waste paper sellers</b></a></li>
</ul>
</li>
<li><a href="career.htm"><img src="images/career.gif" alt="Career" width="44" height="40" border="0" /></a></li>
<li><a href="contactus.htm"><img src="images/contactus.gif" alt="Contact Us" width="67" height="40" border="0" /></a></li>
</ul>
------------------------------
CSS
-------------------------------
<style>
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
width:780px;
background-color:#000000;
height:40px;
padding:0;
z-index:50;
}
#nav ul{
display:none;
}
#nav a, #nav a:hover {
display: block;
text-decoration:none;
}
#nav li {
float:left;
padding:0 17px;
list-style:none;
list-style-type:none;
height:40px;
}
#nav li ul li{
height:30px;
line-height:30px;
width:100%;
z-index:50;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
display:block;
}
.dropback{
background-color:#000;
font:11px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:30px;
height:30px;
}
.dropback a{
color:#fff;
}
.dropback li{
border:#000 1px solid;
padding-left:10px;
}
.dropback a:hover{
background-color:#fff;
color:#000;
}
.dropback2{
background-color:#000;
font:11px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:30px;
height:30px;
}
.dropback2 a{
color:#fff;
}
.dropback2 li{
border:#000 1px solid;
padding-left:10px;
}
.dropback2 a:hover{
background-color:#fff;
color:#000;
}
.dropback{
position:relative;
}
.dropback2{
position:relative;
}
</style>
______________________________________
Javascript
<script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
there's a bit much code there to scan through so sorry you've not got any suggestions before now.
if you're still having the issue, what you need to do is "lift the nested lists out of the flow" - you do that using absolute positioning.
I'm looking for but can't see some rules like this in your code:
#nav li ul {
position: absolute;
display: none; /* or left: -9999px */
}#nav li:hover, #nav li.sfhover {
position: relative;
}#nav li:hover ul, #nav li.sfhover ul {
left: 0;
top: 100%;
display:block;
}
the first rule is the one that makes all the child lists absolutely positioned, the second is making the parent li to these child lists the containing box, so the third rules co-ordinates will work.
sorry not a complete answer, there's possibly a 100% width in there too that will need taken out (or your child lists will be full page width) and you might want to consider using white-space: nowrap; on the child lists to ensure they're only ever as wide as they're widest menu item..
if you're still having issues here can you try post a much smaller sample with the CSS stripped to the basics, it will help us (and you) spot what's there and what's not
<META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=iso-8859-1">
<script>
sfHover = function() {
varsfEls=document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<link href="therma.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<p> </p>
<TABLE WIDTH=800 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR><TD><div align="center"><IMG SRC="images/images/images/head003_01.jpg" WIDTH=149 HEIGHT=116 ALT=""></div></TD><TD><IMG SRC="images/images/images/head003_02.jpg" WIDTH=651 HEIGHT=116 ALT=""></TD></TR><TR><TD><div align="center"><img src="images/images/images/head003_03.jpg" width=149 height=37 alt=""></div></TD><TD><IMG SRC="images/images/images/head003_04.jpg" ALT="" WIDTH=651 HEIGHT=37 border="0" usemap="#Map"></TD></TR>
<map name="Map"><area shape="rect" coords="373,5,479,25" href="mailto:email1"></map>
<br>
<td width="149px" bgcolor="#999999" background="/images/background.gif" valign="top"><font color="#999999"><br></font><font color="#99CCFF"><div id="menu"><font color="#999999">
<div id="nav">
<li><a href="#">main</a></li>
<li><a href="#">Products</a>
<ul><li><a href="#">prod1</a></li><li><a href="#">prod2</a></li>
<li><a href="#">prod3</a></li><li><a href="#">prod4</a></li></ul>
</li><li><a href="#">Installation</a></li><li><a href="#">Applications</a></li><li><a href="#">Warranty</a></li>
</ul></li><li><a href="#">Contact Us</a>
</li></tr></ul></div>
<div id="main"><p>#, ##</p></div>
</BODY>
The CSS File:
"thermaflex CSS"
/* CSS Document*/
<!--[if It IE 7]>
div#demo2LeftDiv { margin-right: -3px;}
div#demo2RightDiv { margin-left : 0px;}
<![endif]-->
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
Vertical-align:top;
text-align: left;
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 149px;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 149px;
}
#nav li ul { /* second-level lists */
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.9;
background:transparent ;
background:#999; filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
opacity:0.8;
position : absolute;
left: -999em;
margin-left : 149px;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 147px;
w\idth : 147px;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : #999999;
border : 1px solid black;
padding : 0 0px;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 149px;
}
#main p{
font-family: arial, helvetica, serif;
font-color: Black;
font-size: 12px;
padding-left: 156px;
}
