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

[Paszel]

In letzter Zeit läuft's nicht gut: Ich habe schon wieder mal 'n Problem:

Problembrowser:  Natürlich MSIE6
Problemstyle:

  
    #menu ul ul li               {text-align:left;padding:0px;display:none;}  
    #menu ul ul li a             {color:#FFFFFF;padding:2px;}  
    #menu ul ul li a:hover       {background:#CEC8EA;color:#757575;}  
    #menu ul ul li a div         {font-size:10px;}  

~~~hier liegt der Hund!  
~~~css
  
    #menu ul ul li:hover         {background:#CEC8EA;color:#757575;}  
    #menu ul ul #c1              {background:#C0C0C0;}  
    #menu ul ul #c2              {background:#A0A0A0;}  

Problemhtml:

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

~~~jetzt folgt der Listenpunkt, wo der Background zu früh aufhört und der 'Back-Background' nach vorne dringt.~~~html
  
<li class="item" id="c1" style="margin-bottom:-1px;"><a href="#"><b>Überschrift</b><div>Details</div></a></li>  
</ul>  
</u...  

Problembefehl:   font-size
Problemtag:      #menu ul ul li a div
Problem:
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.

Ich habe mich im Internet schon kundig gemacht und gelesen, dass <li class="item" id="c2" (!!) style="margin-bottom:-1px;"(/!!)> helfen soll. Dann wird aber merkwürdiger Weise der Background beim 3. Listenpunkt zu früh abgeschnitten und der Background, der dahinter liegt, macht sich sichtbar.
Problemscreen:

(Imitation asiatischer Zeichen = Platzhalter.)
Fragestellung:   Wie kann ich es schaffen, dass der Abstand verschwindet und trotzdem der Background nicht 'beschädigt' wird?

[Der Martin]

Hallo,

Problembrowser:  Natürlich MSIE6

dürfte zum Teil am Problemcode liegen.

#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.

<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?

<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.

So long,
 Martin

[Patzl]

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.

So long,
Martin

Bitte bleibt am Tread dran, denn ich muss noch Arbeiten, aber morgen in der früh werde ich validieren.

lg

[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

[Harlequin]

Yerf!

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

  
Diese CSS-Regel dürfte eigentlich nie zur Anwendung kommen...  
  
Ein Div ist innerhalb eines Links nicht erlaubt, benutze lieber Span (falls das Element überhaupt nötig sein sollte, evtl. gehts auch ganz ohne). Ob es dein Problem löst weis ich nicht, aber es ist immer ungünstig mit fehlerhaftem HTML zu arbeiten, da die Folgen nicht absehbar sind.  
  
  
Gruß,  
  
Harlequin  
  

-- 
<!--[if IE]>This page is best viewed with a webbrowser. [Get one today!](http://www.opera.com)<![endif]-->

[Beat]

<li class="item" id="c1"

style="margin-bottom:-1px;"><a href="#"

<b>Überschrift</b><div>Details</div></a></li>

^^ nach welchem Standard?

siehe: http://de.selfhtml.org/html/referenz/elemente.htm#a

mfg Beat