Firefox-CSS: Rahmenlinien nicht sichtbar

Computer: Software & Programmierung HTML & CSS
#1

Moin,

der Firefox scheint ein kleines Problem mit dynamisch erzeugten Rahmenlinien einer Tabelle zu haben. Hier ein Codebeispiel:

td { border-style:none; border-width:1px; border-color:#000000 }
td.x { border-style:solid }

Text
Text

Oben ist die CSS-Definition für td allgemein und die Klasse „x“ beschrieben. Darunter die Anwendung in HTML, einmal mit und einmal ohne Verwendung der Klasse.

Wenn ich nun die Tabelle direkt in HTML schreibe, sind alle Zellen mit der Klasse „x“ mit Rahmen versehen, die anderen ohne.

Wenn ich mittels document.write(’’) alle Zellen dynamisch erzeuge, sind die „x“-Zellen auch umrahmt.

Der dritte Fall aber geht schief: Ich erzeuge nämlich dynamisch erstmal Zellen ohne Klassendefinition und ändere diese später bei bestimmten Zellen zu „x“. Der IE macht das anstandslos mit, der Firefox hingegen ignoriert das „border-style:solid“ einfach. Er akzeptiert Schriftfarbe, Schriftstil und Hintergrund von „x“ (oben nicht aufgeführt), aber die Rahmen bleiben weg.

Der vierte Fall ist ganz wüst: Ich erzeuge erstmal alle Zellen mit „x“-Klasse, so dass alle Rahmen da sind. Dann lösche ich bei bestimmten Zellen die Definition wieder, bei anderen überschreibe ich sie mit „x“ (algorithmusbedingt - sie bleiben also unverändert). Das Ergebnis ist ein Mischmasch aus „mal da“ und „mal nicht“.

Gehe ich nun im dritten Fall auf die Druckvorschau, sind alle Rahmen wieder da! Und wenn ich die Druckvorschau verlasse, sind sie auch noch da, so wie sie eigentlich von Anfang an sein sollten. Ändere ich dann nach der Druckvorschau aber nochmal ein paar Zellen, tritt wieder Fall 4 auf.

Kennt jemand das Problem und weiß dafür eine Lösung? „Reload“ geht ja leider nicht, weil es dynamisch ist, und ein „Refresh“ und „Redraw“ oderso kenne ich nicht.

Danke,
Kristian

PS:
Windows XP SP2
IE 6
Firefox 2.0.0.11

#2

Hi Kristian,

der Firefox scheint ein kleines Problem mit dynamisch
erzeugten Rahmenlinien einer Tabelle zu haben. Hier ein
Codebeispiel:

td { border-style:none; border-width:1px;
border-color:#000000 }
td.x { border-style:solid }

Warum machst Du es Dir eigentlich so kompliziert und nicht einfach

td.x { border:1px solid #000; }

ohne die Definition bei td ohne Klasse?

Leider lassen sich die von Dir geschilderten Anwendungsfälle ohne konkreten Code nicht nachvollziehen. Wie Du nämlich die „Definition entfernst“ bzw. „hinzufügst“ erschließt sich aus Deinen Angaben nicht. Hast Du dafür ein Code-Beispiel?

Ciao
Rudy

#3

Moin Rudy,

ein laufendes Codebeispiel ist auf die Schnell schwierig, müsste ich erst extrahieren, was ich heute nicht mehr schaffe, da das leider nicht im Schlaf zu machen ist :wink:

Hintergrund zur Art der Definition: Ich brauche erstmal rahmenlose Zellen, damit einzelne umrahmten Zellen („x“) sauber mit Rahmen dargestellt werden. Achso, „collapse“ ist aktiv, also die Rahmen fallen zusammen (siehe mein Posting drei weiter unten).

Die Neuformatierung wird mittels der Eigenschaft className erledigt:

td = document.getElementById('Hallo');
td.className = 'x';

Die komplette CSS-Definition ist diese hier:

table { border-collapse:collapse }
td { background:#FFFFFF;
 color:#000000;
 font-size:10pt;
 font-family:Arial;
 text-align:center;
 vertical-align:middle;
 padding:0;
 border-width:1px;
 border-style:none;
 border-color:#000000 }
td.x { border-style:solid; color:#FF0000; font-weight:bold }

Nun haben wir ja doch fast das Codebeispiel. Hier noch die Tabelle:A
B
C
D
E
D
G
H
I
Wenn nun der Zelle mit dem E wie oben beschrieben die Klasse „x“ zugewiesen wird, passiert im FF gar nichts, der IE hingegen umrahmt sie. Beim FF ist sie erst nach der Druckansicht umrahmt.

HTH
Kristian

PS: Habe eben mal im Bugzilla geguckt, aber bei der Menge an Items ist es schwer herauszufinden, ob das schon dabei ist. Habe aber festgestell, dass es in der portablen Beta-Version des 3er FF von Dezember auch noch so ist.

#4

der Firefox scheint ein kleines Problem mit dynamisch
erzeugten Rahmenlinien einer Tabelle zu haben.

Der muss noch ein anderes Problem mit Tabellenrahmen haben. Ich habe nämlich zuhause auch eine Seite, in der ich eine statische Tabelle habe, wo ich lediglich die Inhalte aus der Datenbank hole und da eintrage. Wenn ich im FF hoch und runter scrolle, passiert es manchmal(!), dass er Tabellenrahmen anzeigt, obwohl keine definiert sind, scrolle ich den Bereich aus dem Viewport raus und wieder rein, sind diese Linien oftmals weg. Manchmal kommen aber auch etliche neue hinzu.

Das ist mir bisher aber nur auf dieser einen Seite passiert und ich kann nicht sagen, woran das liegen mag.

Gruß,
-Efchen

#5

Hi Kristian,

PS: Habe eben mal im Bugzilla geguckt, aber bei der Menge an
Items ist es schwer herauszufinden, ob das schon dabei ist.
Habe aber festgestell, dass es in der portablen Beta-Version
des 3er FF von Dezember auch noch so ist.

Das sieht für mich auch stark nach Fehler aus, und soweit ich es beurteilen kann, scheint es hiermit zusammen zu hängen: https://bugzilla.mozilla.org/show_bug.cgi?id=271755
Dort wird geschildert, dass dynamische Änderung der Zellenrahmen und eine Zelle in einer Tabelle mit border-collapse:collapse einen zu kleinen Bereich neu zeichnet, sodass Du den Rahmen nicht siehst. Die Druckvorschau löst dann ein Neuzeichnen aus, deshalb sieht man danach den Rahmen. Und das ist, wie man dort sieht, nicht das einzige Problem mit dem border-collapse, das scheint ein momentanes Sorgenkind zu sein. Workaround hab ich nicht gefunden. Das einfachste wäre wohl warten, bis der Fehler behoben ist, oder die Borders nicht zusammenfallen zu lassen- dann tritt das Problem nicht auf.

Ciao
Rudy

#6

Ja. Stimmt. Auf meine Anfrage zu einem der passenden Bugs antworte jemand im gleiche Sinne, dass das mit den Rahmen eine „ugly mess“ sei, die ganz schön tief sitzt. Und da es noch andere Probleme gibt, die im Vergleich noch „häßlicher“ sind, wird man wohl warten müssen, bis man sich der Rahmen annimmt.

Also lass uns warten :wink:

#7

Lösung: BorderCollapse dynamisch setzen/entziehen
Hallo Kristian,

Codebeispiel:

td { border-style:none; border-width:1px;
border-color:#000000 }
td.x { border-style:solid }

Text
Text

Oben ist die
CSS-Definition für td allgemein und die Klasse „x“
beschrieben.

Kennt jemand das Problem und weiß dafür eine Lösung? „Reload“
geht ja leider nicht, weil es dynamisch ist, und ein „Refresh“
und „Redraw“ oderso kenne ich nicht.

Das Problem tritt im Firefox offensichtlich nur dann auf, wenn die Tabelle die CSS-Eigenschaft border-collapse:collapse hat:
<!–
function fillTable() {
var myTbody = document.getElementById(‚myTbody‘);
myTbody.parentNode.style.borderCollapse = ‚separate‘;
var myTableCells = myTbody.getElementsByTagName(‚TD‘);
var myPresentTableCellsAmount = myTableCells.length;
var myNextTableCellsAmount = myPresentTableCellsAmount +5;
for (i=myPresentTableCellsAmount; i < myNextTableCellsAmount; i++ ) {
var myTR = myTbody.insertRow(0)
for (j=0; j<5 ; j++ ) {
var myTD = document.createElement(‚TD‘);
myTD.className = ‚‘;
if( j%2==0 && i%2 ==1 || j%2==1 && i%2 ==0 ) {
myTD.innerHTML = ‚Inhalt‘;
}
myTR.appendChild(myTD);
}
}
}

function drawLines() {
var myTable = document.getElementById(‚myTbody‘).parentNode;
var myTableCells = myTable.getElementsByTagName(‚TD‘);
for (i=0; i<myTableCells.length ; i++ ) {
if(i%3 !=0) myTableCells[i].className = ‚x‘;
else myTableCells[i].className = ‚‘;
}
myTable.style.borderCollapse = ‚collapse‘;
}
//–>
Tabelle füllen
einzelne Rahmen setzen Wenn du vor weiterem Befüllen der Tabelle die Eigenschaft border-collapse:collapse entziehst und sie ihr erst nach Setzen der Rahmenlinien wieder gibst, vermeidest du das Problem im Firefox.

Diesen Bug kannte ich vorher auch noch nicht.
Ich hoffe du kannst die Lösung für deine Zwecke gebrauchen.

Gruß Gernot

#8

hm …
Moin Gernot,

Danke für das Code-Beispiel. Stimmt, in dieser Konstellation scheint es zu funktionieren. Allerdings hatte ich das auch schon ausprobiert und festgestellt, dass dad Ab- und Anschalten des Zusammenfallens auch nicht zu sauberen Ergebnissen führt. Es kommt fast das gleiche heraus wie vorher. Modifiziere Dein Beispiel mal wie folgt:

Lösche die letzte Zeile in „drawLines“ und lagere sie stattdessen in eine separate Funktion aus:function coll()
{
var myTable = document.getElementById(‚myTbody‘).parentNode;
myTable.style.borderCollapse = (myTable.style.borderCollapse == ‚separate‘) ? ‚collapse‘ : ‚separate‘;
} // collUnten fügst Du dann noch einen zusätztlichen Link ein: [Collapse!](javascript:coll()) (das mit dem onClick und der Raute kannst Du Dir übrigens sparen). Du wirst sehen, dass nur Müll herauskommt. Bei mir jedenfalls. Ehm … ich sehe allerdings gerade, dass der IE den gleichen Müll produziert. Sonderbar. Scheint noch wieder was anderes zu sein. Bei meiner Anwenung hat der IE bisher immer alles richtig gemacht :wink: