Hallo!
Den Tips folgend habe ich nun das Ganze umgearbeitet und verwende nur noch gestylte inline Elemente. Folgendes ist nun Sachstand:
Ich habe folgende HTML Konstruktion:
<a href="./some.htm" class="doExpand"><span class="button">Mehr</span>
<samp>Some Text:
<tt class="ul">
<tt class="li">bla1</tt>
<tt class="li">bla2</tt>
</tt>
</samp>
</a>
und folgende CSS Definitionen:
samp {
display:none;
}
.doExpand:hover samp {
font-size:1em;
font-weight:normal;
padding:1px;
margin:0;
color:#808080;
display:block;
}
Soweit funktioniert das auch (wenn der link gehovert wird, wird das eingebettete sample sichtbar).
Leider gibt es beim IE im Folgenden einen Problem, da (falls das sample mit mehr Inhalt befüllt ist und scrolling notwendig wird) mögliches Scrolling stets zurück zum Anker (a tag) zurückspringt. Ich vermute, dass dieses Buggy ist, weil ein reload der Seite im IE das Problem behebt (FF 2/3, Opera 9, Safari und Iron funktionieren sofort...)
Ist aber kein Scrolling erforderlich (kleines sample), so tritt der Fehler auch nicht auf.
Nun wollte ich folgendes machen, um das Problem zu lösen:
Definition für kleine samples, die kein Scrolling erzeugen:
<a href="./some.htm" class="doExpand"><span class="button">Mehr</span>
<samp>Some Text:
<tt class="ul">
<tt class="li">bla1</tt>
<tt class="li">bla2</tt>
</tt>
</samp>
</a>
Große samples (mit scrolling) erhalten ein title Attribut:
<a href="./some.htm" class="doExpand"><span class="button">Mehr</span>
<samp title="IEspec">Some Text:
<tt class="ul">
<tt class="li">bla1</tt>
<tt class="li">bla2</tt>
<tt class="li">...</tt>
</tt>
</samp>
</a>
Generelles CSS bleibt gleich:
samp {
display:none;
}
.doExpand:hover samp {
font-size:1em;
font-weight:normal;
padding:1px;
margin:0;
color:#808080;
display:block;
}
Hinzugefügt wird conditional CSS (nur wenn IE):
.doExpand:hover samp[title=IEspec] {
display:none;
}
Dieses sollte doch nach meiner Meinung dann im IE die Anzeige des samples verhindern, wenn title="IEspec" gesetzt ist, oder?
Laut http://www.css3.info/selectors-test/test.html funktioniert E[Attribut=wert] in IE 8. Aber leider nicht in dieser Achse?
Muß ich jetzt wirklich zwei CSS Klassen (es hängt mehr dran, als im Beispiel ersichtlich) definieren, oder kriegt man das Problem anders umschifft?
Bitte helft mir weiter,
Richard