CSS Horizontal Menu Help

efriese · 11-05-2005, 10:15 AM

I am trying to build a CSS menu for a site. I'm using the :hover technique and it is really working well in firefox, but not well in IE. I'm using the csshover.htc file to try and fix the IE problems, but IE is displaying it as a vertical menu instead of horizontal. I'm on a tight time frame and some extra sets of eyes would be very helpful. Here's the HTML

HTML Code:

<html>
<head>
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #000;
float: left;
}

#menu ul {
list-style: none;
padding: 0;
margin-left: 15;
margin-right: 0;
margin-bottom: 0;
float: left;
}

#menu a, #menu h2 {
font: bold 12px/16px arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #F7CB29;
background: #000;
text-transform: uppercase;
}

#menu h2:hover {
background: #3F3F3F
}

#menu a {
color: #F7CB29;
background: #000;
text-decoration: none;
}

#menu a:hover {
color: #F7CB29;
background: #3F3F3F;
}

#menu li {
position: relative;
background: #000000;

}
.menu-item {
position: relative;
background: #000000;
width: 10em;
}

#menu ul ul {
position: absolute;
z-index: 500;
margin-left:0;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>

<body>
<h1>New Menu</h1>
<!-- Start Menu -->
<div id="menu">
<ul>
	<li><h2>Property Search</h2>
	<ul>
		<li class="menu-item"><a href="link" target="_blank">Search Property Listings</a></li>
		<li class="menu-item"><a href="link" target="_blank">Search Our Featured Listings</a></li>
	</li></ul>
</ul>
<ul>
	<li><h2>Relocation</h2>
	<ul>
		<li class="menu-item"><a href="link">Relocation Services</a></li>
		<li class="menu-item"><a href="link" target="_blank">The Relo Network</a></li>
		<li class="menu-item"><a href="link">Corporate Relocation</a></li>
		<li class="menu-item"><a href="link">About the Huntsville Area</a></li>
	</ul>
	</li>
</ul>
<ul>
	<li><h2>Buying a Home</h2>
	<ul>
		<li class="menu-item"><a href="link">Tips on Buying a Home</a></li>
		<li class="menu-item"><a href="link" target="_blank">What is your FICO?</a></li>
		<li class="menu-item"><a href="link">Contact an Agent</a></li>
	</ul></li>
</ul>
<ul>
	<li><h2>Selling a Home</h2>
	<ul>
		<li class="menu-item"><a href="link">Tips on Selling a Home</a></li>
		<li class="menu-item"><a href="link">Contact an Agent</a></li>
	</ul></li>
</ul>
<ul>
	<li><h2>Contact Us</h2>
	<ul>
		<li class="menu-item"><a href="link">Contact an Agent</a></li>
		<li class="menu-item"><a href="link">Contact Us</a></li>
	</ul></li>
</ul>
</div>
</body>
</html>

The csshover.htc file is below:
????: NamePros.com http://www.namepros.com/web-design-discussion/137756-css-horizontal-menu-help.html
????: NamePros.com http://www.namepros.com/showthread.php?t=137756

Code:

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	Pseudos - V1.30.050121 - hover & active
 *	---------------------------------------------
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	(c) 2005 - Peter Nederlof
 *
 *	Credits  - Arnoud Berendsen 
 *	         - Martin Reurings
 *             - Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var currentSheet, doc = window.document, activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:hover.*$/, '');
		var elements = getElementsBySelect(affected);

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	node.attachEvent(events.on,
		function() { node.className += ' ' + className; });
	node.attachEvent(events.off,
		function() { node.className = 
			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
					classname[1] + '\\b').exec(node.className)))) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>

Sparky · 11-05-2005, 12:54 PM

Holy **** that's one mess of code. All you need is:

display: inline;

That should display it horizontally.

efriese · 11-06-2005, 05:29 AM

A mess of code? Ok. I tried using display:inline in many places in the script, but it still displays horizontally in IE. Any other ideas?

Sparky · 11-06-2005, 05:37 AM

The mess of code I was reffering to was that JScript code. Have you tried reading through this article:

http://www.alistapart.com/articles/hybrid/

efriese · 11-06-2005, 09:06 AM

Honestly I just grabbedt the htc file off the internet. That was a good article, except the menu isn't exactly what I'm looking for. It could be modified. Does anyone see the problem with the code I have above? If it works in Firefox, I would assume that there's some way to make it work in IE. Thanks for your help Sparky!

def1 · 11-06-2005, 12:28 PM

i have a css horizontal menu but its a little complicated to work with, pm me if you want it

11-06-2005, 05:29 AM	THREAD STARTER #3 (permalink)
efriese New Member Join Date: Aug 2004 Location: Auburn, AL Posts: 15	A mess of code? Ok. I tried using display:inline in many places in the script, but it still displays horizontally in IE. Any other ideas? __________________ Tiger Web Solutions Web Design - Hosting - Identity Creation - Printing Find E-Commerce Discussions and Resources at E-Commerce Boards

11-06-2005, 09:06 AM	THREAD STARTER #5 (permalink)
efriese New Member Join Date: Aug 2004 Location: Auburn, AL Posts: 15	Honestly I just grabbedt the htc file off the internet. That was a good article, except the menu isn't exactly what I'm looking for. It could be modified. Does anyone see the problem with the code I have above? If it works in Firefox, I would assume that there's some way to make it work in IE. Thanks for your help Sparky! __________________ Tiger Web Solutions Web Design - Hosting - Identity Creation - Printing Find E-Commerce Discussions and Resources at E-Commerce Boards

11-06-2005, 12:28 PM	#6 (permalink)
def1 Senior Member Join Date: May 2005 Posts: 1,538	i have a css horizontal menu but its a little complicated to work with, pm me if you want it __________________ Did you try my toolbar? Works in Firefox and IE! http://www.bumrecords.net - Fun Games, Music, Discussion, And Much More! uploadÂ² â€¢Pick the Web Hosting Company most NamePros Members Use Pick Chronichosting!â€¢

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do you install a drop down menu?	Rhino1616	Web Design Discussion	4	10-03-2005 12:09 AM
CSS Menu	Albatross	Web Design Discussion	2	06-22-2005 10:57 AM
CSS MENU - Mozilla Hack please!!!!	tot	Programming	0	05-12-2004 07:03 AM
inserting dhtml menu	knightthrone	Programming	9	11-24-2003 11:46 AM

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

11-05-2005, 12:54 PM	#2 (permalink)
Sparky NamePros Member Join Date: Jul 2005 Location: Birmingham, UK Posts: 50	Holy **** that's one mess of code. All you need is: display: inline; That should display it horizontally.

11-06-2005, 05:37 AM	#4 (permalink)
Sparky NamePros Member Join Date: Jul 2005 Location: Birmingham, UK Posts: 50	The mess of code I was reffering to was that JScript code. Have you tried reading through this article: http://www.alistapart.com/articles/hybrid/

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)