[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Hover Menu Issue: IE 7 moves items to the right (CSS)

Posted on 2007-11-16
2
Medium Priority
?
1,580 Views
Last Modified: 2013-12-08
Hey everybody,

I am a student and while creating a website for my economics club, I encountered a problem that is beyond my head. I usually create the CSS part by somewhat trial-and-error and now Internet Explorer 7 is my only last problem.

I know there have been similar issues before on here, but I'd really appreciate if someone could tell me where my mistake is.

I based my hover menu on this example: http://www.xs4all.nl/~peterned/examples/cssmenu.html

Internet Explorer 7 displays the pop-up menus a couple of pixels to far to the right, hence they are not clickable when you move the mouse to the right. I am also aware that IE6 doesn't display everthing correctly but as long as it works I don't care.

If anyone could tell me what to change in order to make it work in IE7 (without braking the functionality in Firefox, Safari, IE6...), I would be very glad.
Because this is really important to me, I am also willing to give away a lot of points.

In the Code Section, there are two parts: one is the HTML-Website-code, the other part is the contend of a file called "csshover.htc" in order to make things happen on IE6.

Please excuse my English, I am German.
HTML/CSS Source Code (only necessary parts):
 
<html>
<head>
	<style type="text/css">
 
	body {
		behavior:url("../htc/csshover.htc");}
	
		div#PageBox {
			padding: 20px 0px 0px 30px;
			width:auto;
			margin:12px;}
 
		ul#MenuLeft {
			border: 1px solid black;
			width: 105px;
			margin:0;
			padding:0 0 0 2px;}
 
		ul#MenuLeft li {
			display:block;
			font-size:14px;
			list-style: none;
			padding:0;
			margin: 0;}
 
		#MenuLeft li{
			position:relative;
			z-index:9;}
 
		li.MenuLeftFlip ul {
			width:140px;
			background-color:#ffffff;
			padding: 2px;
			border: 1px solid black;
			position:absolute;
			left:60px; /* might be related to IE6*/
			top:0px;}
 
		li.MenuLeftFlip>ul {
			left:105px;} /* might be related to IE7 */
 
		li.MenuLeftFlip:hover {
			z-index:10;}		
 
		ul#MenuLeft ul { 
			display:none;}
 
		#MenuLeft li:hover ul ul { 
			display:none;}	
 
		#MenuLeft li:hover ul { 
			display:block;}	
 
		#MenuLeft li:hover li:hover ul { 
			display:block;}	
 
		ul#MenuLeft a {
			padding:3px; 
			display:block;
			text-decoration: none;}
 
		ul#MenuLeft a:link {
			text-decoration: none;}
 
		ul#MenuLeft a:visited {
			text-decoration: none;}			
 
		ul#MenuLeft a:hover {
			text-decoration:none;
			background-color: red;}			
 
		ul#MenuLeft a:active {
			text-decoration: none;
			background-color:#F8C400;}
	
	</style>
</head>
 
<body>
 
<div id="PageBox">
 
<ul id="MenuLeft">
    <li><a href="#">Item A</a></li>
    <li class="MenuLeftFlip">
    <a href="#">Item B</a>
        <ul>
        <li><a href="#">Subitem A</a></li>
        <li><a href="#">Subitem B</a></li>
        <li><a href="#">Subitem C</a></li>
        <li><a href="#">Subitem D</a></li>
        <li><a href="#">Subitem E</a></li>
        </ul>
    </li>
    <li class="MenuLeftFlip">
    <a href="#">Item C</a>
        <ul>
        <li><a href="#">Subitem A</a></li>
        <li><a href="#">Subitem B</a></li>
        <li><a href="#">Subitem C</a></li>
        <li><a href="#">Subitem D</a></li>
        <li><a href="#">Subitem E</a></li>
        </ul>
    </li>
    <li class="MenuLeftFlip">
    <a href="#">Item D</a>
        <ul>
        <li><a href="#">Subitem A</a></li>
        <li><a href="#">Subitem B</a></li>
        <li><a href="#">Subitem C</a></li>
        <li><a href="#">Subitem D</a></li>
        <li><a href="#">Subitem E</a></li>
        </ul>
    </li>
    <li><a href="#">Item E</a></li>
</ul>
</div>
 
</body>
</html>
 
 
 
***********************************************************************
File "csshover.htc", stored in the same directory:
 
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V1.42.060206 - hover & active
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */
 
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}
 
function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	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(!csshoverReg.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|active).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;
 
		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;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}
 
	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}
 
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 identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		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(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

Open in new window

0
Comment
Question by:Klemi
2 Comments
 
LVL 15

Accepted Solution

by:
ncoo earned 2000 total points
ID: 20300900
Try adding:

* {margin:0;padding:0}

To your stylesheet.
0
 

Author Comment

by:Klemi
ID: 20307598
Incredible.

I struggled with this for 3 months now... I am so glad that you answered.

You just gained yourself 500 points!

Thank you and goodbye!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Each password manager has its own problems in dealing with certain websites and their login methods. In Part 1, I review the Top 5 Password Managers that I've found to be the best. In Part 2 we'll look at which ones co-exist together and why it'…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month7 days, 14 hours left to enroll

607 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