IE: Abstand nach font-size und margin-bottom:-1px; hilft nicht!

[Patzi]

Hallo,

#menu ul ul li a div         {font-size:10px;}

In gültigem HTML *kann* dieser Selektor auf kein Element zutreffen, ein a-Element kann niemals ein div enthalten.

#menu ul ul li:hover         {background:#CEC8EA;color:#757575;}

Bekanntlich kann der IE bis einschließlich Version 6 :hover nur auf Links anwenden.

Ja. Ich habe (das ist aber nicht im Codeauschnitt dabei.) für den IE andere Lösungen mit JS und a:hover kriert.

<li class="item" id="c2" style="margin-bottom:-1px;"><a href="#"><b>Überschrift</b><div>Details</div></a></li>

Das ist invalid, siehe oben.

Jetzt folgt der Listenpunkt, wo der Background zu früh aufhört und der 'Back-Background' nach vorne dringt.

Häh? Und auf Deutsch?

Damit meine ich den 3. Listenpunkt, bei dem der Background (#c1) nicht hinter dem ganzen Listenpunkt ist, sondern nach ein paar Pixel endet. Da das Dings dahinter auch 'nen Hintergrund hat (Der 'Back-Background'), ist der sichtbar und nicht der #c1-Background.

<li class="item" id="c1" style="margin-bottom:-1px;"><a href="#"><b>Überschrift</b><div>Details</div></a></li>

Nochmal ungültiges HTML.

Innerhalb von <li> und außerhalb von <a> ist im IE ein winziger Abstand. Das stört eigentlich nicht und ist mir nicht ein Mal aufgefallen, aber bei a:hover kommt eine andere Hintergrundfarbe. Da der Abstand ja außerhalb von <a> ist, wird natürlich der Abstand nicht umgefärbt. Das schaut dann sehr komisch aus.

Beseitige erstmal die Fehler im HTML-Code, passe dann dein CSS auf die geänderte HTML-Basis an, und dann sehen wir weiter. Möglicherweise hat sich dein Problem dann ganz spontan in hellgrünes Brummen aufgelöst.

Ja, ich lasse es mal bei W3C Valide durchlaufen und schau mal. Hier ist mal der Code mit span:

  
                                      ...75;}  
    #menu ul ul li a span        {font-size:10px;display:block;}  
    #me...  

  
<li class="item" id="c1" style="margin-bottom:-1px;"><a href="#"><b>Ü</b><span>TXT</span></a></li>  
<li class="item" id="c2" style="margin-bottom:-1px;"><a href="#"><b>Ü</b><span>TXT</span></a></li>  
<li class="item" id="c1" style="margin-bottom:-1px;"><a href="#"><b>Ü</b><span>TXT</span></a></li>  

Ich werde mich dann jetzt mal ans valide machen.

lg pastzel

So long,
Martin