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
Solved

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

Posted on 2013-06-30
4
476 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 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

792 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