SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS hover menu, form select, IE6 bug, ok elsewhere ...

    Hi friends

    I was working on a CSS hover menu, and though it seems to be working elewhere, IE6 is giving a problem. The problem is -



    As you can see, the hover menu is going behind the select dropdowns.

    The concerned CSS is -
    Code CSS:
    /* CSS Document */
    #nav {
    	position: absolute;
    	background: #FFF;
    	border: 1px; /* borders the bottom of the top nav */
    	border-width: 1px 0;
    	margin-left: -439px;
    	}
     
    .button {
    	width: 30px;
    	float: left;
    	}
     
    .parent {
    	position: relative; 
    	}
     
    .floatfix {margin-right: -3px;}
     
    .dropdown { /* rules for dropdown div */
    	width: 250px;
    	position: absolute;		
    	left: -3000px;
    	top: auto; /* puts dropdowns directly under top nav */
    	text-align: left; /* needed because IE misapplies text centering to boxes */	
    	background: url(intranet/img_intranet/bgfix.gif);
    	}
     
    .dropdown div {
    	width: 220px;
    	position: absolute;		
    	left: -3000px;
    	top: 0;  
    	background: url(intranet/img_intranet/bgfix.gif);
    	text-align: left; /* needed because IE misapplies text centering to boxes */
    	}
     
    .dropdown ul { 
      width: 255px; /* tweaked so that dropdowns appear to "line up" with top links */
      margin: 0 30px 30px 10px; /* creates "sticky hovering" zones for dropdowns */
      padding-top:25px;
      padding-bottom:15px;
      } /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */
     
    .dropdown div ul {margin: 30px 30px 30px 0px;} /* creates "sticky hovering" zones for flyouts */
     
    .four .dropdown ul {width: 255px;} /* modifies width for rightmost "visible" dropdown (tweak) */
     
    .four .dropdown div ul {margin: 30px 0 30px 30px; position: relative;} /* rule reversal for "visible" right drop flyouts */
     
    #nav li {text-align: left;}
     
    #nav a {
      display: block;
      color: #0071BD;
    	font-weight: normal;
    	font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	text-decoration: none;
    	padding: 0px 0px 0px; 
    	border-right: 1px solid #FFF;  /* makes the dividers between the top nav links */
    	}
     
    #nav a:hover {
    	text-decoration: underline;
    	color: #D02890;
    	}
     
    .four a {border-right: 0;} /* kills right border on last top link */
     
    #nav ul ul a {
      color: #0071BD;
      border-right: 0; /* negates right border for dropdowns and flyouts */
      border-bottom: 1px solid #FFF;  /* borders the bottoms of the dropdown and flyout links */
      }
     
    .dropdown li {
      position: relative; 
      vertical-align: bottom; /* IE5/win bugfix */
      padding-left:15px;
      }
     
    .parent:hover, .parent.sfhover {background-image: url(intranet/img_intranet/bgfix.gif);} 
     
    .parent:hover div.dropdown, .parent.sfhover div.dropdown {left: -11px;} /* hover rule for dropdowns */ 
     
    .dropdown li:hover div, .dropdown li.sfhover div { /* hover rule for flyouts */
    	left: 180px; /* this value controls the amount of flyout "overlap" */
    	top: -26px; /* this value controls the amount of flyout vertical offset */
    	}
     
    .four li:hover div, .four li.sfhover div { /* reversed flyout rules for rightmost drop flyouts */
    	left: -210px; 
    	top: -26px;
    	}
     
    #nav div.mini-zone { /* special hover zone that covers the "danger corner" */
      padding: 0;
      width: 15px;
    	height: 15px; 
    	font-size: 1px;
    	left: -3000px;
    	bottom: -15px;
    	top: auto;	
    	background: url(intranet/img_intranet/bgfix.gif);
    	}
     
    #nav .dropdown li:hover div.mini-zone, #nav .dropdown li.sfhover div.mini-zone { /* hover rule for mini-zones */
    	left: auto;
    	right: 8px;
    	top: auto;
    	}
     
    #nav .four li:hover div.mini-zone, #nav .four li.sfhover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */
    	left: 8px;
    	}
     
    #nav ul { list-style-type:none; }
     
    /*XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX*/
     
    .one ul {border-left:1px solid #FAB909;}
    .one li {background-image:url(intranet/img_intranet/icone_o.gif);background-repeat: no-repeat;}
    .two ul {border-left:1px solid #175CCC;}
    .two li {background-image:url(intranet/img_intranet/icone_n.gif);background-repeat: no-repeat;}
    .three ul {border-left:1px solid #009933;}
    .three li {background-image:url(intranet/img_intranet/icone_m.gif);background-repeat: no-repeat;}
    .four ul {border-left:1px solid #D02890;}
    .four li {background-image:url(intranet/img_intranet/icone_p.gif);background-repeat: no-repeat;}
    .parent ul {
      background: #FFF;
      margin-left:20px;
      padding-left:20px;
      text-indent:5px;
      list-style-type: none;
    }
    .parent ul li {background-position: left center;}
     
    .dropdown div ul {background: #eda;} /* colors BG of flyouts */ 
    .dropdown div ul a {color: #400;} /* colors text of  flyouts */ 
     
    #nav img {
      border: 0 none;
      display: block;
    }
    /*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/
     
    .one {z-index: 10;}
    .two {z-index: 20;}
    .three {z-index: 30;}
    .four {z-index: 40;}
    .four:hover, .four.sfhover {z-index: 20;}
     
    * html .button .dropdown li {
    height: 1%;
    margin-left: -16px;
    margin-left: 0;
    }
    /* */
     
    * html #nav a
     {height: 1%;}
     
    .brclear { /* Use a break with this class to clear float containers */
    clear:both;
    height:0;
    margin:0;
    font-size: 1px;
    line-height: 0;
    }
     
    .Style1 {font-size: 8px}

    The concerned hover is getting called in html as -

    Code HTML4Strict:
    <div id="nav">
    	<ul>
    		<li class="button">
    			<div class="parent three">
    				<a href="#">
    					<img src="img_intranet/icone_m.gif" height="9" width="9" alt="" />
    				</a>
    				<div class="dropdown">
    					<img src="img_intranet/back_o.gif" height="44" width="295" alt="" />
    					<ul>
    						<li><a href="#">Gérer les definitions (glossaire)</a></li>
    						<li><a href="#">Gérer les documents, les supports</a></li>
    						<li><a href="#">Gérer le référentiel du parrainage</a></li>
    						<li><a href="#">Gérer la foire aux questions</a></li>
    						<li><a href="#">Gérer le guide du parrainage</a></li>
    						<li><a href="#">Gérer l'aide</a></li>
    						<li><a href="#">Gérer le texte deroulant</a></li>
    						<li><a href="#">Gérer les liens partenaires</a></li>
    						<li><a href="#">Activité des parrains</a></li>
    						<li><a href="#">Le parrainage, un atout pour le secteur</a></li>
    					</ul>
    				</div>		 
    		</li>
    	</ul>
    </div>

    The concerned javascript which is doing the hover trick for IE6 is

    Code 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);

    Can anyone tell me what's the issue here ... would be a great help ...
    Best
    Last edited by kigoobe; Sep 21, 2007 at 05:31.

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Sydney, Australia
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bug of the browser it's self. The only remedy i know for this is to hide the visibility of such elements when your hover menu is in use.

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,563
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bling, thanks. Yeah, I am doing some googling since then and have come across some discussions ... have to find a solution that matches my case ...

    Edit:

    I've solved this issue. Since it was an IE6 only problem, I have added a conditional javascript function which adds an iframe in between the select boxes and hover menu. I found this a better solution compared to hidding select boxes as hiding only those selects that come in given areas sitewide is a very tedious affair and hiding all selects on hover was looking ugly as it was hiding other selects that were outside of the hover menu area.
    Last edited by kigoobe; Sep 21, 2007 at 08:20.


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
  •