Tabellenreihe Hover - funktioniert nicht in Google Chrome

[Jeremy]

Hallo!

Mein Spielmannszugsprojekt verwendet CSS, um eine Tabellenreihe beim Hovern hervorzuheben. Im Internet Explorer und im Firefox (jeweils aktuelle Versionen) funktioniert das wie gewünscht, in Googles Chrome nicht (ebenso aktuelle Version).
Codeschnipsel:

<table>  
<colgroup>  
	<col style="width:30%;" />  
	<col style="width:70%;" />  
</colgroup>  
<tr style="text-align: left;">  
	<th>Datum</th>  
	<th>Ort</th>  
</tr>  
<tr style="color: gray;" class="row">  
<td><a name="16.01.">16.01.</a></td>  
<td>Schipperh&ouml;ge Lauenburg</td>  
</tr>  
<tr style="color: gray;" class="row">  
<td><a name="01.05.">01.05.</a></td>  
<td>Maibaumaufstellung Ratzeburg</td>  
</tr>  
<tr style="color: gray;" class="row">  
<td><a name="07.05.">07.05.</a></td>  
<td>Sportlerehrung Ratzeburg</td>  
</tr>  

tr.row:hover {  
outline: 1px solid #900;  
}

Hat jemand eine Idee?

Liebe Grüße aus Norddeutschland.

[Gunnar Bittersmann]

@@Jeremy:

nuqneH

Hallo!

Mein Spielmannszugsprojekt verwendet CSS, um eine Tabellenreihe beim Hovern hervorzuheben. Im Internet Explorer und im Firefox (jeweils aktuelle Versionen) funktioniert das wie gewünscht, in Googles Chrome nicht (ebenso aktuelle Version).

Safari ist ebenfalls betroffen. Scheint ein Webkit-Bug zu sein, nicht mit 'outline' für 'tr' klarzukommen.

Codeschnipsel:

Da räumen wir gleich mal auf.

Stilangaben haben im Markup nichts zu suchen, @style-Attribute sind böse.[tm] Gib sämtliche Darstellung im Stylesheet an!

@class="row" für 'tr'-Elemente ist unsinnig; eine Tabellenzeile ist bereits durch 'tr' als solche ausgezeichnet.

Die Verwendung von 'thead' und 'tbody' bietet sich an. (Soll der Hover-Effekt nicht nur bei den Datenzeilen sein, nicht aber beim Tabellenkopf?) Auch bietet es sich an, Kopfzellen in Tabellenzeilen als 'th' auszuzeichnen.

'a[@name]' für Anker? Das ist seit (gefühlten) Jahrzehneten <http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=nicht mehr notwendig>, wenn du den 'th'-Elementen oder besser den 'tr'-Elementen @id gibst (die allerdings mit einem Buchstaben [A-Za-z] beginnen müssen).

Außerdem ist es weder notwendig noch sinnvoll, 'ö' als 'ö' zu notieren.

<table>  
    <colgroup>  
        <col/>  
        <col/>  
    </colgroup>  
    <thead>  
        <tr>  
            <th>Datum</th>  
            <th>Ort</th>  
        </tr>  
    <thead>  
    <tbody>  
        <tr id="d16.01.">  
            <th>16.01.</a></th>  
            <td>Schipperhöge Lauenburg</td>  
        </tr>  
        <tr id="d01.05.">  
            <th>01.05.</a></th>  
            <td>Maibaumaufstellung Ratzeburg</td>  
        </tr>  
        <tr id="d07.05.">  
            <th>07.05.</a></th>  
            <td>Sportlerehrung Ratzeburg</td>  
        </tr>  
    </tbody>  
</table>

col:first-child  
{  
    width: 30%;  
}  
  
col:last-child  
{  
    width: 70%;  
}  
  
tbody  
{  
    color: gray;  
}  
  
th, td  
{  
    text-align: left;  
}

Hat jemand eine Idee?

Ja. Wenn es mit 'outline' nicht klappt, musst du halt 'border' nehmen. Dazu ist das richtige Rahmenmodell [CSS2 §17.6] zu wählen.

Damit der Rahmen der gehoverten Zeile nicht von von dem der vorigen Zeile überdeckt wird, ist 'border-bottom width' auf 0 zu setzen; außer für die letzte Zeile, damit beim Hovern dieser Zeile nachfolgender Inhalt nicht hüpft.

Beim Hovern wird auch 'border-bottom width' auf 1px gesetzt und die Farbe von transparent auf die gewünschte umgeschaltet.

table  
{  
    border-collapse: collapse;  
}  
  
tr  
{  
    border-color: transparent;  
    border-style: solid;  
    border-width: 1px 1px 0 1px;  
}  
  
tr:last-child  
{  
    border-width: 1px;  
}  
  
tbody tr:hover  
{  
    border-color: #900;  
    border-width: 1px;  
}

Qapla'

[Jeremy]

Hallo!

@@Jeremy:

nuqneH

Hallo!

Mein Spielmannszugsprojekt verwendet CSS, um eine Tabellenreihe beim Hovern hervorzuheben. Im Internet Explorer und im Firefox (jeweils aktuelle Versionen) funktioniert das wie gewünscht, in Googles Chrome nicht (ebenso aktuelle Version).

Safari ist ebenfalls betroffen. Scheint ein Webkit-Bug zu sein, nicht mit 'outline' für 'tr' klarzukommen.

Codeschnipsel:

Da räumen wir gleich mal auf.

Danke für deine Tips! :)

Stilangaben haben im Markup nichts zu suchen, @style-Attribute sind böse.[tm] Gib sämtliche Darstellung im Stylesheet an!

Wohlwahr. Allerdings wird die Textfarbe dynamisch generiert (abhängig vom Timestamp), und hier erschien es mir sinnvoller, die Zeile per Style-Attribut zu stylen statt eine neue Klasse "gray" zu erstellen. Allerdings scheine ich ma dort geirrt zu haben und werde das bei Gelegenheit ausbessern.

@class="row" für 'tr'-Elemente ist unsinnig; eine Tabellenzeile ist bereits durch 'tr' als solche ausgezeichnet.

Nun ja, dabei handelt es sich ja nur um eine missverständliche Namensgebung.

Die Verwendung von 'thead' und 'tbody' bietet sich an. (Soll der Hover-Effekt nicht nur bei den Datenzeilen sein, nicht aber beim Tabellenkopf?) Auch bietet es sich an, Kopfzellen in Tabellenzeilen als 'th' auszuzeichnen.

Stimmt. Die Kopfzeilen sind allerdings als 'th' ausgezeichnet.

'a[@name]' für Anker? Das ist seit (gefühlten) Jahrzehneten <http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=nicht mehr notwendig>, wenn du den 'th'-Elementen oder besser den 'tr'-Elementen @id gibst (die allerdings mit einem Buchstaben [A-Za-z] beginnen müssen).

Außerdem ist es weder notwendig noch sinnvoll, 'ö' als 'ö' zu notieren.

Bin mir auch nicht mehr sicher, wieso ich da überhaupt das name-Attribut gesetzt habe - benötigen tu ich das nicht. Es könnte sein, dass es sich hier um eine Leiche handelt, mit der ich einst etwas anfangen wollte.

col:first-child

{
    width: 30%;
}

col:last-child
{
    width: 70%;
}

tbody
{
    color: gray;
}

th, td
{
    text-align: left;
}

>   
  
Hat der Internet Explorer nicht erhebliche Probleme mit Pseudoklassen? Mir war so.  
  

>   
> > Hat jemand eine Idee?  
>   
> Ja. Wenn es mit 'outline' nicht klappt, musst du halt 'border' nehmen. Dazu ist das richtige Rahmenmodell [[CSS2 §17.6](http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap17.html#heading-17.6%C2%A0)] zu wählen.  
>   
  
Schade, dass es nur so umständlich geht. Outline erscheint mir semantisch korrekter.  
  

> Damit der Rahmen der gehoverten Zeile nicht von von dem der vorigen Zeile überdeckt wird, ist 'border-bottom width' auf 0 zu setzen; außer für die letzte Zeile, damit beim Hovern dieser Zeile nachfolgender Inhalt nicht hüpft.  
>   
> Beim Hovern wird auch 'border-bottom width' auf 1px gesetzt und die Farbe von transparent auf die gewünschte umgeschaltet.  
>   
> ~~~css

table  

> {  
>     border-collapse: collapse;  
> }  
>   
> tr  
> {  
>     border-color: transparent;  
>     border-style: solid;  
>     border-width: 1px 1px 0 1px;  
> }  
>   
> tr:last-child  
> {  
>     border-width: 1px;  
> }  
>   
> tbody tr:hover  
> {  
>     border-color: #900;  
>     border-width: 1px;  
> }

Qapla'

Vielen Dank für diese Anregungen. Ich werde mich mal schlau machen, ob dieser Fehler schon gemeldet wurde. Wenn nicht, dann werde ich ein dementsprechendes Ticket schreiben.

Liebe Grüße aus Norddeutschland.

[MudGuard]

Hi,

Stilangaben haben im Markup nichts zu suchen, @style-Attribute sind böse.[tm] Gib sämtliche Darstellung im Stylesheet an!
Wohlwahr. Allerdings wird die Textfarbe dynamisch generiert (abhängig vom Timestamp), und hier erschien es mir sinnvoller, die Zeile per Style-Attribut zu stylen statt eine neue Klasse "gray" zu erstellen.

Wenn das zeitabhängig ist, dann wären Klassennamen wie "morgens", "abends" oder "thisweek", "lastweek" oder ähnliches sinnvoll.

Nicht sinnvoll sind Klassennamen, die die _derzeit_ gewünschte Darstellung nennen.

Sonst kommt dann irgendwann der Wunsch auf, das, was jetzt grau ist, rosa darzustellen - dann hast Du eine Klasse gray, die dafür sorgt, daß der Text rosa dargestellt wird.

cu,
Andreas

[Gunnar Bittersmann]

@@Jeremy:

nuqneH

Hat der Internet Explorer nicht erhebliche Probleme mit Pseudoklassen? Mir war so.

IIRC:
IE < 7 kennt weder :first-child noch :last-child.
IE 7 kennt :first-child, aber nicht :last-child.
IE 8 kennt beides.

Ich werde mich mal schlau machen, ob dieser Fehler schon gemeldet wurde. Wenn nicht, dann werde ich ein dementsprechendes Ticket schreiben.

Gute Idee.

Qapla'