Seb: IE7 / IE6 Problem li-Element in ul wird nur teilweise angezeigt

Beitrag lesen

Hallo zusammen,

bin schier am Verzweifeln. Ich arbeite zurzeit an einer Website für einen Kunden: http://sebastiankabis.net/kunden/herder/fadisaad . In Firefox funktioniert alles so wie es sollte.

Nur der IE bringt mich wieder zum Verzweifeln. Warum in aller Welt wird in der Navigation der 3. Punkt (sollte "Meine Berufe" heißen) nach links verschoben und nur teilweise angezeigt?

Ich bin inzwischen durch Rumprobieren dahintergekommen, dass das zumindest teilweise mit der margin-left-Eigenschaft der Navi-ul (margin-left: 130px) zusammenhängt. Setze ich diese auf 0 hängt zwar die ganze Navi logischerweise ganz links am Rand, aber immerhin hat sich der (anscheinende) padding des 3. li-Elements verkleinert.

Hier der Quellcode:
<li id="klappauf_berufe" class="navi03 mainnavili"><a title="Erfahren Sie mehr über meine Berufe" href="#"><span class="hidden">Meine Berufe</span></a></li>

Und in CSS:
``.navi03 {
 width: 150px;
 height: 13px;
}

.navi03 a {
 width: 100%;
 height: 100%;
 background-image: url(../assets/navi/03_meine_berufe.png);
 background-repeat: no-repeat;
}

.navi03 a:hover {
 background-image: url(../assets/navi/03_meine_berufe_active.png);
 background-repeat: no-repeat;
}

Was bitte mache ich falsch?

Bitte um Hilfe!
Danke.

Viele Grüße,
Seb