Datenschutzerklärung

unterschiedliche Darstellung im Firefox und IE

Validome - Forum

Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / Javascript-Forum /

unterschiedliche Darstellung im Firefox und IE

  Beitrag schreiben
Autor
Beitrag Seiten: 1
GaMe83
Mitglied

Registriert: 16.06.2007
Beiträge: 1
Hallo,

ich habe folgendes Problem.
Wie auf den Bild zu sehen wird meine Navigationsleiste unter Firefox und IE unterschiedlich angezeigt.
Diese Leiste soll wie folgt funktionieren:
Wenn ich auf die Flächen "Menü 1" bis "Menü 5" mit der Maus gehe, gehen Untermenüs auf.
Wenn ich dann im "Menü 4" auf das "Submenü 4.2" gehe, sollen sich weitere Untermenüs öffnen. Diese sind mit "Submenü 4.2.1" bis "Submenü 4.2.9" beschriftet.
Dies funktioniert auch soweit unter Firefox ( siehe hier http://www.nestroni.de/mit_Firefox.JPG ) aber unter IE verschiebt es mir das ganze (siehe hier http://www.nestroni.de/mit_IE.JPG) und ich weis absolut nicht woran das liegt.
Ich habe mir das Script unter http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=469 runtergeladen und für mich angepasst.
Es sind durch das anpassen sicher ein paar unnötige oder unrichtige Zeilen rein gekommen.
Da ich ein totaler Anfänger in der Materie bin kenne ich mich damit noch nicht so aus.

Wie bekomme ich es hin, damit es mir im IE das gleiche anzeigt wie im Firefox?

Hier mal das Script:
Ich vermute das es was mit der "left" zu tun hat.


<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 12px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.menu
{
position: absolute;
z-index: 6;
top: 10px;
left: 143px;
}

.menud
{
position: absolute;
z-index: 6;
top: 59px;
left: 120px;
}

.menu li
{
width: 120px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 17px;
color: #000;
}

.menu a:hover
{
background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6
{
font-size: 11px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}

//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<link href="file:///C|/Dokumente%20und%20Einstellungen/Ich/Eigene%20Dateien/Neue%20HP/Menue.css" rel="stylesheet" type="text/css">
</head>
<body background="Bilder/Backgroundup.jpg">
<div class="menu">
<ul>
<li><a href="" target="mainFrame" style="cursorointer;">Home</a>
</li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');" style="cursor:url(http://www.nestroni.de/website/Bilder/mousecopen.gif), pointer;">Menü1</a>
<ul id="smenu1" onMouseOver="montre('smenu1');" onMouseOut="cache('smenu1');">
<li><a href="" target="mainFrame" style="cursor:url(http://www.nestroni.de/Website/Bilder/mousecopen.gif), pointer;">Submenü 1.1</a></li>
<li><a href="" style="cursor:url(http://www.nestroni.de/Website/Bilder/mousecopen.gif), pointer;">Submenü 1.2</a></li>
<li><a href="" target="mainFrame" style="cursor:url(http://www.nestroni.de/Website/Bilder/mousecopen.gif), pointer;">Submenü 1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');">Menü 2</a>
<ul id="smenu2" onMouseOver="montre('smenu2');" onMouseOut="cache('smenu2');">
<li><a href="">Submenü 2.1</a></li>
<li><a href="">Submenü 2.2</a></li>
<li><a href="" target="mainFrame">Submenü 2.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');">Menü 3</a>
<ul id="smenu3" onMouseOver="montre('smenu3');" onMouseOut="cache('smenu3');">
<li><a href="">Submenü 3.1</a></li>
<li><a href="">Submenü 3.2</a></li>
<li><a href="">Submenü 3.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu4');" onMouseOut="cache('smenu4');">Menü 4</a>
<ul id="smenu4" onMouseOver="montre('smenu4');" onMouseOut="cache('smenu4');">
<li><a href="">Submenü 4.1</a></li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu6');" onMouseOut="cache('smenu6');">Submenü 4.2</a>
<ul id="smenu6" onMouseOver="montre('smenu6');" onMouseOut="cache('smenu6');">
<div class="menud">
<li><a href="">Submenü 4.2.1</a></li>
<li><a href="">Submenü 4.2.2</a></li>
<li><a href="">Submenü 4.2.3</a></li>
<li><a href="">Submenü 4.2.4</a></li>
<li><a href="">Submenü 4.2.5</a></li>
<li><a href="">Submenü 4.2.6</a></li>
<li><a href="">Submenü 4.2.7</a></li>
<li><a href="">Submenü 4.2.8</a></li>
<li><a href="">Submenü 4.2.9</a></li>
</div>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);" onMouseOver="montre('smenu5');" onMouseOut="cache('smenu5');">Menü 5</a>
<ul id="smenu5" onMouseOver="montre('smenu5');" onMouseOut="cache('smenu5');">
<li><a href="">Submenü 5.1</a></li>
<li><a href="">Submenü 5.2</a></li>
</ul>
</li>
</ul>
</div>

</body>


Danke schon mal für die Hilfe.

PS: Ich bin ein absoluter Anfänger in der Materie also bitte einfach erklären.

Beitrag geändert von GaMe83 (16.06.2007 13:34:29)


16.06.2007 13:33:41
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01