1,105,409 Community Members

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

Member Avatar
jonsan32
Junior Poster
154 posts since Aug 2010
Reputation Points: -3 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Sponsor
 
0
 

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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/tab2.gif); 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down.gif) 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/diamond2.gif) 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>
Member Avatar
jonsan32
Junior Poster
154 posts since Aug 2010
Reputation Points: -3 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Sponsor
 
0
 

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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/tab2.gif); 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down.gif) 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.clicked a.down {color:#fff; background:#000000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_2.clicked a.down {color:#fff; background:#000055 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_3.clicked a.down {color:#fff; background:#330000 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_4.clicked a.down {color:#fff; background:#003300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) no-repeat right center;;}
#outer ul li#li_5.clicked a.down {color:#fff; background:#993300 url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/down_over.gif) 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(http://dl.dropbox.com/u/5739741/Dropline%20Menus/dropline6/diamond2.gif) 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>
Question Self-Answered as of 2 Years Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: