SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Dropdown menu doesn't work in IE6

    As far as I can tell this should work in IE6, but the drop down menus seen under MY PROFILE, CONTESTS, and CASTING do not show for users in IE6. Can anyone help me out?
    Code:
    <div id="nav">
    	<ul id="nav_ul">
    		<li><a href="/tv">WATCH TELEVISION</a></li>
    		<li><a class="drowdown" href="/user">MY PROFILE</a>
    			<ul>
    				<li><a href="/user">HOME</a></li>
    				<li><a href="/profile/professional">EDIT</a></li>
    				<li><a href="/profile/myprofile">VIEW</a></li>
    				<li><a href="/messages">MESSAGES</a></li>
    				<li><a href="/profile/edit/section/photos">PHOTOS</a></li>
    
    				<li><a href="/blogs/view/user/jhorra">BLOG</a></li>
    				<li><a href="/user/hotlist">HOT lIST</a></li>
    			</ul>
    		</li>
    		<li><a href="/">COMMUNITY</a></li>
    		<li><a href="/user/search">BROWSE</a></li>
    		<li><a class="drowdown" href="#">CONTESTS</a>
    			<ul>
    				<li><a href="/contests/showcontest/contest/1">THE CASTING CALL</a></li>
    				<li><a href="/contests/showcontest/contest/2">AFFILIATE CONTEST</a></li>
    			</ul>
    		</li>								
    		<li><a class="drowdown" href="#">CASTING & MEDIA</a>
    			<ul>
    				<li><a href="#">COMING SOON</a></li>
    			</ul>
    		</li>
    		<li><a href="/corporate/contact">CORPORATE</a></li>
    		<li><a href="/login/register">JOIN</a></li>
    		<li><a href="/login/logout">LOGOUT</a></li>							
    	</ul>
    <br class="clearit">
    </div>
    Here's the CSS
    Code:
    #nav 
    {
    	height:20px;
    	line-height:20px;
    	background:#1e1e1e url(/public/images/site_section_heading_bg.jpg) repeat-x;
    	font-weight:bold;
    }
    .clearit 
    {
    	clear: both;
    	height: 0;
    	line-height: 0.0;
    	font-size: 0;
    }
    #nav_ul, #nav_ul ul 
    {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	font-family: Arial, Helvetica, sans-serif;
    }
    #nav_ul a 
    {
    	display: block;
    	text-decoration: none;
    	padding: 0px;
    	color: #FFE400;
    }
    #nav_ul a.drowdown 
    {
    	padding: 0px;
    }
    #nav_ul li 
    {
    	float: left;
    	padding:0px 15px;
    }
    #nav_ul ul li a  
    {
    	padding:0px;
    }
    #nav_ul li ul 
    {
    	position: absolute;
    	display: none;
    	background:#1e1e1e;
    	height:20px;
    	line-height:20px;
    }
    #nav_ul li:hover a, #nav_ul a:focus,
    #nav_ul a:active, #nav_ul li.li_hover a 
    {
    	color: #FFFFFF;
    }
    #nav_ul li:hover ul, #nav_ul li.li_hover ul 
    {
    	display: block;
    }
    #nav_ul li:hover ul a, #nav_ul li.li_hover ul a 
    {
    	color: #FFE400;
    	background-color: transparent;
    }
    #nav_ul ul a:hover 
    {
    	background-color: transparent!important;
    	color: #FFFFFF!important;
    }
    #nav_ul li
     {
     	width: auto;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 6 will not apply li:hover unless you use a htc file or javascript.

  3. #3
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess the hover should really be on the a instead, if I add this do you think it would work?

    #nav_ul li a:hover ul, #nav_ul li a:hover ul li
    {
    display:block
    }

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    son of suckerfish is the usual answer

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are using an .li_hover class - are you also using the suckerfish javascript to apply this class as behaviours ?

  6. #6
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the javascript I'm using
    Code:
    function P7_ExpMenu()
    { //v1.1.0.2 by PVII-www.projectseven.com
    	if(navigator.appVersion.indexOf("MSIE")==-1)
    		{return;}
    	var i,k,g,lg,r=/\s*li_hover/,nn='',c,cs='li_hover',bv='nav_ul';
    	for(i=0;i<10;i++)
    	{
    		g=document.getElementById(bv+nn);
    		if(g)
    		{
    			lg=g.getElementsByTagName("li");
    			if(lg)
    			{
    				for(k=0;k<lg.length;k++)
    				{
    					lg[k].onmouseover=function()
    					{
    						c=this.className;
    						cl=(c)?c+' '+cs:cs;
    						this.className=cl;
    					};
    					lg[k].onmouseout=function()
    					{
    						c=this.className;
    						this.className=(c)?c.replace(r,''):'';
    					};
    				}
    			}
    		}
    		nn=i+1;
    	}
    }

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using this instead.
    http://www.xs4all.nl/~peterned/csshover.html

    (PS: You don't need the DIV or the clearer class in your code either.)

  8. #8
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured it out, I never actually told the js function to run


Bookmarks

Posting Permissions

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