Menü "verschwindet" im IE 7 und abwärts

[bibib]

Hallo in die Runde,

bin völlig verzweifelt, weil ich ein absolutes Blackout habe:

http://www.duroc.co.at/tl paßt in allen Browsern, aber im IE 7 ist das Menü so eigenartig abgetreppt und verschwindet ins Nirvana. Kann mir irgendjemand einen Tipp geben, wo ich ansetzen muß? Habe schon diverse padding-Werte verändert, ohne Erfolg.

Danke schon mal,
Birgit

[schman]

versuchs mal mit einem margin-top: 0, bzw. padding-top im nav_main ul li

[bibib]

danke, aber das wars leider nicht ...


Hab mal ein kleines Bild angehängt, damit man sich ein bißchen mehr drunter vorstellen kann. Mir kommt der Fehler so bekannt vor, aber ich komme einfach nicht und nicht drauf ...

[Kristina]

Hast Du "ul" und "li" float left gegeben?
Hast Du mal das CSS dazu?

Viele Grüße
Kristina

[bibib]

hm, nein, ich hab erst die links gefloatet ...
hier mal die css

/* Style sheet xNavigation */
#nav_main {
   width: 700px;
   height: 43px;
   margin-left: 30px;
   padding-top: 170px;
}
#nav_main ul {
   margin: 0px;
   padding-top: 3px;
   text-align: center;
   list-style-type: none;
}
#nav_main li {
   background-image: url(tl_files/images/layout/menu.gif);
   background-repeat: no-repeat;
   background-position: 0.4em;
   padding-left: 0.6em;
}
#nav_main li.active {
   float: left;
   display: block;
   margin-right: 20px;
   background-image: url(tl_files/images/layout/menu_active.gif);
   background-repeat: no-repeat;
   background-position: 0.4em 35%;
   padding-left: 2.2em;
   vertical-align: middle;
   font-size: 12px;
   font-weight: bold;
   line-height: 43px;
   text-decoration: none;
}
#nav_main li a {
   float: left;
   display: block;
   margin-right: 20px;
   background-image: url(tl_files/images/layout/menu_inactive.gif);
   background-repeat: no-repeat;
   background-position: 0.4em 35%;
   padding-left: 2.2em;
   vertical-align: middle;
   font-size: 12px;
   font-weight: bold;
   line-height: 43px;
   text-decoration: none;
}
#nav_main ul li.active, #nav_main ul li a.trail {
   background-image: url(tl_files/images/layout/menu_active.gif);
   background-repeat: no-repeat;
   background-position: 0.4em 35%;
   padding-left: 2.2em;
   color: #FFFFFF;
   cursor: pointer;
}
#nav_main ul li a {
   color: #999999;
}
#nav_main ul li a:hover {
   background-image: url(tl_files/images/layout/menu_active.gif);
   background-repeat: no-repeat;
   background-position: 0.4em 35%;
   padding-left: 2.2em;
   color: #FFFFFF;
}

[planepix]

Hallo Birgit,

ist das eine 1:1 Kopie des Original-CSS?

Dann würde ich als erstes die nicht geschlossenen Anweisungen schließen " ; " und dann nochmal testen.

[bibib]

Hallo planepix,

nein, das ist keine Originalkopie. Hab ich aus der Developer-Toolbar rauskopiert und dann ein bißchen leserlicher gemacht. Sorry, etwas schlampig gemacht. Aus TL kann man ja nicht so leicht die CSS rauskopieren, oder?

LG, Birgit

[Sebastian]

HI

du solltest auf jeden Fall die Listenelemente floaten und nicht die Links. Als IE-Hack ist dann noch display:inline zu empfehlen.

Sebastian

[bibib]

DANKE, DANKE, DANKE!!!

Sebastian, du hast mich gerettet ...

LG, Birgit

[Kristina]

Hallo,

ich habe mir Dein CSS mal rauskopiert:
wenn ich die floats sowohl beim ul als auch bei li angebe, liegen dann alle Eintrage brav nebeneinader. Natürlich nur in meiner abgespeckten Versuchsanordung. Trotzdem solltest Du es mal probieren. Müsste eigentlich helfen ...

#nav_main ul {
margin: 0px;
padding-top: 3px;
text-align: center;
list-style-type: none;
float:left;
}
#nav_main li {
background-image: url(tl_files/images/layout/menu.gif);
background-repeat: no-repeat;
background-position: 0.4em;
padding-left: 0.6em;
float:left;

}

Viele Grüße
Kristina

[bibib]

Vielen Dank auch dir, Kristina. Ich habs inzwischen probiert und es funzt. Was bin ich froh ...