✔ IE Prob bei Menü

[tigerlily]

Hallo,

ich bin es mal wieder , erstmal nochmal herzlichsten Dank für die schnelle und kompetente Hilfe in meinem vorherigen Thread.

Also nochmal kurz zur Erläuterung. Ich habe ein Drop Down Menü unter CSS erstellt. Dies läuft Prima im FF und Opera. Im IE wurden mir die Submenü Punkte gar nicht angezeigt. Also habe ich mal ein wenig gegoogelt und im Forum gesucht und bin schon teilweise fündig geworden. Und zwar habe ich mir die Datei csshover.htc eingebunden in meine Datei. Nun zeigt mir der IE brav das Menü an, aber anstatt nebeneinander wie vorgesehen zeigt er es mir treppenförmig an :suspekt:

Hier mal ein Screenshot von dem ganzen.

http://foto.arcor-online.net/palb/alben/09/650209/1280_6332353530303137.jpg

Falls noch benötigt poste ich gern nochmal meine css datei

ul#navlist 
{ 
font-family: sans-serif; 
}

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

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

ul#navlist li 
{ 
float: left; 
}

ul#navlist li a
{
color: #000000;
background-color: #009900;
padding: 3px;
border: 1px solid black;
}

ul#navlist li a:hover
{
color: #000000;
background-color: #009900;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #009900;
border: 1px solid black;
}

ul#subnavlist 
{ 
display: none; 
border: 1px solid black;
}

ul#subnavlist li 
{ 
float: none; 
}

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;

}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before 
{ 
content: " >> "; 
}

body 
{
	background-color: #FFFFFF;
	background-image: url("outcome.jpg");   
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left top;


}

Irgendwie müsste ich dort definieren das beim IE die einzelnen Menüpunkte nebeneinander angezeigt werden sollen. Aber irgendwie habe ich ein Brett vorm Kopf und sitze seid gestern Nachmittag daran und bin noch nicht wirklich weiter gekommen auf des Rätsels Lösung. Wäre sehr dankbar für Denkanstöße.

gruss

dany

 

[Maik]

Hi,

versuch es mal mit

ul#navlist li 
{ 
display:inline;
}

Siehe hierzu auch http://css.maxdesign.com.au/listamatic/ -> Horizontal lists.

 

[tigerlily]

Hallo,

also wenn ich nur

ul#navlist li 
{ 
display:inline;
}

schreibe dann wird das Menü ebenfalls im FF treppenartig.

Wenn ich folgendes schreibe:

ul#navlist li 
{ 
float: left; 
display:inline;

}

dann wird das Menü im FF wieder korrekt angezeigt aber im IE verändert sich leider nichts, heißt es sieht immer noch verkrüppelt aus
Bin noch weiter auf der Seite am suchen dessen Link zu dir angehangen hast. Bis jetzt aber noch nicht schlauer geworden.

gruss

dany

 

[Maik]

Wenn ich den Quellcode aus deinem Thread http://www.tutorials.de/forum/css/291219-probleme-mit-dem-submenue.html verwende, und die falsch, weil überflüssig, gesetzten ul-Elemente #navlist (rotmarkiert) entferne, werden die Links im IE6 trotz ul#navlist li { float:left } horizontal und nicht treppenartig angeordnet:

<ul id="navlist">
<li id="active"><a href="#" id="current">Alle anzeigen</a></li>
<li><a href="#">Mitarbeiter anlegen</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Mitarbeiter suchen</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Namenssuche</a></li>
<li><a href="#">Suchkriterien</a></li>
</ul>
</li>
<li><a href="#">Daten aktualisieren</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Einstellungen</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Verzeichnisse</a></li>
</ul>
</li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Stammdaten</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Beratungspunkte</a></li>
<li><a href="#">Branchen</a></li>
<li><a href="#">Datenbanken</a></li>
<li><a href="#">Fremdsprache</a></li>
<li><a href="#">Fremdsprachenstatus</a></li>
<li><a href="#">Methoden</a></li>
<li><a href="#">Programmiersprachen</a></li>
<li><a href="#">Qualifikation</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Zertifizierung</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Firmendaten</a></li>
<li><a href="#">Beraterstatus</a></li>
</ul>
</li>
<li><a href="#">Alte Profile</a></li>
</ul>

Und wie ich dich gestern schon darauf hingewiesen hatte, darf eine ID in einem HTML-Dokument nur einmal vergeben werden. Somit müssen alle mehrfach vorhandenen IDs in Klassen umgewandelt werden.

 

[tigerlily]

Danke, funktioniert. Hatte ich wohl gestern überlesen.

gruss

dany