#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    36

    Bugs with CSS dropdown menu on Explorer! Why???


    I have made a CSS dropdown menu which works O.K. on Safari and Firefox but on Explorer, I loose my dropdown menu and all I see is an orange line. Funny thing is, that it works OK on Explorer 8 on vista but not Explorer 8 on XP??? Explorer 5 and 6 is a problem and probably other Explorer versions.

    I can't recall whether I read somewhere that I have to put a hack line of code somewhere for it to work on Explorer???

    Can someone help please? I need it to work properly on all browsers and platforms. Does my code look alright?

    CSS code:
    Code:
    #menu {
    text-align: left;
    position:relative;
    vertical-align:middle;
    display:table-cell;
    height: 17px;
    }
    
    .submenuHead {
    	font-family:Arial, Helvetica, sans-serif;
    	color:#A7A9AC;
    	font-size:11px;
    	font-weight:none;
    }
    
    #nav {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER: 0px, none; WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
    }
    #nav UL {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
    }
    #nav LI {
    	FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 17px; POSITION: relative; border:0px;
    }
    #nav LI UL {
    	MARGIN-TOP: -50px; LEFT: -999em; MARGIN-LEFT: 121px; POSITION: absolute;
    }
    
    #nav LI A {
    	BORDER-RIGHT: none 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: none 0px solid; DISPLAY: block; PADDING-LEFT: 0px  ; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: none 0px solid; WIDTH: 121px; COLOR: none; PADDING-TOP: 0px; BORDER-BOTTOM: none 0px solid; BACKGROUND-COLOR: none; TEXT-DECORATION: none;
    }
    #nav LI2 A {
    	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #F2F2F2; TEXT-DECORATION: none;
    }
    #nav LI A:hover {
    	COLOR: #fff; BACKGROUND-COLOR: #FBB568;
    }
    #nav LI:hover UL {
    	LEFT: auto;
    }
    #nav LI LI:hover UL {
    	LEFT: auto;
    }
    #nav LI.sfhover UL {
    	LEFT: auto;
    }

    This goes to the HTML:
    Code:
    <div id="menu">
                    <UL id=nav>
                      <LI><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuBtn','','images/menu1.jpg',1)"><img src="images/menu2.jpg" name="menu" width="121" height="17" border="0" rel="balloon1"></a></span>
                        <UL>
                          <LI2><a href="http://www.sample1.com" target="_blank" class="submenuHead">Sample1</a></LI2>
                          <LI2><a href="http://www.sample2.com" target="_blank" class="submenuHead">Sample2</a></LI2>
                          <LI2><a href="http://www.sample3.com" target="_blank" class="submenuHead">Sample3</a></LI2>
                        </UL>
                      </LI>
                    </UL>
                  </div>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,125
    Rep Power
    4309
    1) The first thing to do is to fix the CSS errors. "none" is not a valid color or font-weight. For font-weight, you mean "normal". Also a border can't be both "solid" and "none" -- pick one.

    Here, I've cleaned it up for you: (I fixed the errors manually and then ran it through my reformatter.)
    Code:
    #menu {
    	text-align: left;
    	position: relative;
    	vertical-align: middle;
    	display: table-cell;
    	height: 17px;
    }
    
    .submenuHead {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #A7A9AC;
    	font-size: 11px;
    	font-weight: normal;
    }
    
    #nav {
    	float: left;
    	margin: 0;
    	border: 0 none;
    	width: 121px;
    	padding: 0;
    	list-style-type: none;
    }
    
    #nav UL {
    	float: left;
    	margin: 0;
    	width: 150px;
    	padding: 0;
    	list-style-type: none;
    }
    
    #nav LI {
    	float: left;
    	margin-bottom: 0;
    	width: 180px;
    	line-height: 17px;
    	position: relative;
    	border: 0;
    }
    
    #nav LI UL {
    	margin-top: -50px;
    	left: -999em;
    	margin-left: 121px;
    	position: absolute;
    }
    
    #nav LI A {
    	border: none 0;
    	display: block;
    	font-weight: normal;
    	width: 121px;
    	padding: 0;
    	text-decoration: none;
    }
    
    #nav LI LI A {
    	border: #ccc 1px solid;
    	display: block;
    	font-weight: normal;
    	width: 150px;
    	color: #000;
    	padding: 0 0 0 5px;
    	background-color: #F2F2F2;
    	text-decoration: none;
    }
    
    #nav LI A:hover {
    	color: #fff;
    	background-color: #FBB568;
    }
    
    #nav LI:hover UL {
    	left: auto;
    }
    
    #nav LI LI:hover UL {
    	left: auto;
    }
    
    #nav LI.sfhover UL {
    	left: auto;
    }
    2) "li2" is not a valid element type. Change them to "li" elements and then target them with "#nav LI LI" instead of "#nav LI2". Alternatively, you could give them all a class, but that's not really needed here.

    3) Try giving "visibility:visible" to "#nav LI:hover UL".
    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).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    36
    Thanks for your response.

    Still doesn't work?

    #nav LI:hover UL {
    left: auto;
    visibility:visible;
    }

    Still the same issue in Explorer 6 on XP and also Explorer 8 using Vista.

    The drop down menu does not show up. All I see is a blocked line at the bottom of it.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    36
    O.K. got it!

    This is the javascript that fixed it and it now works on all browsers and platforms.

    Code:
    <script type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    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);
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    Anyone know why this code works and not the code I used below?

    This is what I had:
    Code:
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    Last edited by rePete; December 22nd, 2009 at 07:32 PM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,125
    Rep Power
    4309
    That's what the ".sfhover" class is for. It doesn't do anything by itself; the script adds it to <li>s in the menu when they're moused over.

    The reason for the script is that IE(4 through 6)/Win only natively support :hover on <a> elements. IE7+ support it on more elements like other modern browsers. (However, :hover is oddly buggy sometimes in IE8's compatibility mode.)
    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).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    36
    Originally Posted by Kravvitz
    That's what the ".sfhover" class is for. It doesn't do anything by itself; the script adds it to <li>s in the menu when they're moused over.

    The reason for the script is that IE(4 through 6)/Win only natively support :hover on <a> elements. IE7+ support it on more elements like other modern browsers. (However, :hover is oddly buggy sometimes in IE8's compatibility mode.)
    Ahh. Thank you for making that clear!

IMN logo majestic logo threadwatch logo seochat tools logo