#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    2
    Rep Power
    0

    IE6 issues with CCS drop down menu


    I'm not very well-versed in CSS, but I was asked to use it to create a drop down menu. Apparently IE 6 and CSS drop down menus don't go well together, though. I know IE6 has issues with any kind of :hover, besides a:hover (I'm using li:hover) so that's an issue. Not to mention that :last-child is being used as well (I'm using li:last-child, though I don't fully understand it). Iíve searched online for ways to fix these problems in IE6, but I havenít found anything useful. Does anyone know of a place that explains how to get around these problems? Or if you know yourself, could you explain it in a reply post? Thank you in advance!
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    :hover isn't supported on anything on anything other then <a> in IE6.
    :last-child designates the last element inside of a parent element. As such

    <ul>
    <li>
    <li>
    <li><!--This <li> right here would be :last-child-->
    </ul>

    I don't have a list of links online but there are many workarounds listed on Google..
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    You basically need to add some JavaScript for IE6 (ah, can't wait till it's dead and gone!)

    Two popular methods of dropown are Suckerfish and use of csshover.htc. Search for Suckerfish or csshover in Google, or check out these links:

    Suckerfish Links:

    Suckerfish Update
    Original Suckerfish
    Kravvitz example
    ETC

    CSS Hover:

    CSS Hover Instructions
    CSS Hover Code

    Hope that helpeth.
    Simple is beautiful.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    2
    Rep Power
    0
    Thank you for the replies! Unfortunately, even after trying those links, I'm still having problems >_<

    If it can be of any help, here's my code:

    Code:
    <script type="text/javascript" src="http://globalimb.com/imawitness/cmdHover.js"></script>
    <style type="text/css">
    
    body {text-align:center;}
    
    #header { padding: 5px 0 0; width:900px; height:100px;} 
    #header img { border:none; float:left; padding-right:15px;}
    
    /* Horizontal Navigation Styles */
    #header ul { margin-top:1.7em;}
    #header ul li { float:left; display:block; list-style:none; }
    * html #header ul li { padding:0.8em 0;}
    #header ul li a { padding:0 10px; margin:0 0; text-decoration:none;}
    #header ul li a:hover { color:#4e4e4f; text-decoration:none;}
    #header ul li ul { margin-top:0; margin-left:-100px; position: absolute; left:-999em;}
    * html #header ul li ul { width:400px; margin-left:-150px;}
    #header ul li:hover ul, #header ul li.cmdhover ul { position:absolute; left:auto; padding-top:7px; }
    #header ul li ul li { padding:5px; }
    #header ul li ul li a { display:block; border:none; padding:0.3em 0.3em; text-decoration:none;}
    #header ul li ul li a:hover { color:#4e4e4f; text-decoration:none;}
    #header ul li.active a, #header ul li.active a:hover { color: #4e4e4f; text-decoration:none;}
    /* End of Horizontal Navigation Styles */
    
    a { color:#000000; text-decoration:none;}
    a:hover { color:#333;}
    body.about #content img { padding:0.2em; border:1px solid #069; margin: 0 1em 0.2em 0;} 
    
    
    
    	.style1 {font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight:bold;}
    	
        .style2 {font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;}
    	
    </style>
    
    </head>
    
    <body class="home">
    	<div id="header">
    	  <ul>
          <li class="active"><a href="http://www.yahoo.com" class="style1">Home</a></li>
    
    			<li><a href="http://www.yahoo.com" class="style1">Videos</a>
    				<ul>
    					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
    				</ul>
    			</li>
    		  <li><a href="/dev/about.php" class="style1">Channels</a>
                <ul>
    					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
    			</ul>
    		  </li>
                <li><a href="http://www.yahoo.com" class="style1">Community</a>
                <ul>
    					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
    			  </ul>
    		  </li>
                <li><a href="http://www.yahoo.com" class="style1">Sign In</a>
                <ul>
    					<li><a href="http://www.yahoo.com" class="style2">Consultation</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Dynamic Web</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">E-Commerce</a></li>
    					<li><a href="http://www.yahoo.com" class="style2">Hosting</a></li>
    			  </ul>
    		  </li>
    		</ul>
    </div>

    Please let me know if anyone has any suggestions!
  8. #5
  9. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    And what "problems" are you having? You can't merely say something isn't working: give a browser for us to work with. Why isn't it working do you think? Any markup to go along with it? Is it validated?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo