Firefox: Überlaufende CSS-Border bei rowspan und border-collapse

**Qudus** · 15-03-2006, 14:26

hi

Ich habe ein Problem im Firefox, das zwar ein Firefox-Bug ist aber wofür es vielleicht eine Lösung gibt.

Wenn ich in einer Tabelle border-collapse einschalte und rowspan verwende, läuft eine Border unter bestimmten Umständen reproduzierbar in umliegende Zellen über.

Dieses Beispiel demonstriert das:

HTML-Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Firefox: Border-Test</title>
        
        <style type="text/css">
            td.zelle
            {
                text-align: center;
                vertical-align: middle;
            }
        </style>
    </head>
<body>
    <center>
        <table border="0" cellspacing="0" cellpadding="0" style="margin-top: 50px; table-layout: fixed; empty-cells: show; border-collapse: collapse;">
            <tbody>
                <tr>                                    
                    <td colspan="1" rowspan="2" class="zelle" style="width: 20px; height: 40px; border: 3px solid black;">
                        a
                    </td>
                    <td colspan="1" rowspan="1" class="zelle" style="width: 20px; height: 20px; background-color: cyan;">
                        b
                    </td>
                </tr>
                <tr>                                    
                    <td colspan="1" rowspan="1" class="zelle" style="width: 20px; height: 20px; background-color: red;">
                        c
                    </td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="1" class="zelle" style="width: 20px; height: 20px; background-color: brown;">
                        e
                    </td>
                    <td colspan="1" rowspan="1" class="zelle" style="width: 20px; height: 20px; background-color: yellow;">
                        f
                    </td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

</html>

Kennt dafür jemand eine Lösung?

Gruß, Qudus

PS: Ich verwende Firefox 1.5.0.1 und im 1.6er ist es genauso.

**BlueJay** · 19-03-2006, 10:15

FF unter Linux (Mozilla 5/rv 1.7.12) ist ok. Also mach dir keine grauen Haare.

so long,
BlueJay

**Qudus** · 23-03-2006, 22:55

Zitat von BlueJay

FF unter Linux (Mozilla 5/rv 1.7.12) ist ok. Also mach dir keine grauen Haare.

Leider nein. Das Problem tritt sowohl unter Linux als auch unter Windows auf. Zwar sollten die Windowsbenutzer auch mal unter den Problemen leiden, die das "Betriebssystem" mit sich bringt und die sonst immer die Entwickler ausbaden und umschiffen müssen. Aber manchmal hat man ja das Interesse, dass möglichst alle die Seite Fehlerfrei betrachten können sollen. Aber wie dem auch sei, es tritt ja unter Linux/Firefox auch auf.

**undefined** · 24-03-2006, 11:03

Das ist bei deiner Angabe auch richtig.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Firefox: Border-Test</title>
        
        <style type="text/css">
				table {
					margin-top: 50px;
					table-layout: fixed;
					empty-cells: show;
					border-collapse: separate;
				}
            td.zelle
            {
               text-align: center;
               vertical-align: middle;
	       width: 20px; 
            }
            td.borderzelle
            {
               text-align: center;
               vertical-align: middle;
               width: 20px;
	       border: 3px solid black;
            }
        </style>
    </head>
<body>
    <center>
        <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>                                    
                    <td rowspan="2" class="borderzelle">
                        a
                    </td>
                    <td class="zelle" style="height: 20px; background-color: cyan;">
                        b
                    </td>
                </tr>
                <tr>
                    <td class="zelle" style="height: 20px; background-color: red;">
                        c
                    </td>
                </tr>
                <tr>
                    <td class="zelle" style="height: 20px; background-color: brown;">
                        e
                    </td>
                    <td class="zelle" style="height: 20px; background-color: yellow;">
                        f
                    </td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>

separate = Zellenrahmen fallen nicht zusammen.
collapse = Zellenrahmen fallen zusammen.

**Qudus** · 28-03-2006, 21:16

Zitat von undefined

Das ist bei deiner Angabe auch richtig.

Code:

separate = Zellenrahmen fallen nicht zusammen.
collapse = Zellenrahmen fallen zusammen.

Sicherlich nicht. Ich wollte ja genau, dass die Rahmen zusammenfallen. Deshalb habe ich auch collapse und nicht separate dahin geschrieben. Das ist bei meiner Konstallation zwingend erforderlich.

Mein Testfall ist logischerweise nur ein Ausschnitt dessen, was ich insgesamt habe. Dieser fehlerhafte Effekt lässt sich zwar durch "border-collapse: separate;" verhindern, ich verliere damit aber nunmal die Kollabierung. Und das geht nicht.

Ich hoffe, Du siehst diesen Effekt auch und wir reden nicht aneinander vorbei. Der Rahmen zwischen c und f existiert eigentlich nicht und entsteht durch diesen Firefox-bug. Siehst Du den?

Gruß, Qudus

**jeebee** · 29-03-2006, 17:48

scheint ein Bug zu sein, ein unschöner (aber funktionierender) Workaround für das gepostete Beispiel ist:

Code:

<td colspan="1" rowspan="1" class="zelle" style="width: 20px; height: 20px; background-color: yellow; border-top:1px yellow solid;">  f </td>

Ist 1. nicht sehr praktisch, 2. gibts eine kleine "ausgeschnittene Ecke" im schwarzen Rahmen und 3. wird das gelbe Feld 1 Pixel höher...

Thema: Firefox: Überlaufende CSS-Border bei rowspan und border-collapse

Themen-Optionen

Thema bewerten

Anzeige

Firefox: Überlaufende CSS-Border bei rowspan und border-collapse

Lesezeichen

Lesezeichen

Berechtigungen