Dropdown CSS Menü - IE macht Probleme

[FleyerShaver]

Hi,
ich wollte mir gerade ein einfaches Menü mit CSS machen, aber der IE will nicht. Der Opera und der Firefox stellen alles richtig da, aber im IE wird das Dropdown nicht angezeigt.
CSS:

#nav li div { 
    display:none; 
}
#nav li:hover div { 
    display:block; 
}
#nav img {
border-width:0px;
}
#sublinks { 
    z-index:50;
    position:absolute;
    margin:auto;
    top:27px;height:30px;
    width:180px;
}
#sublinks a#links {
    background:url(images/header_sub_mitte.gif) no-repeat;
}
#sublinks a:hover#links { 
    background:url(images/header_sub_mitte_hover.gif) no-repeat; 
}
#sublinks a#linkslast { 
    background:url(images/header_sub_last.gif) no-repeat; 
}
#sublinks a:hover#linkslast { 
    background:url(images/header_sub_last_hover.gif) no-repeat; 
}

Der HTML-Code:

<ul id="nav" class="nav" style="z-index:49;"><li><a href="index.php">Startseite</a></li>
<li><a href="#">Mein Profil</a>
        <div id="sublinks">
          <a href="profile.php?lookup=1" id="links"><img src="images/fam/image_edit.png" alt="">Profil ansehen</a>
          <a href="edit_profile.php" id="links"><img src="images/fam/image_edit.png" alt="">Profil bearbeiten</a>
          <a href="adv_profile.php" id="linkslast"><img src="images/fam/image_edit.png" alt="">Weitere Einstellungen</a>
   
        </div>
</li>

Was mach ich falsch???

 

[koslowski]

Hi,

schau doch mal hier
Dort unter "Menus - Multi-Level CSS Only" -> ganz ohne JavaScript, aber mit ConditionalComments für den IE)

 

[FleyerShaver]

Danke, ich guck es iir gleich an.

Immer muss man extra wegen dem IE arbeiten. Wieso kann er nicht so sein sie jeder Browser

 

[koslowski]

Hi,

Zitat von FleyerShaver:
Immer muss man extra wegen dem IE arbeiten. Wieso kann er nicht so sein sie jeder Browser

.

Ja, das ist schon ärgerlich.
Der Grund ist das HasLayout- Prinzip des IE.
Wenn ein Element Layout hat stellt es der Internetesel richtig dar, ist hasloyout auf False gesetzt macht er Quatsch, d.h. er geht in den
Quirksmodus .

Zu hasLayout gibt es hier einen sehr guten Artikel, da habe ich mir das wichtigste auf eine DinA4-Seite rauskopiert und an die Wand gepinnt.:)

 

[FleyerShaver]

Ich habe mir die Multimenüs jetzt angeschaut, werde aus dem Code aber nicht schlau.
Kann mir jemand nen paar Tipps geben, wie dieses Dropdown auch im IE funktioniert?

 

[koslowski]

Hi,

fange selber gerade an mich in Dropdownmenüs einzuarbeiten und zwar
hiermit "Little Boxes 2" von Peter Müller.

Es gibt imho nichts wo das besser erklärt ist. ;-)

Ich kenne mehrere gestandene Webdesigner die sich "Little Boxes 1 u. 2" gekauft haben, einfach weil es so einen Spaß macht, das so gut erklärt zu lesen.
Einhelliger Kommentar: "Wenn wir das zu Anfang schon gehabt hätten, wäre uns das Erlernen von Webdesign viel leichter gefallen.

 

[FleyerShaver]

So ich habe mir die Links noch mal gründlich durchgelesen und das hier müsste es sein:

Ein weiteres häufiges Problem bei Listen tritt auf, wenn der Inhalt eines li aus einem Anker mit display: block besteht. Unter dieser Voraussetzung wird der Leerraum (white space) zwischen Listenpunkten nicht ignoriert und normalerweise als zusätzliche Zeile für jedes li dargestellt. Eine Methode zur Vermeidung dieses zusätzlichen vertikalen Abstands besteht darin, dem Anker zusätzlich zum display:block auch noch »Layout« zu geben. Das hat zudem den Vorteil, dass dann die gesamte rechteckige Linkfläche klickbar wird.

Was genau ist mit Layout geben gemeint?

 

[koslowski]

Hi,

in meinem zweiten posting ist ein Link der das Haslayoutprinzip genau erklärt.

Durch die Zuweisung einer Höhe bekommt ein Element Layout.

Der bekannteste IE-Hack (Star-Hack) funktioniert so:
* html li { height:1%; } ist nur für den IE6.
Den *-Selektor (Universalselektor) lesen alle Browser, setzt man ein html dahinter liest nur der IE6 weiter.

Hacks für den IE definiert man üblicherweise in Conditionell Comments.
Dort kann man dann das * html weglassen, weil der CC eh nur von der entsprechenden IE-Version gelesen wird.

Mal grundsätzlich: Warum willst du überhaupt ein Dropdownmenü?

Dropdownmenüs sind nix für Anfänger, du solltest schon über weit fortgeschrittene CSS-Kenntnisse verfügen bevor du sowas machst.
Das ist keine Pflicht mehr sondern schon die Kür (Css mäßig).

Aufgrund deiner Postings habe ich nicht den Eindruck das du weit fortgeschritten bist (sorry, soll kein Angriff auf dich sein! :-)).

Nix für ungut
koslowski

 

[pmmueller]

Was genau ist mit Layout geben gemeint?

Vielleicht verdeutlicht der folgende Text das etwas:

Wenn der Internet Explorer den Quelltext in eine sichtbare Webseite verwandelt, benutzt er ein Konzept, dass seine Entwickler "Layout" getauft haben.

Idealerweise würde ein Browser für alle Elemente auf der Webseite die Größe und Position gemäß der Angaben im Stylesheet berechnen. Da das sehr lange dauern kann, haben die Entwickler des Internet Explorer die Darstellung der Seite etwas beschleunigt:

• Die wichtigsten Elemente einer Seite bekommen das Merkmal hasLayout.
• Nur Elemente mit hasLayout werden wirklich komplett abgearbeitet.
• Für alle anderen Elemente werden Größe und Position durch das nächste Vorfahrenelement mit hasLayout bestimmt.

Viele Bugs des Internet Explorer, insbesondere solche in float-Umgebungen, gehen auf dieses Konzept zurück und lassen sich beheben, indem man einem Element explizit hasLayout gibt. Das geschieht durch die Deklaration unter anderem folgender CSS-Eigenschaften:

• position: absolute
• float
• width (mit Angabe irgendeines Wertes)
• height (mit Angabe irgendeines Wertes)

Aus "Little Boxes", Band 01, S. 297

Grüße aus Groningen
Peter