Solved

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

Posted on 2013-06-30
4
451 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
  • 2
4 Comments
 
LVL 82

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now