Jump to content

Works in IE6 but not IE7?


BigAl75

Recommended Posts

Instead of creating two seperate pages for every page on the website, I decided to use the csshover.htc file found online for my horizontal drop-down navigation. It works perfect in both FF and IE6, but when you hover over in Opera or IE7, the drop-down menu dissappears. It almost acts like it's on a timer, or there's a certain spot that triggers the menu to dissappear, because it goes away at almost the exact same place each time. I have been able to get it to stay if you hover very slowly over the sections in the drop-down, but I want it to work like it's supposed to (like in IE6 and FF).Has anyone ever experienced anything like this before? Anyone have any experience using the csshover.htc file? Right now, this is the only thing keeping the site from being ready to be uploaded to the server.I'm not going to post any code as of yet because I'm not sure what all you'll need to see, and I don't want to put up 6 different codeblocks when you only need 2.Al

Link to comment
Share on other sites

OK, here goes (don't laugh, up until last month, I'd never designed a site layout using anything but table):html:

<!--Import the PMI Style Sheet--><link href="../style/pmi.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]><link href="../style/menuv.css" rel="stylesheet" type="text/css" />	<style type="text/css" media="screen">		body{behavior:url(../style/csshover.htc);}	</style><![endif]--><!--[if IE 7]><link href="../style/IEpmi.css" rel="stylesheet" type="text/css" /><![endif]--><!--*********HORIZONTAL_MENU**********--><div id="horiz_a">	<div id="horiz">		<ul>			<li><h2><a href="pore_size.html" title="Machines for testing pore size of a sample">Pore Size</a></h2>				<ul>					<li><a href="capillary_flow_porometer.html" title="Capillary Flow Porometers">Capillary Flow Porometer</a></li>					<li><a href="compression_porometer.html" title="Compression Porometer">Compression Porometer</a></li>					<li><a href="bubble_point_tester.html" title="Bubble Point Tester">Bubble Point Tester</a></li>					<li><a href="complete_filter_cartridge_tester.html" title="Complete Filter Cartridge Analyzer">Complete Filter Cartridge Analyzer</a></li>					<li><a href="liquid_extrusion_porosimeter.html" title="Liquid Extrusion Porosimeter">Liquid Extrusion Porosimeter</a></li>					<li><a href="mercury_porosimeter.html" title="Mercury/Non-Mercury Intrusion Porosimeter">Mercury/Non-Mercury Intrusion Porosimeter</a></li>					<li><a href="sorptometer_BET.html" title="BET Sorptometer">BET Sorptometer</a></li>					<li><a href="bet_liquisorb.html" title="Liquisorb Sorptometer">Liquisorb Sorptometer</a></li>				</ul>			</li>		</ul>		<ul>			<li><h2><a href="pore_volume.html" title="Machines for testing pore volume of a sample.">Pore Volume</a></h2>				<ul>					<li><a href="mercury_porosimeter.html" title="Mercury/NonMercury Intrusion Porosimeter">Mercury/NonMercury Intrusion Porosimeter</a></li>					<li><a href="liquid_extrusion_porosimeter.html" title="Liquid Extrusion Porosimeter">Liquid Extrusion Porosimeter</a></li>							<li><a href="sorptometer_BET.html" title="BET Sorptometer">BET Sorptometer</a></li>					<li><a href="bet_liquisorb.html" title="Liquisorb Sorptometer">Liquisorb Sorptometer</a></li>				</ul>			</li>		</ul>		<ul>			<li><h2><a href="permeability.html" title="Machines for testing permeability of a sample.">Permeability</a></h2>				<ul>					<li><a href="capillary_flow_porometer.html" title="Capillary Flow Porometer">Capillary Flow Porometer</a></li>					<li><a href="multi_mode_porometer.html" title="Customer Porometer">Customer Porometer</a></li>					<li><a href="liquid_permeameter.html" title="Liquid Permeameter">Liquid Permeameter</a></li>					<li><a href="gas_permeameter.html" title="Gas Permeameter">Gas Permeameter</a></li>								<li><a href="diffusion_permeameter.html" title="Diffusion Permeameter">Diffusion Permeameter</a></li>					<li><a href="vapor_permeameter.html" title="Vapor Permeameter">Vapor Permeameter</a></li>					<li><a href="microflow_porometer.html" title="Microflow Porometer">Microflow Porometer</a></li>								<li><a href="compression_porometer.html" title="Compression Porometer">Compression Porometer</a></li>					<li><a href="complete_filter_cartridge_tester.html" title="Complete Filter Cartridge Analyzer">Complete Filter Cartridge Analyzer</a></li>					<li><a href="liquid_extrusion_porosimeter.html" title="Liquid Extrusion Porosimeter">Liquid Extrusion Porosimeter</a></li>					<li><a href="water_vapor_transmission_analyzer.html" title="Water Vapor Transmission Analyzer">Water Vapor Transmission Analyzer</a></li>				</ul>			</li>		</ul>		<ul>			<li><h2><a href="density.html" title="Machines for testing the density of a sample.">Density</a></h2>				<ul>					<li><a href="mercury_porosimeter.html" title="Mercury/NonMercury Intrusion Porosimeter">Mercury/NonMercury Intrusion Porosimeter</a></li>					<li><a href="gas_pycnometer.html" title="Gas Pycnometer">Gas Pycnometer</a></li>					<li><a href="mercury_pycnometer.html" title="Mercury Pycnometer">Mercury Pycnometer</a></li>				</ul>			</li>		</ul>		<ul>			<li><h2><a href="surface_area.html" title="Machines for testing the surface area of a sample.">Surface Area</a></h2>				<ul>					<li><a href="sorptometer_BET.html" title="BET Sorptometer">BET Sorptometer</a></li>					<li><a href="bet_liquisorb.html" title="Liquisorb Sorptometer">Liquisorb Sorptometer</a></li>							<li><a href="capillary_flow_porometer.html" title="Capillary Flow Porometer">Capillary Flow Porometer</a></li>					<li><a href="liquid_extrusion_porosimeter.html" title="Liquid Extrusion Porosimeter">Liquid Extrusion Porosimeter</a></li>					<li><a href="envelope_surface_area_analyzer.html" title="Envelope Surface Area Analyzer">Envelope Surface Area Analyzer</a></li>					<li><a href="mercury_porosimeter.html" title="Mercury/NonMercury Intrusion Porosimeter">Mercury/NonMercury Intrusion Porosimeter</a></li>				</ul>			</li>		</ul>		<ul>			<li><h2><a href="adsorption.html" title="Machines for testing the adsorption of a sample.">Adsorption</a></h2>				<ul>					<li><a href="sorptometer_BET.html" title="BET Sorptometer">BET Sorptometer</a></li>					<li><a href="bet_liquisorb.html" title="Liquisorb Sorptometer">Liquisorb Sorptometer</a></li>				</ul>			</li>		</ul>									</div></div>

Normal CSS:

/*--Begin horizontal menu coding--*/#horiz_a {	padding: 0px;	height: 25px;	position: static;	margin: 0px auto 0px auto;	width: 732px;}#horiz_b {	padding: 0px;	height: 25px;	position: static;	margin: 0px auto 0px auto;	width: 610px;}#horiz {	background: white;	font: 11px Arial, Helvetica, sans-serif;	position: absolute;}#horiz ul {	list-style: none;	margin: 0;	padding: 0;	width: 120px;	float: left;	border: 1px solid Black;}#horiz a, #horiz h2 {	font: 11px/18px arial, helvetica, sans-serif;	margin: 0;	display: block;}#horiz h2 {	color: Black;	background: #99CCFF;	text-align: center;}#horiz a {	color: #000;	background: #99CCFF;	text-decoration: none;	padding-left: 5px;}#horiz a:hover {	color: Blue;	background: #FFCC66;	display: block;}#horiz li {	text-align: left;	display: block;	position: relative;}#horiz ul ul {	position:absolute;	z-index:500;	top:auto;	display:none;}#horiz ul ul ul {	top: 0;	left: 100%;	text-align: left;}#horiz ul ul li {	border-top: 1px solid black;	border-bottom: 1px solid black;	text-align: left;}#horiz ul ul li a {	text-align: left;}div#horiz ul ul, div#horiz ul li:hover ul ul, div#horiz ul ul li:hover ul ul {	display: none;}div#horiz ul li:hover ul, div#horiz ul ul li:hover ul, div#horiz ul ul ul li:hover ul {	display: block;}/*--End horizontal menu coding--*/

IE7 CSS:

body{	behavior: url(csshover.htc);	font-size: 12px;	background-color: White;}#horiz_a {	padding: 0px;	height: 25px;	position: static;	margin: 0px auto 0px auto;	width: 732px;}#horiz{	float:none;}#horiz ul li{	width: 120px;	display: block;	position: relative;}#horiz a{	height:1%;	font: 11px/16px arial, sans-serif;}#horiz a:hover {	color: Blue;	background: #FFCC66;	display: block;}#horiz li {	text-align: left;	display: block;	position: relative;}#horiz ul ul {	position:absolute;	z-index:500;	top:auto;	display:none;}#horiz ul ul ul {	top: 0;	left: 100%;	text-align: left;}#horiz ul ul li {	border-top: 1px solid black;	border-bottom: 1px solid black;	text-align: left;}#horiz ul ul li a {	text-align: left;}div#horiz ul ul, div#horiz ul li:hover ul ul, div#horiz ul ul li:hover ul ul {	display: none;}div#horiz ul li:hover ul, div#horiz ul ul li:hover ul, div#horiz ul ul ul li:hover ul {	display: block;	top: 15px;	left: 0px;}

IE6 CSS:

#horiz_a {	padding: 0px;	height: 25px;	position: static;	margin: 0px auto 0px auto;	width: 732px;}#horiz{	float:none;}#horiz ul li{	width: 120px;	display: block;	position: relative;}#horiz a{	height:1%;	font: 11px/16px arial, sans-serif;}#horiz a:hover {	color: Blue;	background: #FFCC66;	display: block;}#horiz li {	text-align: left;	display: block;	position: relative;}#horiz ul ul {	position:absolute;	z-index:500;	top:auto;	display:none;}#horiz ul ul ul {	top: 0;	left: 100%;	text-align: left;}#horiz ul ul li {	border-top: 1px solid black;	border-bottom: 1px solid black;	text-align: left;}#horiz ul ul li a {	text-align: left;}div#horiz ul ul, div#horiz ul li:hover ul ul, div#horiz ul ul li:hover ul ul {	display: none;}div#horiz ul li:hover ul, div#horiz ul ul li:hover ul, div#horiz ul ul ul li:hover ul {	display: block;}

And the hovercss.htc file:

<attach event="ondocumentready" handler="parseStylesheets" /><script>/** *	Whatever:hover - V1.41.050927 - hover & active *	------------------------------------------------------------ *	© 2005 - Peter Nederlof *	Peterned - [url="http://www.xs4all.nl/~peterned/"]http://www.xs4all.nl/~peterned/[/url] *	License  - [url="http://creativecommons.org/licenses/LGPL/2.1/"]http://creativecommons.org/licenses/LGPL/2.1/[/url] * *	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) return [doc.getElementById(identify[1])];				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>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...