✔ Problem mit Listen-Menü (IE)

Status
Nicht offen für weitere Antworten.
Fabian Frank

Fabian Frank

Erfahrenes Mitglied
Hallo!

Habe mal wieder ein Problem mit dem IE:

Es besteht ein Listenmenü, Firefox perfekt, IE zeigt es falsch an (untereinander). (Bild 1 zeigt den IE, Bild 2 den Firefox, also so, wies sein sollte)

Im Anhang finden Sich Grafiken zur Veranschaulichung...

Hier der Code des Stylesheets für die Navigation:
PHP: 
#menu { width: 100%; background: #0072bc; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; float: left; height: 23px;}

#menu a, #menu h2
  { font: 11px/16px arial;
  display: block;
  margin: 0; padding: 0px;}

#menu h2 { color: #ffffff; background: #0072bc; border-left: 1px #3c93cc solid;}

#menu a { color: #ffffff; background-image: url(img/back_menu.png); text-decoration: none; padding-bottom: 4px; padding-top: 3px; padding-left: 8px; padding-right: 8px; font-size: 10px;}

#menu a:hover {background-image: url(img/menu_hover.png);}

#menu li {position: relative;}

#menu ul ul { position: absolute; z-index: 500; width: 150px; font-size: 10px;}

#menu ul ul ul { position: absolute; top: 0; left: 100%; }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  {display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
  {display: block;}

Vielen Dank für eure Hilfe!

Grüße, Fabian
 

Anhänge

  • 1.gif
    1.gif
    1,1 KB · Aufrufe: 19
  • 2.gif
    2.gif
    922 Bytes · Aufrufe: 18
Hi,

nimm mal folgende Erweiterungen im Stylesheet vor:

Code: 
#menu ul li { display:inline; }

#menu a { float:left; color: #ffffff; background-image: url(img/back_menu.png); text-decoration: none; padding-bottom: 4px; padding-top: 3px; padding-left: 8px; padding-right: 8px; font-size: 10px;}
mfg Maik
 
Hi,

da gibt's dann wohl nur zwei Möglichkeiten, die da in Betracht kommen: entweder ist dir irgendwo ein Fehler unterlaufen, oder irgendeine andere CSS-Regel innerhalb des Stylesheets, die du hier nicht gezeigt hast, schiesst da quer, denn mein Vorschlag funktioniert mit deinem Codeschnipsel erwartungs- und erfahrungsgemäß im IE 6 + 7 einwandfrei, wie ihre Screenshots beweisen:

demo_IE.jpg

Selbst im antiquierten IE 5.01 und IE 5.5 werden die Menüpunkte mit diesen Regelerweiterungen horizontal ausgerichtet :suspekt:

mfg Maik
 
Der Vollständigkeit halber, reiche ich hier den Quellcode meiner Testseite nach:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_FabianFrank</title>

<style type="text/css">
<!--
#menu { width: 100%; background: #0072bc; float: left; }

#menu ul { list-style: none; margin: 0; padding: 0; float: left; height: 23px;}

#menu ul li { display:inline; }

#menu a, #menu h2
  { font: 11px/16px arial;
  display: block;
  margin: 0; padding: 0px;}

#menu h2 { color: #ffffff; background: #0072bc; border-left: 1px #3c93cc solid;}

#menu a { float:left; color: #ffffff; background-image: url(img/back_menu.png); text-decoration: none; padding-bottom: 4px; padding-top: 3px; padding-left: 8px; padding-right: 8px; font-size: 10px;}

#menu a:hover {background-image: url(img/menu_hover.png);}

#menu li {position: relative;}

#menu ul ul { position: absolute; z-index: 500; width: 150px; font-size: 10px;}

#menu ul ul ul { position: absolute; top: 0; left: 100%; }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  {display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
  {display: block;}
-->
</style>


</head>
<body>

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</div>

</body>
</html>
 
hai Maik,

danke. Jetzt funktionierts, der Tip mit dem Stylesheet war ausschlaggebend. Hatte noch eine IE browserweiche drin...

grüße, fabi
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück