#1
  1. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    57
    Rep Power
    0

    Suckerfish Dropdown Help


    I'm working on my first suckerfish dropdown for a site. I'm encountering two problems.

    1) There is no background color on the subitems when i select the main item, making them hard to read

    2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Markey Home Remodeling</title>
    <link href="main.css" rel="stylesheet" type="text/css">
    
    <style title="text/css">
    #container {
    	width: 562px;
    	background: #F4ECD9;
    	text-align: left;
    	
    	margin: 0 auto;
    }
    
    
    
    #nav, #nav ul {
    	float: left;
    	width: 562px;
    	list-style: none;
    	line-height: 1;
    	background: EAE3A3;
    	font-weight: bold;
    	padding: 0;
    
    	margin: 0 0 1em 0;
    }
    
    #nav a {
    	display: inline;
    	width: 10em;
    	w\idth: 6em;
    	color: #7C6240;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
    
    #nav li {
    	float: right;
    	padding: 0;
    	width: 10em;
    	
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w\idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    	
    	}
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    	
    }
    
    #nav li ul a {
    	width: 13em;
    	w\idth: 9em;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    	}
    
    #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 {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: white;
    }
    
    
    </style>
    
    
    <script type="text/javascript">
    
    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>
    
    
    </head>
    
    <body>
    
    <table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      
      <tr>
        <td height="20" width="562" class="leftnav">
    
    <div id="container">
    
    <ul id="nav">    
     
      <li><a href="#">SIDING</a></li>  
     
     <li><a href="#">GUTTERS</a></li> 
     
     
      <li><a href="#">BASEMENTS</a></li>  
    
    <li><a href="#">WINDOWS</a>         
      <ul>
      <li><a href="#">300 Series</a></li>  
      <li><a href="#">900 Series</a></li> 
      <li><a href="#">Sliding</a></li>
      <li><a href="#">Bay and Bow</a></li>
     </ul>     
     </li>     
    
      
    <li><a href="#">DOORS</a>         
      <ul>
      <li><a href="#">Entry</a></li>  
      <li><a href="#">Patio</a></li> 
      <li><a href="#">Garage</a></li> 
      </ul>     
    </li>         
      
    </ul>
    
    </div></td>
      
        <td class="rightnav">
    	
    	<div id=linkstyles>   &nbsp;   <a href="#">HOME</a>   &nbsp;   <a href="#">CONTACT US</a>
    	</div></td></tr>
      
      <tr>
        <td>
    	
    	<table width="562" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="images/mainimage.jpg"></td>
      </tr>
      <tr>
        <td><div align="center"><img src="images/whychoose.jpg"></div></td>
      </tr>
      <tr><td>
      
      <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
      <tr>
        <td width="50%">REPUTATION: A proven track record with thousands of 
    delighted customers.
    <br><br>
    QUALITY: The highest quality products, the best trained 
    window installers
    *all A.W.D.I. (American Window and Door Installed) Certified.
    <br><br>
    PRICE: The lowest prices on the highest quality 
    brand-name products. Period.
    <br><br>
    Factory Authorized Distribution, Factory Trained 
    Employees.
    <br><br>
    Qualified, Courteous Salespeople treat you with 
    professionalism and respect.
    </td>
        <td width="355">&nbsp;</td>
      </tr>
    </table>
    
      
      </td></tr>
    </table>
    
    	
    	</td>
    	<td valign="top" width="100%"  class="mainrighttable">
    	<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
      <tr>
        <td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
      </tr>
      <tr>
        <td>
    	
    	<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
      <tr>
        <td>Our business has always been family owned 
    and operated.  For more than 27 years, we 
    have served our community with pride and 
    integrity. Years ago, the best craftsmen always 
    put their names on their work.
    <br><br>
    We still do.</td>
      </tr>
    </table>
    </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    	
    	<span class="style1"></span></td>
      </tr>
      
    </table>
    
    </body>
    </html>
    Thanks for your help
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1)
    Code:
    background: EAE3A3;
    should be
    Code:
    background: #EAE3A3;
    2) IE doesn't handle left:auto and top:auto correctly. I suggest you give position:relative to "#nav li" and change the left:auto to left:0 in the li:hover rule.

    Comments on this post

    • beardo agrees : Thanks dude - you saved me pulling the rest of my hair our!
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo