webForumDet fria alternativet
Logga in

CSS Dropdowns, fel i IE?

6 svar · 457 visningar · startad av Tengblad

TengbladMedlem sedan dec. 19998 277 inlägg
#1

Har en CSS/JS Dropdown som inte riktigt vill funka på sidan i IE. Det funkar dock felfritt självstående. Firefox eller Opera har inga problem med den på sidan.

Det är "Kategorimeny" som felar.

Sidan -> http://www.wearone.org/tmp/
CSS Dropdown själv: http://www.wearone.org/tmp/Untitled-1.html

index.htm

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>__WearOne__ - Trycksaker f&ouml;r alla smaker. T-shirts, Jerseys, Muggar, Underkl&auml;der, Munkjackor, Jackor</title>
<link href="global.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="menus.js"></script>
</head>
<body onload="MM_preloadImages('images/nav_off_05.jpg','images/nav_off_06.jpg','images/nav_off_07.jpg','images/nav_off_08.jpg','images/nav_off_09.jpg','images/nav_off_10.jpg','images/nav_off_11.jpg')">
<div id="topwrapper">
  <div id="lbynav"><img src="images/lbynav.jpg" width="66" height="250" align="left" />
    <div id="nav"><img src="images/nav_02.jpg" width="134" height="35" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/nav_off_05.jpg',1)"><img src="images/nav_05.jpg" name="Image9" width="134" height="23" border="0" id="Image9" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/nav_off_06.jpg',1)"><img src="images/nav_06.jpg" name="Image10" width="134" height="24" border="0" id="Image10" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/nav_off_07.jpg',1)"><img src="images/nav_07.jpg" name="Image11" width="134" height="26" border="0" id="Image11" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/nav_off_08.jpg',1)"><img src="images/nav_08.jpg" name="Image12" width="134" height="23" border="0" id="Image12" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/nav_off_09.jpg',1)"><img src="images/nav_09.jpg" name="Image13" width="134" height="22" border="0" id="Image13" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/nav_off_10.jpg',1)"><img src="images/nav_10.jpg" name="Image14" width="134" height="26" border="0" id="Image14" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/nav_off_11.jpg',1)"><img src="images/nav_11.jpg" name="Image15" width="134" height="23" border="0" id="Image15" /></a></div>
    <div id="rbynav"></div>
  </div>
</div>
<div id="mainwrap">
  <div id="snav">
    <div id="snavhead"><strong>Produkt</strong>meny</div>
    <div id="navcontainer"><ul id="navlist">
<li id="active"><a href="#" id="current">T-shirts</a></li>
<li><a href="#">L&aring;ng&auml;rmat</a></li>
<li><a href="#">Jerseys</a></li>
<li><a href="#">Jackor</a></li>
<li><a href="#">Damtr&ouml;jor</a></li>
<li><a href="#">Underkl&auml;der</a></li>
<li><a href="#">Presentartiklar</a></li>
</ul></div>
    <div id="snavhead2"><strong>Kategori</strong>meny</div>
	<div id="catnav"><ul id="primary-nav">
  <li class="menuparent"><a href="#">Kategorier Herrar </a>
      <ul>
      <li><a href="#">Cat1</a></li>
      <li><a href="#">Cat2</a></li>
      <li><a href="#">Cat3</a></li>
    </ul>
  </li>

  <li class="menuparent"><a href="#">Kategorier Damer </a> 
    <ul>
      <li><a href="#">Cat1</a></li>
      <li><a href="#">Cat2</a></li>
      <li><a href="#">Cat3</a></li>
    </ul>
  </li>

  <li class="menuparent"><a href="#">Kategorier &Ouml;vrigt </a> 
    <ul>
      <li><a href="#">Cat1</a></li>
      <li><a href="#">Cat2</a></li>
      <li><a href="#">Cat3</a></li>
      <li><a href="#">Cat4</a></li>
    </ul>
  </li>
</ul><br style="clear:both" /></div>
	<div id="snavhead"><strong>Erbjudande</strong>meny</div>
  </div>
  <div id="shop">shopframe</div>
</div>
<div id="logo"></div>
</body>
</html>

global.css

body {
	margin: 0px;
	background-color: #1e1e1e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#snavhead {
	height: 25px;
	width: 160px;
	font-size: 10px;
	color: #FFFFFF;
	margin-left: 53px;
	text-align: center;
	line-height: 24px;
	font-family: Tahoma, Verdana, Arial;
	text-transform: uppercase;
	letter-spacing: 3px;
	background-image: url(images/snav_bg.jpg);
}
#navcontainer {
	width: 160px;
	margin-left: 53px;
	margin-top: 10px;
}

#topwrapper {
	height: 250px;
	width: 100%;
	margin-top: 75px;
	background-image: url(images/header_bg.jpg);
	background-repeat: repeat-x;
}
#lbynav {
	height: 250px;
	width: 687px;
}
#nav {
	width: 134px;
	height: 250px;
	margin-left: 66px;
	background-image: url(images/menu_bg.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#rbynav {
	width: 487px;
	height: 250px;
	background-image: url(images/rbynav.jpg);
	background-repeat: no-repeat;
	float: right;
	margin-top: -250px;
}
#logo {
	position: absolute;
	height: 66px;
	width: 206px;
	left: 25px;
	top: 0px;
	background-image: url(images/logo.gif);
	margin-top: 5px;
}
#shop {
	float: right;
	position: relative;
}
#mainwrap {
	position: relative;
	margin-top: 25px;
}

#snav {
	width: 230px;
	float: left;
	padding-bottom: 3px;
}
#navcontainer ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 20px;
}

#navcontainer a
{
	display: block;
	width: 160px;
	background-color: #252525;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1E1E1E;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: center;
}

#navcontainer a:link, #navlist a:visited
{
color: #666666;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #2A2A2A;
color: #ACBD1F;
}
#snavhead2 {
	height: 25px;
	width: 160px;
	font-size: 10px;
	color: #FFFFFF;
	margin-left: 53px;
	text-align: center;
	line-height: 24px;
	font-family: Tahoma, Verdana, Arial;
	text-transform: uppercase;
	letter-spacing: 3px;
	background-image: url(images/snav_bg2.jpg);
	margin-bottom: 10px;
}
#catnav {
	width: 160px;
	margin-left: 53px;
	position: relative;
}
ul#primary-nav,
ul#primary-nav ul {
	margin: 0;
	padding: 0;
	width: 160px;
	background-color: #252525;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1E1E1E;
	}

ul#primary-nav li {
	position: relative;
	list-style: none;
	}

ul#primary-nav li a {
	display: block;
	text-decoration: none;
	color: #666;
	padding: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1E1E1E;
	line-height: 20px;
	text-align: center;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

ul#primary-nav ul {
	position: absolute;
	display: none;
	left: 159px; /* Set 1px less than menu width */
	top: 0;
	}

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { }

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #2A2A2A; }

ul#primary-nav li a:hover { color: #9DAE14; }

menus.js

// JavaScript Menyer www.wearone.org
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
/*<![CDATA[*/
function IEHoverPseudo() {

	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}

}
window.onload = IEHoverPseudo;
/*]]>*/

Så vad missar jag eller glömmer av? Hur får jag detta att funka i IE som Firefox & Opera?

OkkidoMedlem sedan maj 20007 492 inlägg
#2

http://www.alistapart.com/articles/horizdropdowns/ för att göra det lite snyggare och bättre.

TengbladMedlem sedan dec. 19998 277 inlägg
#3

Okkido skrev:

http://www.alistapart.com/articles/horizdropdowns/ för att göra det lite snyggare och bättre.

I princip exakt samma kod. Något fel på dropdownen i fråga är det ju inte.

OkkidoMedlem sedan maj 20007 492 inlägg
#4
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

// JavaScript Menyer www.wearone.org
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
/*<![CDATA[*/
function IEHoverPseudo() {

	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}

}
window.onload = IEHoverPseudo;
/*]]>*/
TengbladMedlem sedan dec. 19998 277 inlägg
#5

Som sagt javascriptkoden verkar det inget fel på. Koden jag har och den som finns på alistapart bygger på samma princip. Den är byggd utifrån deras förslag. Har redan testat med andra lösningar i JS-koden utan förändring. Det verkar vara något annat som felar.

TengbladMedlem sedan dec. 19998 277 inlägg
#6

Ingen som har några idéer? :(

visslarenMedlem sedan juli 20011 222 inlägg
#7

/red

143 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)