Solved

CSS Drop Down nav quits working in Internet Explorer in aspx page

Posted on 2013-06-30
4
491 Views
Last Modified: 2013-07-01
A dropdown menu I found on the web works fine in an html page

html menu sample

But when the html is put into an aspx page (which is necessary for the app it's needed for), It doesn't work in Internet Explorer unless it is put in "compatibility mode".

menu in aspx page non functional in IE

It works fine in Chrome, Safari, and Firefox, though.

Here's the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - Professional dropdown #2</title>
<meta name="Author" content="Stu Nicholls" />

<link rel="stylesheet" type="text/css" href="pro_dropdown_2.css" />

<script src="Hover.js" type="text/javascript"></script>

</head>

<body>
<h1>stunicholls.com</h1>
<h2>Professional dropdown #2</h2>
<h3>19th November 2007</h3>

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Cameras</a>
					<ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
					<ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
		<ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
		<ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
		<ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
<p>&copy; 2007 stunicholls.com</p>
</body>
</body>
</html>

Open in new window


as it is inserted in aspx page

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MenuSimple.aspx.vb" Inherits="CHD.MenuSimple"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>MenuSimple</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<link rel="stylesheet" type="text/css" href="pro_dropdown_2.css" />
		<script src="Hover.js" type="text/javascript"></script>
	</head>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<span class="preload1"></span><span class="preload2"></span>
			<ul id="nav">
				<li class="top">
					<a href="#nogo1" class="top_link"><span>Home</span></a></li>
				<li class="top">
					<a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
					<ul class="sub">
						<li>
							<a href="#nogo3" class="fly">Cameras</a>
							<ul>
								<li>
									<a href="#nogo4">Nikon</a></li>
								<li>
									<a href="#nogo5">Minolta</a></li>
								<li>
									<a href="#nogo6">Pentax</a></li>
							</ul>
						</li>
						<li class="mid">
							<a href="#nogo7" class="fly">Lenses</a>
							<ul>
								<li>
									<a href="#nogo8">Wide Angle</a></li>
								<li>
									<a href="#nogo9">Standard</a></li>
								<li>
									<a href="#nogo10">Telephoto</a></li>
								<li>
									<a href="#nogo11" class="fly">Zoom</a>
									<ul>
										<li>
											<a href="#nogo12">35mm to 125mm</a></li>
										<li>
											<a href="#nogo13">50mm to 250mm</a></li>
										<li>
											<a href="#nogo14">125mm to 500mm</a></li>
									</ul>
								</li>
								<li>
									<a href="#nogo15">Mirror</a></li>
								<li>
									<a href="#nogo16" class="fly">Non standard</a>
									<ul>
										<li>
											<a href="#nogo17">Bayonet mount</a></li>
										<li>
											<a href="#nogo18">Screw mount</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="#nogo19">Flash Guns</a></li>
						<li>
							<a href="#nogo20">Tripods</a></li>
						<li>
							<a href="#nogo21">Filters</a></li>
					</ul>
				</li>
				<li class="top">
					<a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
					<ul class="sub">
						<li>
							<a href="#nogo23">Printing</a></li>
						<li>
							<a href="#nogo24">Photo Framing</a></li>
						<li>
							<a href="#nogo25">Retouching</a></li>
						<li>
							<a href="#nogo26">Archiving</a></li>
					</ul>
				</li>
				<li class="top">
					<a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
					<ul class="sub">
						<li>
							<a href="#nogo28">Support</a></li>
						<li>
							<a href="#nogo29" class="fly">Sales</a>
							<ul>
								<li>
									<a href="#nogo30">USA</a></li>
								<li>
									<a href="#nogo31">Canadian</a></li>
								<li>
									<a href="#nogo32">South American</a></li>
								<li>
									<a href="#nogo33" class="fly">European</a>
									<ul>
										<li>
											<a href="#nogo34" class="fly">British</a>
											<ul>
												<li>
													<a href="#nogo35">London</a></li>
												<li>
													<a href="#nogo36">Liverpool</a></li>
												<li>
													<a href="#nogo37">Glasgow</a></li>
												<li>
													<a href="#nogo38" class="fly">Bristol</a>
													<ul>
														<li>
															<a href="#nogo39">Redland</a></li>
														<li>
															<a href="#nogo40">Hanham</a></li>
														<li>
															<a href="#nogo41">Eastville</a></li>
													</ul>
												</li>
												<li>
													<a href="#nogo42">Cardiff</a></li>
												<li>
													<a href="#nogo43">Belfast</a></li>
											</ul>
										</li>
										<li>
											<a href="#nogo44">French</a></li>
										<li>
											<a href="#nogo45">German</a></li>
										<li>
											<a href="#nogo46">Spanish</a></li>
									</ul>
								</li>
								<li>
									<a href="#nogo47">Australian</a></li>
								<li>
									<a href="#nogo48">Asian</a></li>
							</ul>
						</li>
						<li>
							<a href="#nogo49">Buying</a></li>
						<li>
							<a href="#nogo50">Photographers</a></li>
						<li>
							<a href="#nogo51">Stockist</a></li>
						<li>
							<a href="#nogo52">General</a></li>
					</ul>
				</li>
				<li class="top">
					<a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
					<ul class="sub">
						<li>
							<a href="#nogo54">Online</a></li>
						<li>
							<a href="#nogo55">Catalogue</a></li>
						<li>
							<a href="#nogo56">Mail Order</a></li>
					</ul>
				</li>
				<li class="top">
					<a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
			</ul>
			<p>&copy; 2007 stunicholls.com</p>
		</form>
	</body>
</html>

Open in new window


The css file

.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;} 

Open in new window


and javascript

stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

Open in new window


This is very frustrating and a solution would be much appreciated- thanks in advance!
0
Comment
Question by:JChrisMcNeil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39288953
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> is not a complete or currently recognized DOCTYPE.  I won't guarantee it will fix your problem but IE expects a recognized DOCYTPE to do certain things.  Here is the recommended list: http://www.w3.org/QA/2002/04/valid-dtd-list.html

PS: It works the same in IE8 on XP as it does in Firefox.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 39289119
It works perfectly fine in both pages.
0
 

Author Comment

by:JChrisMcNeil
ID: 39289913
HagayMandel, it only works in Internet Explorer 10 in Compatibility Mode. I need it to work without activating compatibility. mode.
0
 

Author Closing Comment

by:JChrisMcNeil
ID: 39291197
Thanks, It's nice when thus a  simple solution.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question