Jump to content

Drop down menu broken in IE


PollyAplin

Recommended Posts

Can you post code and a link to the page so we have something to go on?

Link to comment
Share on other sites

Can you post code and a link to the page so we have something to go on?
Sure,HTML:<div id="menubx"><div id="navMenu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Company</a> <ul> <li><a href="profile.html" border="0" target=Main>Profile</a></li> <li><a href="meettheteam.html" border="0" target=Main> Meet the Team</a></li> <li><a href="News.html" border="0" target=_top>News</a></li> <li><a href="downloads.html" border="0" target=Main>Downloads</a></li> <li><a href="careers.html" border="0" target=Main>Careers with KIGG</a></li> <li><a href="contact.html" border="0" target=Main>Contact</a></li> </ul> <!--End inner UL Company--> </li> <li><a href="factoryhub.html" border="0" target=Main>Factory Start-Ups</a> <ul> <li><a href="energyelecmeter.html" border="0" target=Main>Energy / Electricity Meter</a></li> <li><a href="watermeter.html" border="0" target=Main>Flow Meter</a></li> <li><a href="others.html" border="0" target=Main>Other Start-Up Options</a></li> </ul> <!--End inner UL Factory--> </li> <li><a href="productshub.html" border="0" target=Main>Products</a> <ul> <li><a href="FTIII.html" border="0" target=Main>Energy Meter Testing</a></li> <li><a href="GHGA.html" border="0" target=Main>GHGA</a></li> <li><a href="Smartmetering.html" border="0" target=Main>Smart Metering</a></li> <li><a href="Carbonfootprint.html" border="0" target=Main>Carbon Footprint</a></li> <li><a href="WABI.html" border="0" target=Main>WABI</a></li> <li><a href="measurecontauto.html" border="0" target=Main>Measurement/Control </a></li> <li><a href="testterminalblock.html" border="0" target=Main>Test Terminal Block</a></li> </ul> <!--End inner UL Products--> </li> <li><a href="randdhub.html" border="0" target=Main>R&D</a> <ul> <li><a href="customdesign.html" border="0" target=Main>Custom Design</a></li> <li><a href="energydesign.html" border="0" target=Main>Energy Meter Design</a></li> <li><a href="carbon.html" border="0" target=Main>Carbon Measurement</a></li> <li><a href="equiptest.html" border="0" target=Main>Communications</a></li> </ul> <!--End inner UL R&D--> <li><a href="Labcalibrationhub.html" border="0" target=Main>Lab / Calibration</a> <ul> <li><a href="calibrationservices.html" border="0" target=Main>Calibration Services</a></li> <li><a href="testingandcert.html" border="0" target=Main>Testing & Certifications</a></li> </ul> <!--End inner UL Lab--> <li><a href="services.html" border="0" target=Main>Services</a></li> <li><a class="ecohealth" href="br.html" border="0" target=Main>Environment & Health</a></li> <!--This opens BR info in your main website content window--> </li> </ul> <!--End Main UL--><br class="clearFloat"</></div> <!--End navMenu--></div> <!--End Menubx-->CSS#Menubx{ width:1072px; height:70px; background:#fff; position:absolute; padding:0; margin-top:230px; text-align:center; z-index:35;}#navMenu{ Margin:0; Padding:0; width:1072px; }#navMenu ul{ Margin:0; Padding:0; line-height:30px;}#navMenu li{ Margin:0; Padding:0; list-style:none; Float:left; position:relative; background:#BEDAE0;}#navMenu ul li a{ padding:0; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:150px; display:block; color:#00539b; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left:2px solid #fff;}#navMenu ul ul{ position:absolute; visibility:hidden; top:30px; }#navMenu ul li:hover ul{ visibility:visible; }/**************************************************************/#navMenu li:hover{ background:#09F; }#navMenu ul li:hover ul li a:hover{ background:#09F; color:#FFF;}#navmenu a:hover{ color:#FFF;}
Link to comment
Share on other sites

you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.

Link to comment
Share on other sites

you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
wow, thank you very much!
Link to comment
Share on other sites

you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
I just implemented these changes...and my drop down menu disappeared...does this mean the menu isn't valid??
Link to comment
Share on other sites

did you use link to validate your page, did it come up with red warning about errors found, or green for a validated page. are you using a doctype at all? such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">EDIT when you say IE which version are we talking about? just to clarify.

Link to comment
Share on other sites

#main li {	display: block;	position: relative;	float: left;	width: 84px;}#main li.topLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.7em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 92px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;}#main li .nestedList {	position: absolute;	top: 28px;	left: 2px;	display: none;	list-style-type: none;	width: 84px;	height: 25px;}#main li:hover .nestedList {	display: block;}#main li.subLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 200px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;	z-index: 1;}

HTML:

<ul id='main'>	  <li class="topLevel"><a href="../index.html">Home</a>	  <ul class="nestedList">	  <li class="subLevel"><a href="../contact-us.html">Contact Us</a></li>	  <li class="subLevel"><a href="../about-us.html">About Us</a></li>	  <li class="subLevel">Donate</li>   </ul></li>

You will need to edit this to fit your own needs, but it demonstrates how to use the "Nested List" within the main top level menus. To add extra top levels, just copy the <li class="topLevel">, not the <ul id="main">.I am using XHTML 1 Transistional. But note, this still won't work in IE6 or earlier.Mark.P.S. Do especially note the use of Display: none rather than Visibility: hidden. The visibility: hidden will leave a blank section in your page, whilst display: none will effectively remove it altogether, only to appear when hovered.

Link to comment
Share on other sites

  • 4 weeks later...
#main li {	display: block;	position: relative;	float: left;	width: 84px;}#main li.topLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.7em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 92px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;}#main li .nestedList {	position: absolute;	top: 28px;	left: 2px;	display: none;	list-style-type: none;	width: 84px;	height: 25px;}#main li:hover .nestedList {	display: block;}#main li.subLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 200px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;	z-index: 1;}

HTML:

<ul id='main'>	  <li class="topLevel"><a href="../index.html">Home</a>	  <ul class="nestedList">	  <li class="subLevel"><a href="../contact-us.html">Contact Us</a></li>	  <li class="subLevel"><a href="../about-us.html">About Us</a></li>	  <li class="subLevel">Donate</li>   </ul></li>

You will need to edit this to fit your own needs, but it demonstrates how to use the "Nested List" within the main top level menus. To add extra top levels, just copy the <li class="topLevel">, not the <ul id="main">.I am using XHTML 1 Transistional. But note, this still won't work in IE6 or earlier.Mark.P.S. Do especially note the use of Display: none rather than Visibility: hidden. The visibility: hidden will leave a blank section in your page, whilst display: none will effectively remove it altogether, only to appear when hovered.

Thanks for this but even this menu doesn't work in IE for me. I don't know what the ###### is wrong with the website i'm building...
Link to comment
Share on other sites

heres how it should work with ie6 fix. had to adjust font-size, and li element to fit total width of div container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>http://w3schools.invisionzone.com/index.php?amp;showtopic=33988&pid=186664&st=0&#entry186664</title><!--required for ie6*--><script type="text/javascript">/*<![CDATA[*//*---->*/sfHover = function() {var sfEls = document.getElementById("navMenu").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><style type="text/css">#Menubx{width:1072px;height:70px;background:#fff;position:absolute;padding:0;margin-top:230px;text-align:center;z-index:35;}#navMenu{margin:0;padding:0;width:1072px;}#navMenu ul{margin:0;padding:0;line-height:30px;}#navMenu li{margin:0;padding:0;list-style:none;float:left;position:relative;background:#BEDAE0;}#navMenu ul li a{padding:0;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:11px;text-decoration:none;height:30px;width:130px;display:block;color:#00539b;border-top: 1px solid #fff;border-right: 1px solid #fff;border-bottom: 1px solid #fff;border-left:2px solid #fff;}#navMenu ul ul{position:absolute;visibility:hidden;top:30px;width:130px;/*required for ie6*/}#navMenu ul li:hover ul, #navMenu ul li.sfhover ul/*required for ie6*/{visibility:visible;}/**************************************************************/#navMenu li:hover, #navMenu li.sfhover/*required for ie6*/{background:#09F;}#navMenu ul li:hover ul li a:hover, #navMenu ul li.sfhover ul li a:hover/*required for ie6*/{background:#09F;color:#FFF;}#navmenu a:hover{color:#FFF;}</style></head><body><div id="menubx"><div id="navMenu"><ul><li><a href="index.html">Home</a></li><li><a href="index.html">Company</a><ul><li><a href="profile.html" target="Main">Profile</a></li><li><a href="meettheteam.html" target="Main"> Meet the Team</a></li><li><a href="News.html" target="_top">News</a></li><li><a href="downloads.html" target="Main">Downloads</a></li><li><a href="careers.html" target="Main">Careers with KIGG</a></li><li><a href="contact.html" target="Main">Contact</a></li></ul> <!--End inner UL Company--></li><li><a href="factoryhub.html" target="Main">Factory Start-Ups</a><ul><li><a href="energyelecmeter.html" target="Main">Energy / Electricity Meter</a></li><li><a href="watermeter.html" target="Main">Flow Meter</a></li><li><a href="others.html" target="Main">Other Start-Up Options</a></li></ul> <!--End inner UL Factory--></li><li><a href="productshub.html" target="Main">Products</a><ul><li><a href="FTIII.html" target="Main">Energy Meter Testing</a></li><li><a href="GHGA.html" target="Main">GHGA</a></li><li><a href="Smartmetering.html" target="Main">Smart Metering</a></li><li><a href="Carbonfootprint.html" target="Main">Carbon Footprint</a></li><li><a href="WABI.html" target="Main">WABI</a></li><li><a href="measurecontauto.html" target="Main">Measurement/Control </a></li><li><a href="testterminalblock.html" target="Main">Test Terminal Block</a></li><li><a href="FTIII.html" target="Main">Energy Meter Testing</a></li><li><a href="GHGA.html" target="Main">GHGA</a></li><li><a href="Smartmetering.html" target="Main">Smart Metering</a></li><li><a href="Carbonfootprint.html" target="Main">Carbon Footprint</a></li><li><a href="WABI.html" target="Main">WABI</a></li><li><a href="measurecontauto.html" target="Main">Measurement/Control </a></li><li><a href="testterminalblock.html" target="Main">Test Terminal Block</a></li></ul> <!--End inner UL Products--></li><li><a href="randdhub.html" target="Main">R&D</a><ul><li><a href="customdesign.html" target="Main">Custom Design</a></li><li><a href="energydesign.html" target="Main">Energy Meter Design</a></li><li><a href="carbon.html" target="Main">Carbon Measurement</a></li><li><a href="equiptest.html" target="Main">Communications</a></li></ul> <!--End inner UL R&D--></li><li><a href="Labcalibrationhub.html" target="Main">Lab / Calibration</a><ul><li><a href="calibrationservices.html" target="Main">Calibration Services</a></li><li><a href="testingandcert.html" target="Main">Testing & Certifications</a></li></ul> <!--End inner UL Lab--></li><li><a href="services.html" target="Main">Services</a></li><li><a class="ecohealth" href="br.html" target="Main">Environment & Health</a></li> <!--This opens BR info in your main website content window--></ul> <!--End Main UL--><br class="clearFloat"/></div> <!--End navMenu--></div> <!--End Menubx--></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...