CSS-Menü mit float im IE6

[the-sandman]

Hallo an alle,

ich habe ein echt schwerwiegendes Problem an dem ich seit mehr als zwei Tagen verzweifel.

Ich bastel zur Zeit an folgender Seite:
Virtunetics Studio | Technologies Of The Future
(Test-Webspace - bitte entschuldigt die Werbung)

Wie im Firefox, Opera und IE7+ zu sehen ist, wird das Menü unten horizontal angeordnet und weitere Untermenüs erscheinen mit einem hover-Effekt.
Betrachten man sich nun die Seite im IE6 lässt sich das Menü einfach nicht horizontal darstellen (geschweige denn, dass der hover-Effekt ordentlich funktioniert). Ich rätsel nun seit vielen Stunden und Tagen, was ich da noch machen kann, damit das Menü entsprechend aussieht und komme einfach zu keiner Lösung. Ich weiß jedoch, dass es funktionieren muss, denn ich habe schon viele ähnliche Menüs erstellt (selbst mit funktionierenden hover-Effekt).

Ich wäre wirklich überaus dankbar, wenn mir da jemand weiterhelfen könnte!!!
Die benötigten css-Dateien sind:
http://www.sandman.phpnet.us/themes/...css/layout.css
und vielleicht noch
http://www.sandman.phpnet.us/themes/.../overwrite.css
http://www.sandman.phpnet.us/themes/...css/fix-ie.css


Vielen Dank schonmal

LG the-sandman

[anna55]

Betrachten man sich nun die Seite im IE6 lässt sich das Menü einfach nicht horizontal darstellen (geschweige denn, dass der hover-Effekt ordentlich funktioniert).

Ich steige bei Deinem Menü auf die Schnelle nicht voll durch, aber:
Du hast die CCs für den IE6 bei einem Untermenü anstatt bei dem Hauptpunkt 'Leergebeite' stehen.
Es sieht mir danach aus, als ob Du bei Stu Nicholls die Technik entnehmen wolltest, aber in der Umsetzung gescheitert bist.
Schau mal hier bei Stus Menü. Das sieht auch im 6er gut aus. Beachte Stus Nutzungsbedingungen.

[the-sandman]

Hallo anna55,

danke für deinen Hinweis. Den Rechtschreibfehler hab ich auch schon berichtigt

Ich weiß, dass recht viele css-Dateien angegeben wurden. Ich benutze als Content Management System "Drupal" (nebenbei bemernkt, bis jetzt das beste CMS, was ich gefunden hab und sehr zu empfehlen) und die meißten css-Dateien sind drupal-interne styles. Für das Menü ist aber wahrscheinlich nur layout.css wichtig

Ich hab mich etwas bei Stus Menü umgesehen und nach vielen hin und her probieren folgendes rausgefunden:
Ändere ich folgenden Code:

div#menu div div ul											{padding:0px; margin:0px; list-style-type:none; z-index:10;}

div#menu div div ul li											{position:relative; margin:0px 5px 0px 5px; float:left; z-index:10;}

div#menu div div ul li a										{display:block; z-index:10;}
div#menu div div ul li:hover a,								
div#menu div div ul li a:hover									{}								{}

in diesen Code um:

/* remove all the bullets, borders and padding from the default list styling */
div#menu div div ul											{padding:0px; margin:0px; list-style-type:none; z-index:10;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
div#menu div div ul li											{position:relative; margin:0px 5px 0px 5px; float:left; z-index:10;}
/* style the links for the top level */
div#menu div div ul li a										{display:block; z-index:10;}
div#menu div div ul li:hover a,								/*Hauptmenü hover-Effekt*/
div#menu div div ul li a:hover									{}

also füge einfach nur Kommentare über den css-Elementen ein, funktioniert es komischerweise auch im IE6. Nehm ich diese wieder raus, funktionert es im IE6 nicht mehr.
Da ich auch gerne verstehe, was ich mache, würde mich interessieren, was diese Kommentarzeilen für Auswirkungen auf meine styles haben.


LG
the-sandman

[dkdenz]

Hallo neuroleptika,

danke für deinen Hinweis. Den Rechtschreibfehler hab ich auch schon berichtigt

Ich weiß, dass recht viele css-Dateien angegeben wurden. Ich benutze als Content Management System "Drupal" (nebenbei bemernkt, bis jetzt das beste CMS, was ich gefunden hab und sehr zu empfehlen) und die meißten css-Dateien sind drupal-interne styles. Für das Menü ist aber wahrscheinlich nur layout.css wichtig

Weißt Du jetzt schon nicht mehr, in welchem Forum Du überhaupt bist?
Copy & Paste... Ich ja recht ärmlich...

[the-sandman]

@dkdenz:
Hehe, ist richtig, ich habe die Frage in mehreren Foren gestellt und per Copy & Paste meine gefundene Lösung vorgestellt, da ich denke, wenn man eine Frage aufwirft, um Hilfe bittet und eine Lösung findet, kann man wenigstens diese Lösung noch allen anderen Betroffenen mitteilen. Ich habe außerdem die Beiträge individuell abgewandelt, da logischerweise nicht eine Antwort zweimal gegeben wurde. Leider habe ich da doch noch was übersehen.

Ich musste deshalb mehrere Foren anschreiben, weil die Foren-Unterstützung erfahrungsgemäß in letzter Zeit wegen sinnloser und überflüssiger Kommentare von möchte-gern-Besserwissern, die anstatt Hilfe anzubieten einfach nur dumm daher reden, sehr an Qualität abgenommen hat und ich einfach mein Spektrum an Lösungsvarianten vergrößern wollte, was letztendlich auch funktioniert hat.

In diesem Sinne
LG the-sandman

[anna55]

Ich hab mal versucht, Dein Szenario ein wenig nachzuvollziehen, da ich mir nicht vorstellen konnte, dass richtig gesetzte Kommentare im CSS Auswirkungen auf die Darstellung haben. Hatten sie bei mir auch nicht.
Wolltest Du sagen, dass aufgrund der Kommentare das Menü im IE6 jetzt noch oben aufklappt? Konnte das im 6er nicht sehen:

[anna55]

Der IE6 geht mit hover richtig um, wenn Du die CCs korrekt einbaust

<li class="hturkis haschildren"><a href="/de/node/4" title="Lehrgebiete">Leergebiete
<!--[if IE 7]><!--></a><!--<![endif]-->
    <table class="ulmenu">
        <tr><td>
            <ul class="menu white">
        <li class="hturkis first"><a href="/de/node/5" title="Regelungstechnik">Regelungstechnik</a></li>
        <li class="hturkis"><a href="/de/node/6" title="Modellbildung / Simulation">Modellbildung / Simulation</a></li>
        <li class="hturkis"><a href="/de/node/8" title="Automatisierungsobjekte">Automatisierungsobjekte</a></li>
        <li class="hturkis"><a href="/de/node/7" title="Digitale Regelungssysteme">Digitale Regelungssysteme</a></li>
        <li class="hturkis"><a href="/de/node/9" title="Intelligente Systeme">Intelligente Systeme</a></li>
        <li class="hturkis last"><a href="/de/node/10" title="Modellgestützte Regelungssysteme">Modellgestützte Regelungssysteme</a></li>
            </ul>
        </td></tr>
    </table>
<!--[if lte IE 6]></a><![endif]-->
</li> 

Du musst Dir allerdings noch die konkreten IE6-Anweisungen im CSS mal bei Stu ansehen, da Du so mit der Mause erst mal suchen musst, bevor Du die Stelle findest, die den hover auslöst. Also im Besonderen auch (nicht nur) die '* html'-Anweisungen

[the-sandman]

Es ist richtig, man muss im IE6 ein wenig die Stelle suchen, die das hover auslöst. Es ging jedoch erst einmal um die horiziontale Ausrichtung der Menüpunkte. Und dazu kann ich sagen, dass, wenn ich die Kommentare in der css-Datei rausnehme, das Menü nicht horizontal angezeigt wird und wenn ich die Kommentare hinzufüge, das Menü wieder horizontal angezeigt wird.
Ich habe auch folgenden Beitrag dazu gefunden:

SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen (siehe "Selektor-Kommentar")

Also irgendwas hat es mit den Kommentaren in css-Dateien auf sich.

Bezüglich des hover-Effektes werde ich das Menü doch nochmal neu strukturieren und meine Ergebnisse dann hier vorstellen


LG
the-sandman

[dkdenz]

Also irgendwas hat es mit den Kommentaren in css-Dateien auf sich.

Das kann in überhaupt nicht bestätigen.
Bei Deinem Beispiellink wird ja damit nur der Internet Explodierer 4 und 5 für Windows und Mac ausgeschlossen.
Ansonsten kann man kommentieren wie man lustig ist...

[the-sandman]

Hallo, ich muss euch leider nochmal mit meinem Problemen belästigen.

Nachdem ich das Menü nun umgebaut hab um 1. mehr Platz zu bekommen und 2. alle Fehler, die mit dem Internet Explorer entstehen zu umgehen, habe ich nun ein weiteres Problem:

Virtunetics Studio | Technologies Of The Future

Wie zu sehen ist, hab ich das Menü nach links in einen ausfahrbaren (Pfeil oben links) div-Layer verlagert. Dieser Effekt wurde mit JavaScript und der Hilfe von jQuery realisiert und funktioniert soweit auch einwandfrei.
Der hover-Effekt der einzelnen Menüpunkte ist soweit ähnlich geblieben, wurde jedoch von mir nochmal komplett anhand der Vorlage von Stu Nicholls | CSSplay | CSS only menus überarbeitet.

Mein Problem ist nun, dass weder im IE6, noch im IE7 oder IE8beta der hover-Layer (bspw. bei "Lehrgebiete") über diesen slide-Layer hinausragt. Somit wird das Menü abgeschnitten und bei noch weiteren Vertiefungen komplett unbrauchbar.
Wenn jemand auf anhieb eine Idee für den Fehler haben könnte, wäre ich sehr dankbar!


LG
the-sandman

[the-sandman]

Also so wie ich in anderen Foren gelesen habe, ist es wohl ein Problem des z-index, den der Internet Explorer nicht getreu darstellt. Leider hat mit bis jetzt keine Lösungsvariante weitergeholfen.

Sollte jemand Ahnung von diesem Problem haben, wäre es schön, wenn sie/er mir weiterhelfen kann...


LG
the-sandman