Menu works in Chrome, but nowhere else... HELP!

Question

jonsan32 12 Junior Poster in Training

14 Years Ago

Don't know what I'm doing wrong, but I'm positive it's me. This dropline menu works perfectly in Chrome, but completely goes to crap in every other browser (not just IE, which I'm used to). If you have any pointers, please pass them my way. I've pasted the code - in it's long form - below... including all the script and styling exposed. Thanks a ton.

<style type="text/css">

a {color:#000;}
a:visited {color:#111;}
a:hover {color:#222;}
#container {position:relative; z-index:100;}

#outer {padding:0; text-align:center; margin:0; width:920px; background:url(); height:30px; position:relative; z-index:500;}
#outer ul {margin:0 auto; padding:0; list-style-type:none; height:26px; border-left:1px solid #555; border-right:1px solid #555;}
#outer ul li {float:left;}
#outer ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:14px; text-decoration:none;text-align:center; line-height:22px; display:block; height:24px; padding:0 25px; white-space:nowrap; color:#000; border:1px solid #555; margin-left:-1px;}
#outer ul li a.down {background:url() no-repeat right center;}
#outer ul li a:hover {color:#fff; background:#689;}

#outer ul li#ul_1 a.down:hover {color:#fff; background:#ef8e41 url() no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url() no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url() no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url() no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url() no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url() no-repeat right center;;}

#submenus {width:920px; background:#6a849f; position:absolute; top:0; left:0; z-index:0; height:20px;}
#submenus ul {margin:0 auto; padding:0; list-style-type:none; height:25px; position:absolute; top:0; left:0; width:920px;}
#submenus ul#ul_1 {background:#000000;}
#submenus ul#ul_2 {background:#000055;}
#submenus ul#ul_3 {background:#330000;}
#submenus ul#ul_4 {background:#003300;}
#submenus ul#ul_5 {background:#993300;}
#submenus ul li {float:left;}
#submenus ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:12px; color:#fff; text-decoration:none;text-align:center; line-height:26px; display:block; height:30px; padding:0 16px 0 10px; white-space:nowrap; background: url() no-repeat right center;}
#submenus ul li a:hover {color:#fff; text-decoration:underline;}

</style>


<table width="920" align="center"><tr><td>
<div id="content">



<div id="container">

	<div id="outer">

		<ul id="menu">

			<li id="li_1" class="clicked"><a class="down" href="#nogo">J.A.M.</a></li>

			<li id="li_2"><a class="down" href="#nogo">Community</a></li>

			<li id="li_3"><a class="down" href="#nogo">Team Management</a></li>

			<li id="li_4"><a class="down" href="#nogo">Extra Information</a></li>

			<li id="li_5"><a class="down" href="#nogo">Customer Relations</a></li>

	

		</ul>

	</div>



	<div id="submenus">

	<ul id="ul_1">

		<li><a href="#nogo11">News & Registration</a></li>

		<li><a href="#nogo12">J.A.M. Newsletters</a></li>

		<li><a href="#nogo13">Camps & Clinics</a></li>

		<li><a href="#nogo14">Schedules</a></li>

		<li><a href="#nogo15">Standings</a></li>
		<li><a href="#nogo14">Tournaments</a></li>

		<li><a href="#nogo15">Contact List Signup</a></li>
	</ul>

	<ul id="ul_2">

		<li><a href="#nogo21">Community Forum</a></li>

		<li><a href="#nogo22">Local Event</a></li>

		<li><a href="#nogo23">J.A.M. Photos</a></li>

		<li><a href="#nogo21">Club Teams</a></li>

		<li><a href="#nogo22">Daily Workouts</a></li>

		<li><a href="#nogo23">Team Fundraisers</a></li>

		<li><a href="#nogo23">Sponsors</a></li>
	</ul>

	<ul id="ul_3">

		<li><a href="#nogo31">Write-Up Contest</a></li>

		<li><a href="#nogo32">Download Central</a></li>

		<li><a href="#nogo33">Random Payment</a></li>

		<li><a href="#nogo34">Uniform Purchase</a></li>

		<li><a href="#nogo35">Facility Usage</a></li>

		<li><a href="#nogo36">Hardships</a></li>
		<li><a href="#nogo36">Cancellations</a></li>

	</ul>

	<ul id="ul_4">

		<li><a href="#nogo41">Are You New?</a></li>

		<li><a href="#nogo42">FAQ's</a></li>

		<li><a href="#nogo43">Driving Directions</a></li>
		<li><a href="#nogo41">League Rules</a></li>

		<li><a href="#nogo42">Company Info</a></li>
		<li><a href="#nogo43">Terms of Service</a></li>
		<li><a href="#nogo43">Past Champions</a></li>
	</ul>

<ul id="ul_5">

		<li><a href="#nogo41">Contact Us</a></li>

		<li><a href="#nogo42">Referees</a></li>

		<li><a href="#nogo43">Feedback</a></li>
		<li><a href="#nogo41">Tips & Advice</a></li>

		<li><a href="#nogo42">Advertising</a></li>
		<li><a href="#nogo43">Donations</a></li>
		<li><a href="#nogo43">Website Tour</a></li>

	</ul>

	</div>

</div>

</td></tr></table>

<script src="https://dl-web.dropbox.com/get/Public/Dropline%20Menus/dropline6/hover_menu6.js?w=0786cd12" type="text/javascript"></script>

html-css javascript web-browser

1 Contributor
1 Reply
189 Views
6 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by jonsan32

Dani AI

Generated 7 Months Ago

Good catch by — this is a classic DOM-timing problem rather than a mysterious browser bug. When your initialization script runs before the browser has parsed the menu markup, calls that walk the DOM will get null and throw an error in many engines. Chrome can be forgiving or execute in a timing that masks the problem, so it looked fine there while other browsers stopped when the script hit a null node.

How to verify: open Developer Tools (F12) in the failing browser and look for a TypeError such as "Cannot read property ... of null" or "undefined is not an object". That confirms the script ran too early. Also validate HTML (doctype, missing/extra tags) because parser differences change when elements become available.

Safer fixes and best practices:

Put scripts that touch page markup just before the closing </body> instead of inside table cells. That guarantees markup exists when the script runs.
Or use the defer attribute for external scripts so they execute after parsing.
Or wrap initialization in a DOM-ready handler. Example pattern:

<script>
function initMenu(){ /* initialize menu here */ }

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initMenu);
} else {
  initMenu();
}
</script>

Extra tips: watch stacking contexts (z-index/position) if submenus appear behind other elements; keep behavior unobtrusive (separate JS from markup); and use the console to step through initialization if problems persist. These practices make the menu robust across all browsers without relying on placement quirks.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2011-09-30T10:21:52+00:00

Wow, figured it out. Needed the ending javascript within the table, and not outside. Here's the fix.

<style type="text/css">

a {color:#000;}
a:visited {color:#111;}
a:hover {color:#222;}
#container {position:relative; z-index:100;}

#outer {padding:0; text-align:center; margin:0; width:920px; background:url(); height:30px; position:relative; z-index:500;}
#outer ul {margin:0 auto; padding:0; list-style-type:none; height:26px; border-left:1px solid #555; border-right:1px solid #555;}
#outer ul li {float:left;}
#outer ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:14px; text-decoration:none;text-align:center; line-height:22px; display:block; height:24px; padding:0 25px; white-space:nowrap; color:#000; border:1px solid #555; margin-left:-1px;}
#outer ul li a.down {background:url() no-repeat right center;}
#outer ul li a:hover {color:#fff; background:#689;}

#outer ul li#ul_1 a.down:hover {color:#fff; background:#ef8e41 url() no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url() no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url() no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url() no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url() no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url() no-repeat right center;;}

#submenus {width:920px; background:#6a849f; position:absolute; top:0; left:0; z-index:0; height:20px;}
#submenus ul {margin:0 auto; padding:0; list-style-type:none; height:25px; position:absolute; top:0; left:0; width:920px;}
#submenus ul#ul_1 {background:#000000;}
#submenus ul#ul_2 {background:#000055;}
#submenus ul#ul_3 {background:#330000;}
#submenus ul#ul_4 {background:#003300;}
#submenus ul#ul_5 {background:#993300;}
#submenus ul li {float:left;}
#submenus ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:12px; color:#fff; text-decoration:none;text-align:center; line-height:26px; display:block; height:30px; padding:0 16px 0 10px; white-space:nowrap; background: url() no-repeat right center;}
#submenus ul li a:hover {color:#fff; text-decoration:underline;}

</style>





<table width="920" align="center"><tr><td>
<div id="content">



<div id="container">

	<div id="outer">

		<ul id="menu">

			<li id="li_1" class="clicked"><a class="down" href="#nogo">J.A.M.</a></li>

			<li id="li_2"><a class="down" href="#nogo">Community</a></li>

			<li id="li_3"><a class="down" href="#nogo">Team Management</a></li>

			<li id="li_4"><a class="down" href="#nogo">Extra Information</a></li>

			<li id="li_5"><a class="down" href="#nogo">Customer Relations</a></li>

	

		</ul>

	</div>



	<div id="submenus">

	<ul id="ul_1">

		<li><a href="#nogo11">News & Registration</a></li>

		<li><a href="#nogo12">J.A.M. Newsletters</a></li>

		<li><a href="#nogo13">Camps & Clinics</a></li>

		<li><a href="#nogo14">Schedules</a></li>

		<li><a href="#nogo15">Standings</a></li>
		<li><a href="#nogo14">Tournaments</a></li>

		<li><a href="#nogo15">Contact List Signup</a></li>
	</ul>

	<ul id="ul_2">

		<li><a href="#nogo21">Community Forum</a></li>

		<li><a href="#nogo22">Local Event</a></li>

		<li><a href="#nogo23">J.A.M. Photos</a></li>

		<li><a href="#nogo21">Club Teams</a></li>

		<li><a href="#nogo22">Daily Workouts</a></li>

		<li><a href="#nogo23">Team Fundraisers</a></li>

		<li><a href="#nogo23">Sponsors</a></li>
	</ul>

	<ul id="ul_3">

		<li><a href="#nogo31">Write-Up Contest</a></li>

		<li><a href="#nogo32">Download Central</a></li>

		<li><a href="#nogo33">Random Payment</a></li>

		<li><a href="#nogo34">Uniform Purchase</a></li>

		<li><a href="#nogo35">Facility Usage</a></li>

		<li><a href="#nogo36">Hardships</a></li>
		<li><a href="#nogo36">Cancellations</a></li>

	</ul>

	<ul id="ul_4">

		<li><a href="#nogo41">Are You New?</a></li>

		<li><a href="#nogo42">FAQ's</a></li>

		<li><a href="#nogo43">Driving Directions</a></li>
		<li><a href="#nogo41">League Rules</a></li>

		<li><a href="#nogo42">Company Info</a></li>
		<li><a href="#nogo43">Terms of Service</a></li>
		<li><a href="#nogo43">Past Champions</a></li>
	</ul>

<ul id="ul_5">

		<li><a href="#nogo41">Contact Us</a></li>

		<li><a href="#nogo42">Referees</a></li>

		<li><a href="#nogo43">Feedback</a></li>
		<li><a href="#nogo41">Tips & Advice</a></li>

		<li><a href="#nogo42">Advertising</a></li>
		<li><a href="#nogo43">Donations</a></li>
		<li><a href="#nogo43">Website Tour</a></li>

	</ul>

	</div>

</div>




<script type="text/javascript">

var getCurrent = document.getElementById('menu').getElementsByTagName("LI");
	for (var i=0; i<getCurrent.length; i++) {
		if (getCurrent[i].className == "clicked") {
		ulId = getCurrent[i].id.replace("li", "ul");
		document.getElementById(ulId).style.top = 30 + "px";
		}
		}

	var getEls = document.getElementById('menu').getElementsByTagName("LI");
	var getListElts = document.getElementById('submenus').getElementsByTagName("UL");
	var getAgn = getEls;
	

	for (var i=0; i<getEls.length; i++) {
		getEls[i].onmouseover=function() {
		this.className = 'clicked';

		for (var z=0; z<getAgn.length; z++) {
		if (this.id != getAgn[z].id){
				getAgn[z].className = '';
			}
		}

		ulId = this.id.replace("li", "ul");
		if (document.getElementById(ulId).style.top < 30 + "px") {
		moveIt (0,31,ulId)
		}
			for (var i=0; i<getListElts.length; i++) {
			if (ulId != getListElts[i].id && getListElts[i].style.top > 0 + "px"){
					thisSub = getListElts[i].id;
					moveIt (29,-1,thisSub)
				}
			}
		}
	}


function moveIt (cY, fY, sub) {
if (cY > fY) {cY--;}
else {cY++;}
if (cY != fY) {
document.getElementById(sub).style.top = cY + "px";
setTimeout ("moveIt("+cY+","+fY+",'"+sub+"')", 10);
}
}
</script>


</td></tr></table>