Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

problem with IE6 multilevel menu


  • Please log in to reply
12 replies to this topic

#1 nixx

nixx

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 25 March 2009 - 09:23 PM

Hi!

I have a multi-level menu and it works great on browsers except IE 6 (haven't tested it on other IE browsers yet). The second level menu hides behind select tags.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>test 2</title>
		<script type="text/javascript">
			window.onload = function()
			{
				var ieElements = document.getElementById("nav").getElementsByTagName("li");
				for (var i=0; i<ieElements.length; i++)
				{
					ieElements[i].onmouseover=function()
					{
						this.className+=" hover";
					}
					ieElements[i].onmouseout=function()
					{
						this.className=this.className.replace(new RegExp(" hover\\b"), "");
					}
				}
			}
		</script>
		<style type="text/css">
			body
			{
				behavior:url(csshover.htc)
			}

			ul
			{
				list-style:none
			}

			#nav li
			{
				float:left
			}

			#nav li a
			{
				
				display:block;
				color:#222;
				padding:0.25em
			}

			#nav li ul
			{
				display:none
			}

			#nav li ul li
			{
				clear:both
			}

			#nav li ul li a
			{
				width:10em;
				padding:0.25em;
				background:#ccc;
				text-decoration:none
			}

			#nav li ul li a:hover
			{
				background:#000;
				color:#ccf;
				text-decoration:underline
			}

			#nav li:hover ul
			{
				display:block;
				position:absolute
			}

			#nav li:hover ul li
			{
				position:relative;
				left:-40px;
				z-index:100
			}

			div
			{
				clear:both;
				width:20em;
				text-align:right;
				position:relative;
				z-index:0
			}

			div select
			{
				position:relative;
				z-index:0
			}
		</style>
	</head>
	<body>
		<ul id="nav">
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">Item 1</a>
				<ul>
					<li>
						<a href="#">Item 1.1</a>
					</li>
					<li>
						<a href="#">Item 1.2</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Item 2</a>
				<ul>
					<li>
						<a href="#">Item 2.1</a>
					</li>
					<li>
						<a href="#">Item 2.2</a>
					</li>
					<li>
						<a href="#">Item 2.3</a>
					</li>
					<li>
						<a href="#">Item 2.4</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Item 3</a>
				<ul>
					<li>
						<a href="#">Item 3.1</a>
					</li>
					<li>
						<a href="#">Item 3.2</a>
					</li>
					<li>
						<a href="#">Item 3.3</a>
					</li>
					<li>
						<a href="#">Item 3.4</a>
					</li>
				</ul>
			</li>
		</ul>
		<div>
			<select>
				<option>Option 1</option>
				<option>Option 2</option>
				<option>Option 3</option>
				<option>Option 4</option>
				<option>Option 5</option>
				<option>Option 6</option>
			</select>
		</div>
	</body>
</html>

And here's the .htc file

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
 *	Whatever:hover - V3.00.081222
 *	--------------------------------------------------------
 *	Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
 *	License - http://creativecommons.org/licenses/LGPL/2.1
 *	Packed  - http://dean.edwards.name/packer
 *
 *	howto: body { behavior:url("csshover3.htc"); }
 */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('r.R=(8(){4 f=/(^|\\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(C|D|E))/i,S=/(.*?)\\:(C|D|E)/i,T=/[^:]+:([a-z-]+).*/i,U=/(\\.([a-V-W-]+):[a-z]+)|(:[a-z]+)/1c,X=/\\.([a-V-W-]*Y(C|D|E))/i,Z=/1d (5|6|7)/i,10=/1e/i;4 g=\'1f-\';4 h={p:[],t:{},11:8(){n(!Z.F(1g.1h)&&!10.F(r.12.1i))u;4 a=r.12.1j,l=a.v;w(4 i=0;i<l;i++){3.G(a[i])}},G:8(a){n(a.H){I{4 b=a.H,l=b.v;w(4 i=0;i<l;i++){3.G(a.H[i])}}J(13){}}I{4 c=a.1k,l=c.v;w(4 j=0;j<l;j++){3.14(c[j],a)}}J(13){}},14:8(a,b){4 c=a.1l;n(f.F(c)){4 d=a.K.1m,L=S.15(c)[1],M=c.N(T,\'Y$1\'),O=c.N(U,\'.$2\'+M),o=X.15(O)[1];4 e=L+o;n(!3.t[e]){b.16(L,g+o+\':1n(R(3, "\'+M+\'", "\'+o+\'"))\');3.t[e]=17}b.16(O,d)}},18:8(a,b,c){4 d=g+c;n(a.K[d]){a.K[d]=q}n(!a.x)a.x=[];n(!a.x[c]){a.x[c]=17;4 e=19 P(a,b,c);3.p.1o(e)}u b},y:8(){I{4 l=3.p.v;w(4 i=0;i<l;i++){3.p[i].y()}3.p=[];3.t={}}J(e){}}};r.Q(\'1p\',8(){h.y()});4 k={1q:{9:\'1r\',m:\'1s\'},1t:{9:\'1u\',m:\'1v\'},1a:{9:\'1a\',m:\'1w\'}};8 P(a,b,c){3.A=a;3.B=b;4 d=19 1x(\'(^|\\\\s)\'+c+\'(\\\\s|$)\',\'g\');3.9=8(){a.o+=\' \'+c};3.m=8(){a.o=a.o.N(d,\' \')};a.Q(k[b].9,3.9);a.Q(k[b].m,3.m)}P.1y={y:8(){3.A.1b(k[3.B].9,3.9);3.A.1b(k[3.B].m,3.m);3.9=q;3.m=q;3.A=q;3.B=q}};u 8(a,b,c){n(a){u h.18(a,b,c)}1z{h.11()}}})();',62,98,'|||this|var||||function|activator|||||||||||||deactivator|if|className|elements|null|window||callbacks|return|length|for|csshover|unload||node|type|hover|active|focus|test|parseStylesheet|imports|try|catch|style|affected|pseudo|replace|newSelect|CSSHoverElement|attachEvent|CSSHover|REG_AFFECTED|REG_PSEUDO|REG_SELECT|z0|9_|REG_CLASS|on|REG_MSIE|REG_COMPAT|init|document|securityException|parseCSSRule|exec|addRule|true|patch|new|onfocus|detachEvent|gi|msie|backcompat|csh|navigator|userAgent|compatMode|styleSheets|rules|selectorText|cssText|expression|push|onbeforeunload|onhover|onmouseenter|onmouseleave|onactive|onmousedown|onmouseup|onblur|RegExp|prototype|else'.split('|'),0,{}));
</script>

I tried putting z-indexes on the menus but the behavior is still the same. Anybody got an idea on how to solve this?

Thanks :thumbsup:

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:04:30 PM

Posted 25 March 2009 - 10:08 PM

I have a multi-level menu and it works great on browsers except IE 6

No worries there. Suppport for IE6 will be going away any day. So if it does not work on IE6, and you have not tried it out on any other IE browsers, on which browsers does it work?

You need to enclose your script tags with <!-- and -->, otherwise your browser thinks the less-than sign in the for loop is part of a tag. See this.

EDIT: I am confuse about the purpose of the .htc file. Do you know what it is supposed to do? I don't see that you make any reference to it in your HTML, so how does it know that it is supposed to be used?

#3 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 26 March 2009 - 12:41 AM

hmm, it doesn't work on IE7 too. It works fine on Chrome, Firefox, Opera and Safari.

The csshover.htc is used in the css. It's so IE6 would have the hover effect for non-anchor tags

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:04:30 PM

Posted 26 March 2009 - 08:15 AM

Did you fix your syntax error?

The csshover.htc is used in the css.

I see the reference now.

#5 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 29 March 2009 - 08:30 PM

Did you fix your syntax error?


The <!-- //--> in the script tag? Yeah I did, still displays behind the select tag in IE6 and IE7. :thumbsup:

#6 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:09:30 AM

Posted 29 March 2009 - 10:02 PM

Is this how it is supposed to be displayed?

The following screen shot is in IE8 RC1.

Posted Image

i took your code for the csshover.htc and put the comments in after the &lt;script> and before the </script>.

If it is supposed to be what it's like on the picture, it works fine!

Tested it with IE7 though and i plays around a fair bit...

Edited by KamakaZ, 29 March 2009 - 10:04 PM.

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#7 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 29 March 2009 - 11:04 PM

it should be
<script>
   <!--
   code here
   //-->
</script>

right?

This is how it looks like on my IE6 browser
Posted Image
:thumbsup:

Edited by nixx, 29 March 2009 - 11:05 PM.


#8 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:09:30 AM

Posted 30 March 2009 - 12:57 AM

yes that's right... it looked right for me then... on IE7 the menus would dissappear when i went to move my mouse down the list...

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#9 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 30 March 2009 - 07:51 PM

anyone have an idea on how to make this display above the select tag? :thumbsup:

#10 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:09:30 AM

Posted 30 March 2009 - 09:46 PM

what is the "select" tag?

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#11 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 30 March 2009 - 10:31 PM

<select> ? the drop down list

#12 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:09:30 AM

Posted 30 March 2009 - 10:57 PM

aha... on my tested with IE6&7 it did display above the select tag... it was just a matter of getting it to display, it "hid" when i went to move the mouse off the "Item 1" to go to the dropdown... same for item 2 & 3... but it was definately above it.

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#13 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:06:30 AM

Posted 30 March 2009 - 11:43 PM

really? that is weird. mine stays below the dropdown list :thumbsup:




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users