---
title: "Varför fungerar detta i Explorer men inte i Firefox"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/128740-varför-fungerar-detta-i-explorer-men-inte-i-firefox"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "kicki_an"
published: "2005-05-23T15:40:27.000Z"
updated: "2005-06-29T07:30:21.000Z"
replies: 8
views: 671
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/128740-varför-fungerar-detta-i-explorer-men-inte-i-firefox"
---

# Varför fungerar detta i Explorer men inte i Firefox

## #1 — kicki_an, 2005-05-23T15:40Z

Följande kod fungar jättebra i Explorer och resulterar i en drop-downmeny när musmarkören står över "Snabblänkar".

I Firefox blir det likadant, men när man försöker välja ett alternativ så har drop-down-listen redan försvunnit. Man hinner aldrig ställa sig över det alternativ man vill välja.

Hoppas att någon vänlig själ kan hjälpa mig finna problemet.

```
<td align="right" style="background-image:url(images/menu_bot_bg.gif); background-repeat:repeat-x" width="80">
<ul id="nav"><li>&nbsp; Snabbl&auml;nkar &raquo; <ul>
		<div style="margin-top:3px; margin-left:4px; margin-bottom:4px; margin-right:4px;">

      <li><a href="content/travel/charter/index.php" target="content" id="ablack">&nbsp; Charter</a></li>

      <li><a href="content/travel/flight/index.php" target="content" id="ablack">&nbsp; Flyg</a></li>

      <li><a href="content/travel/car/index.php" target="content" id="ablack">&nbsp; Hyrbil</a></li>

      <li><a href="content/travel/apartments/index.php" target="content" id="ablack">&nbsp; Boende &amp; hotell</a></li>

      <li> <a href="content/travel/cruise/index.php" target="content" id="ablack">&nbsp; Kryssningar</a></li>

      <li> <a href="content/travel/ferry/index.php" target="content" id="ablack">&nbsp; F&auml;rjor</a></li>

      <li><a href="content/travel/buss/index.php" target="content" id="ablack">&nbsp; Buss</a><br>

      <li><a href="content/travel/sport/index.php" target="content" id="ablack">&nbsp; Golf &amp; Sportresor</a></li>

      <li><a href="content/travel/sweden/index.php" target="content" id="ablack">&nbsp; Resa i Sverige</a></li>

      <li><a href="content/travel/group/index.php" target="content" id="ablack">&nbsp; Grupp &amp; konferens</a></li>

      <li> <a href="content/travel/wedding/index.php" target="content" id="ablack">&nbsp; Br&ouml;llopsresor</a></li>

      <li> <a href="content/travel/tours/index.php" target="content" id="ablack">&nbsp; Specialresor </a></li>

<br><br></div></ul>
</li>
</ul>
    </td>
```

Permalänk: https://www.webforum.nu/p/128740

## #2 — Insider, 2005-05-23T15:44Z

Jag tror ditt problem ligger i css-koden, så du får nog länka till sidan eller lägga upp all kod här.

En snabb lösning KAN vara att lägga till:

```
#nav {z-index:999;}
```

Permalänk: https://www.webforum.nu/p/1615866

## #3 — nitro2k01, 2005-05-23T15:47Z

Du får inte ha samma id på flera element. Ändra id="ablack" till class="ablack". Och ändra detta i CSS: #ablack till .ablack

/r Vet inte om detta är anledningen till ditt problem, men det är ändå ett fel, och du bör fixa det hur som haver.

Permalänk: https://www.webforum.nu/p/1615867

## #4 — tydal, 2005-05-23T16:00Z

Kontrollera din kod här först. De brukar faktiskt hitta de flesta fel.

<http://validator.w3.org/>
<http://jigsaw.w3.org/css-validator/>

Permalänk: https://www.webforum.nu/p/1615873

## #5 — kicki_an, 2005-05-24T07:31Z

Hejsan!

Det verkar som om det är \<iframe\>:en nedanför drop-down-listen som ställer till det i Firefox. I Explorer fungerar koden som den ska. Någon som har någon idé hur man kommer runt det? Se kod nedan:

```

<html>

<head>

<title>Dropdown</title>

<style type="text/css">

body {
	font-family: arial, helvetica, serif; font-size:11px; 
	}

a						{
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	text-decoration:none;
	;
	font-weight: normal;
	font-size: 11px;
}

a:hover 				{
	font-family: Arial, Helvetica, sans-serif;
	color:#ED1B23;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}

a:visited 				{
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
}

a:active 				{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #ED1B23;
	text-decoration: none;
}
ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	}

li { /* all list items */
	float: left;
	position: relative;
	width: 10em;
	text-align: left;
	cursor: default;
	/*background-color: #EFF0F3;*/
	}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	background-color: #EFF0F3;
	border-bottom:1px solid #9E9FA3;
	border-left:1px solid #9E9FA3;   
	border-right:1px solid #9E9FA3;
	/*border: 1px solid #7d6340; 
	border-width: 1px 0;
	margin-top:4px*/
	
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
}

#content {
	clear: left;
}

</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
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;

//--><!]]></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body>
<table>
<tr>
<td>
<ul id="nav">

	<li>&nbsp; Våra resor
		<ul><div style="margin-top:4px; margin-left:4px; margin-bottom:4px; margin-right:4px;">
		<li><a href="#">Länk nummer 1</a></li>
        <li><a href="#">Länk nummer 2</a></li>
        <li><a href="#">Länk nummer 3</a></li>
        <li><a href="#">Länk nummer 4</a></li>
        <li><a href="#">Länk nummer 5</a></li>
        <li><a href="#">Länk nummer 6</a></li>
        <li><a href="#">Länk nummer 7</a></li>
        <li><a href="#">Länk nummer 8</a></li>
        <li><a href="#">Länk nummer 9</a></li>
 		</div></ul>
	</li>
</ul>
</td></tr>
<tr><td>

<iframe src="" width="550" height="400">
</iframe>
</td>
</tr>
</table>
</body>

</html>
```

Permalänk: https://www.webforum.nu/p/1616059

## #6 — tydal, 2005-05-24T08:03Z

Om du kontrollerar koden via länken jag gav ovanför så ser du att du har placerat \<div\> och \<ul\> i fel ordning. Det ska vara \<div\> först och \<ul\> sen, samt motsvarande på slutet (\</ul\> först och \</div\> sen).

Jag ser ingen skillnad mellan IE och Firefox.

Permalänk: https://www.webforum.nu/p/1616068

## #7 — tydal, 2005-05-24T08:05Z

Aha, det var javaskriptet du tänkte på, att den försvinner över iframen... Ja, det stämmer, det gör den i Firefox... Hmm...

Permalänk: https://www.webforum.nu/p/1616070

## #8 — kolas, 2005-06-09T12:06Z

Denna sida borde lösa problemet:

<http://www.htmldog.com/articles/suckerfish/dropdowns/>

Permalänk: https://www.webforum.nu/p/1628778

## #9 — Nino82, 2005-06-29T07:30Z

Test att sätt position: fixed; på \<ul id="nav"\>

Permalänk: https://www.webforum.nu/p/1638036

---

Tråden på webben: https://www.webforum.nu/amne/html-css/128740-varför-fungerar-detta-i-explorer-men-inte-i-firefox
