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/virtuneticsstudio/css/layout.css
und vielleicht noch
http://www.sandman.phpnet.us/themes/virtuneticsstudio/css/overwrite.css
http://www.sandman.phpnet.us/themes/virtuneticsstudio/css/fix-ie.css


Vielen Dank schonmal

LG the-sandman

 

[neuroleptika]

Das sind ein bisschen viele css-Dateien.
Grenze das Menü mal ein.

Was mir beim überfliegen aufgefallen ist:

div#menu div div ul

Hat weder height noch width. Weise diesem Element mal testweise zoom: 1; zu und gucke was im IE6 passiert.

Ansonsten isoliere und das Problem. - Und validiere das Dokument (Markup Validation)

 

[the-sandman]

Hallo neuroleptika,

danke für deinen Hinweis.

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

Eine Angabe von width und height hat leider gar keinen Effelt auf das Menü. Ich denke, da der Standardwert auto ist, müsste es auch ohne diese Angaben funktionieren.
Genauso konnte ich bei zoom:1; keine Veränderung beobachten.

Ich habe jedoch 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