Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Table-Definition mit Javascript

Sigi Saudi / 7 Antworten / Baumansicht Nickles

Hallo Gemeinde,
Dass es Unterschiede in der Interpretation von html zwischen dem IE und Firefox gibt, wurde schon ausreichend diskutiert. Ich finde es besonders aergerlich, dass der IE standardmaessig weisse table-borders setzt, waehrend der Firefox standardmaessig schwarze table-borders verwendet. Da ich nicht in Trauer bin, aergern mich die schwarzen borders, besonders, wenn sie breiter sind.
Zuerst versuchte ich, dem Problem mit dem Attribut bordercolor="white" (oder #fff) in der table-Definition beizukommen. Das war aber keine Loesung, weil der W3C Markup Validation Service dann folgende Fehlermessage anzeigte:

Line 156, Column 20: there is no attribute "BORDERCOLOR"
<table bordercolor="white" width="504" border="12" cellspacing="0" cellpadding=…

Dann versuchte ich es mit einem style-String in der table-Definition der Art:

style="border-color:white;"

Das funktionierte fuer den Firefox einwandfrei, aber nun zeigte der IE in Falle von breiteren Bordern (border="12"), wie ich sie brauchte, alle 4 Seiten der Border reinweiss an. Standardmaessig zeigt der IE die linke und die obere Border weiss und die rechte und die untere Border grau geshaded an. Das erzeugt einen quasi 3D Eindruck, den ich im IE nicht verlieren wollte.
Also entschloss ich mich, das Problem mit Javascript anzugehen. Meine Loesung ist in keiner Weise html-Konform, aber sie funktioniert. Ich moechte die Loesung hier mal vorstellen und eure (konstruktive) Meinung dazu hoeren.
Ich habe den table nicht mehr im html-Code generiert, sondern anstelle der table-Definition setzte ich folgende Javascript-Zeilen ein:

<script type="text/javascript">
<!-- createtable() -->
</script>

Die dazugehoerige Funktion im head ist:

<script type="text/javascript">
<!--
function createtable()
{
var browserName=navigator.appName;

if (browserName=="Netscape")
{
document.write("<table style='border-color:white;' width='504' border='12' cellspacing='0' cellpadding='0' bgcolor='#66ccff'>");
}
else
{
document.write("<table width='504' border='12' cellspacing='0' cellpadding='0' bgcolor='#66ccff'>");
}
}
-->
</script>

Ich frage also zuerst ab, ob der verwendete Browser ein Netscape (Firefox) Browser ist. Wenn das zutrifft, fuege ich mit einem document.write an der Stelle des Funktionsaufrufs eine table-Definition in den html-Code ein, die den style-String fuer die border-color enthaelt, damit der Firefox nun eine weisse Border, geshaded darstellt. Ist der Browser nicht ein Netscape (gilt natuerlich auch fuer den IE), fuege ich eine table-Definition in den html-Code ein, die den style-String nicht enthaelt.
Diese Prozedur liefert mir das Ergebnis, das ich wuensche. Beide Browser generieren eine weissen Rahmen, geshaded. Beispiel:

http://www.moon-and-sun.com/booking/Lilawadi-ger.html

Natuerlich meckert jetzt der W3C Validator extrem:

Line 172, Column 4: document type does not allow element "TR" here
<tr>
Das kommt fuer jedes tr tag in dem table, da ja im html-code die table-Definition fehlt. Und weiter:

Line 227, Column 8: end tag for element "TABLE" which is not open
</table>

Was meint ihr dazu? Kann man das machen? Das ich mich mit dieser Massnahme extrem ausserhalb der html-Konventionen bewege, weiss ich.
Ich bitte um KONSTRUKTIVE Meinungen und Anregungen und vielleicht auch andere Loesungen, die ich nicht gefunden habe.
MfG
Sigi Saudi aus Wang Nam Kiaw / Thailand


Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Borlander Sigi Saudi „Table-Definition mit Javascript“
Optionen

Ich sehe keinen Grund warum man für den Rand mehr als das/die CSS-Attribut(e) border(-*) benötigen sollte. Auch einen 3D-Effekt kannst Du durch Wahl eines geeigneten Stils bekommen. Siehe dazu auch http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border_style

Gruß
Borlander

bei Antwort benachrichtigen
Sigi Saudi Borlander „Ich sehe keinen Grund warum man für den Rand mehr als das/die CSS-Attribut e...“
Optionen

Hallo Borlander,
Erst mal recht herzlichen Dank fuer Deine Antwort zu meinem Problem. Die CSS Loesung funktioniert natuerlich wie gewuensch.
Eigentlich weiss man diese Dinge, aber wenn man sie braucht, ist es wie verhext. Da ist man dann darauf fixiert, dass IE und Firefox html unterschiedlich interpretieren und dann ist die "logische" Konsequenz, dass sie unterschiedliche Definitionen brauchen. An andere Moeglichkeiten denkt man dann nicht und deshalb hatte ich den Artikel geschrieben, damit freundliche Leute wie Du mir auf die Spruenge helfen.
Ich generierte nun also folgende Klasse:

.frame
{
border-left:12px solid white;
border-top:12px solid white;
border-right:12px solid grey;
border-bottom:12px solid grey;
}

und die gemeinsame table-Definition fuer alle Browser sieht dann folglich so aus:

<table class="frame" width="504" cellspacing="0" cellpadding="0" bgcolor="#66ccff">

und das Ergebnis ist zu sehen unter

http://www.moon-and-sun.com/booking/FueangFa-ger.html

Vielen Dank noch einmal. Num muss ich bloss noch die anderen html-Files meiner Homepage durchaendern.
MfG
Sigi Saudi aus dem 31.6 Grad warmen Wang Nam Kiaw / Thailand

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Borlander Sigi Saudi „Hallo Borlander, Erst mal recht herzlichen Dank fuer Deine Antwort zu meinem...“
Optionen
Da ist man dann darauf fixiert, dass IE und Firefox html unterschiedlich interpretieren und dann ist die "logische" Konsequenz, dass sie unterschiedliche Definitionen brauchen.
Einfach sauberes XHTML+CSS und es läuft mit allen Browsern ;-)

.frame
{
border-left:12px solid white;
[...]
}

Da machst Du Dir noch viel zu viel Aufwand: probiere es mal mit sowas wie
border: 12px outset gray;
Outset schafft so einen 3D-Effekt und dürfte recht genau dem entsprechen was der Browser auch ohne CSS mit Tabellen machen würde.

Wobei wir an der Stelle schon zum nächsten Punkt kommen: Für Layout-Zwecke sollte man wirklich keine Tabellen mehr verwenden! Insbesondere Du das Layout hier sehr einfach auch mit divs umsetzen kannst:
<div class="..">
<div>Überschrift</div>
<div>Bild</div>
<div>Navigation</div>
</div>


Auf die alten HTML-Attribute wie bgcolor sollte man sowieso verzichten.

Wenn Du also sowieso schon was ändern musst, dann nutze die Chance Altlasten aus dem letzten Jahrtausend gleich mit rauszuwerfen...


Gruß
Borlander
bei Antwort benachrichtigen
Sigi Saudi Borlander „ Einfach sauberes XHTML CSS und es läuft mit allen Browsern - Da machst Du Dir...“
Optionen

Hallo Borlander,
Vielen Dank fuer die wertvollen Hinweise.
Ich werde mich damit beschaeftigen, aber jetzt ist es hier in Wang Nam Kiaw 23:20 h (6 Std Zeitversatz) und ich werde erst mal schlafen gehen.
MfG
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Borlander „ Einfach sauberes XHTML CSS und es läuft mit allen Browsern - Da machst Du Dir...“
Optionen

Hallo Borlander,
Ich habe Deinen Rat befolgt und die ganze Seite statt mit tables mit div Containern erstellt. Das Ergebnis ist abgelegt unter:
http://www.moon-and-sun.com/booking/Lilawadi-ger-div.html
aber nun meine Frage. Du sagst

Für Layout-Zwecke sollte man wirklich keine Tabellen mehr verwenden! Insbesondere Du das Layout hier sehr einfach auch mit divs umsetzen kannst:

Warum soll man tables nicht mehr verwenden? Das Ergebnis ist doch gleich. Was ist der Vorteil, Seiten mit div-Containern statt mit tables zu generieren? Ich stelle die Frage ganz ohne Polemik.

Aber auch bei der div-Containerprogrammierung gibt es wieder Haken und Oesen wegen der unterschiedlichen Interpretation des Codes im IE und im Firefox.
Ich erstellte also einen, sagen wir mal Main-Container #container, der die Subcontainer #headline, #image und die float-container #count, #navigation und #close aufnehmen und um alle einen 12px Rahmen legen sollte. Im IE funktionierte das auch einwandfrei, aber im Firefox waren die 3 float-Container nicht im Rahmen mit drin. Der Rahmen schloss unter der Textzeile des jeweiligen Bildes und die float-Container hingen unten dran, teilweise ueberschrieben vom unteren Rahmen.
Um das Problem zu ueberkommen, generierte ich dann einen leeren div-Container #outer hinein in #container, in den ich die 3 float-div-Container dann hineinlegte. Damit hatte ich das gewuenschte Ergebnis im IE als auch im Firefox, der 12px Rahmen umschloss nun das Gesamtwerk und das ist auch in der oben genannten html-URL so enthalten..
Es geht also auch mit div-Containern, aber warum div-Container? Nur, weil diese Programmierungstechnologie neuer ist, stellt fuer mich kein Argument dar, wenn es keine anderen, messbaren Vorteile gibt.
MfG aus dem sonnigen, 30.9 Grad warmen Wang Nam Kiaw. (Ich werde mich jetzt wieder mit dem Maehen meines 2200 qm grossen Rasens beschaeftigen.)
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Borlander Sigi Saudi „Hallo Borlander, Ich habe Deinen Rat befolgt und die ganze Seite statt mit...“
Optionen
Warum soll man tables nicht mehr verwenden? Das Ergebnis ist doch gleich. Was ist der Vorteil, Seiten mit div-Containern statt mit tables zu generieren? Ich stelle die Frage ganz ohne Polemik.
Tabellen gibt es um tabellarische Daten darzustellen. Umgekehrt heißt dies jedoch auch, dass in Tabellen erwartet wird, dass dort tabellarische Daten drin sind. Ist also eine Frage der Semantik. Dass es überhaupt in Mode kam Tabellen für Layout-Zwecke nur weil HTML ganz am Anfang früher (als es CSS noch nicht gab) keine anderen Möglichkeiten gab zu komplexere Layouts umzusetzen. Semantische Korrektheit ist u.A. auch wichtig um eine gute Erfassbarkeit für Suchmaschinen zu ermöglichen...

DIVs und SPANs sind Elemente ohne semantische Bedeutung. Wenn es semantisch passende Elemente gibt sind die natürlich zu bevorzugen.

float-Layouts sind übrigens immer ein wenig schwierig...


Gruß
Borlander
bei Antwort benachrichtigen
Sigi Saudi Borlander „ Tabellen gibt es um tabellarische Daten darzustellen. Umgekehrt heißt dies...“
Optionen

Hallo Borlander,
Ich hatte mich heute schon selbst von den Vorteilen von div Programmierung fuer html-Pags ueberzeugt. Ich habe heute den Kopf und die linke Spalte einer Seite umcodiert vom table-Layout zum div-Layout.

http://www.moon-and-sun.com/booking/index-en.php

Alle die kleinen Aergernisse, die ich bei der table-Programmierung als Systemimmanent hingenommen hatte, lassen sich mit div's eliminieren. Da ist zun Beispiel das exakte Einpassen eines Images, das in einen td-Rahmen nie funktioniert. Da ist immer irgendwo ein argerlicher Hintergrundstreifen zu sehen, weil das td sich nicht 100%-ig mit einem Image ausfuellen laesst und fuer Images ist align und valign in tables ein Witz. Das stoerte mich sehr. Auch beim Zoomen eines Images werden die table-Nachbarzellen weggequetsch, bei div wird das zoomende Image ueber die Nachbarcontainer ueberschrieben, wenn man den z-Index geschickt waehlt. Auch Ramen lassen sich exakter setzen und colorieren, ohne doppelte Rahmen von benachbarten Zellen zu bekommen. Es gibt also viele Vorteile mit div gegenueber table. Man braucht nur mal einen Anstoss zum Umsteigen.
Ich danke Dir, mir diesen Anstoss gegeben zu haben.
MfG
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen