[PinkPrinZess]

Halli Hallo,

mache unsere Firmenhompage neu, oder versuche es zumindest und habe diese (zum ersten mal) mit CSS gebaut. Die Navigationsleiste hat bei "Über uns", "Leistungen" und "Kontakt" ein Pulldown Menu oder sowas ähnliches. Jetzt mein Problem:

Im Safari ist alles supi, alles sitzt an der richtigen Stelle und die Menüs erscheinen wenn man über die Buttons geht.
Im Firefox sitzt alles an der richtigen Stelle, aber die Menüs erscheinen nicht.
Und im IE (wie nicht anders zu erwarten) ist die Seite eine einzige Katastrophe.

Da ich mich mit CSS noch nicht wirklich auskenne hoffe ich auf eure Hilfe. Das ist zwar nicht mein einzigstes Problem, aber wenn jemand dazu schon mal eine Lösung finden würde, wär ich schon happy.
Und bitte ganz langsam und für Dummies erklären



hier der CSS Code zu den Menüs:

[escaPe]

also als erstes in deine css datei das reinschreiben:


* {
padding:0px;
margin:0px;
}

mit diesem Befehl werden erstmal alle Element sozusagen "resetet"

IE mag zum Beispiel oft bestimmten elementen ein innenabstand zuweisen obwohl
man es selbst gar nicht möchte.

so das wäre das erste.

ich schau weiter in deniem code und sag dann nochmal bescheid

edit:

ok dann folgendes:

[l3mon]

beheb mal die fehler im css css-validator und die html-fehler html-validator

[PinkPrinZess]

erstmal danke das ihr mir so schnell helfen wollt.

@escape:

[escaPe]

also ich das funktioniert ganz einfach mti dem Befehl "z-index:xx"


gib hier:

#main { background:url(html/src/main.jpg); border:0px; width:720px; height:100%;

einfach ein "z-index:1000;"

und hier

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

einfach ein "z-index:1;"


da sich diese 2 elemente überschneiden / überlappen, musst du den elementen sagen welcher
höher gewertet werden soll...

da das #main element im quellcode später gelesen wird als das #menu element, überlappt das #main
element das #menu element.

mit dem z-index kannst du diese reihenfolge einfach ändern... desto näher an der 1 desto höher wird
das element gewertet...

[PinkPrinZess]

Ah supi, das hat schon mal geklappt Jetzt muss der Main-Teil im FF nur noch ein Stück hoch und dann wärs da auch perfekt. Nur der IE ist mir immer noch ein Rätzel...?

[escaPe]

also man kann den mainteil einfach hochschieben indem man einfach margin-top:-10px eingibt

ich weis aber nciht inwiefern es sich auf die anderen browser auswirkt...

zum ie:

dieser kann keine elemente hovern

er kennt kein li:hover oder änliches er kennt nur
a:hover... es gibt ein workaround und zwar hier

http://www.xs4all.nl/~peterned/csshover.html

lies dich da mal durch


edit:
hab grad nochmal durch dein code geschaut und weis nun wieso das #main element so steht wie es steht.


undzwar hier:

#main { background:url(html/src/main.jpg); border:0px; width:720px; height:100%; overflow:auto; text-align:left; position:absolute; top:212px; z-index:1; }

damit bestimmst du wie weit das element vom oberen browser rand abstand nehmen soll...

hier einfach mal top:200px; eintragen. dann müsst er wieder dran kleben.

edit2:

hier einmal die seite wie sie im ie6 und im firefox identisch aussieht

http://www.lysien.de/help/index.html

http://www.lysien.de/help/eisverband.css

das mit der höhe des #main elements hab ich irgendwie nicht hinbekommen,
scheint aber ein typischer ie6 bug zu sein der kein "height:100%" erkennt

ansonsten nimm dir das raus was du brauchst damit es besser aussieht

[PinkPrinZess]

Uiiii! Supi, danke dir!! Das werd ich morgen auf der Arbeit gleich mal umsetzten. Und das mit dem Bug kann man ja umgehen, hab ja den overflow eh auf hidden, dann mache ich den main einfach 100px hoch. XD

Dickes Danke nochmal

edit:
jujuuu! es klappt !!! jetzt muss ich nur noch schauen, das ich das mit den Pulldown menu in IE auch irgendwie hinkriege, denn das müsste schon funktionieren...