Rand in Tabellen funktioniert in Firefox nicht, IE aber OK!

[Peter]

Hallo
Ich hoffe, Ihr könnt mir weiterhelfen.
Ich benutze mehrere Tabellen (meist mit nur 2 Spalten) auf meiner Seite und habe Probleme, dass Firefox meine Randangaben ignoriert und die Spalteninhalte sozusagen direkt ohne Abstand aneinander hängt. Im IE funktioniert das aber einwandfrei ohne Fehler! Woran könnte das liegen?
Vielen Dank für Eure Antworten!
Gruß
Peter

Hier der Code:

<table style="MARGIN-LEFT:5%;">
   <tr>
   <td class="Tdohnerahmenfett" width="15%">01.01.2008</td>
   <td class="Tdohnerahmenfett"><nobr>keine Probe!</nobr></td>
   </tr>
</table>

Hier der CSS-Eintrag:

TD.Tdohnerahmenfett  {
 FONT-FAMILY: Arial, Geneva, Helvetica;
 FONT-SIZE: 11px;
 FONT-WEIGHT: bold;
 text-align:left;
 padding-left:2%;
 COLOR: #000000;
  }

[Gunnar Bittersmann]

@@Peter:

habe Probleme, dass Firefox meine Randangaben ignoriert und die Spalteninhalte sozusagen direkt ohne Abstand aneinander hängt.

Kann ich nicht nachvollziehen.

<table style="MARGIN-LEFT:5%;">
   <tr>
   <td class="Tdohnerahmenfett" width="15%">01.01.2008</td>
   <td class="Tdohnerahmenfett"><nobr>keine Probe!</nobr></td>
   </tr>
</table>

Du mischst hier Inline-Styles, veraltete HTML-Attribute und CSS-Angaben im zentralen Stylesheet. Wie willst du da Übersicht behalten?

Verzichte auf 'style'-Attribute! Verzichte auf HTML-Attribute wie 'width'! Mache ALLE Darstellungsangaben im Stylesheet!

Bennene Klassen nie nach der gegenwärtig gewünschten Darstellung!

Und wenn alle Zellen derselben Klasse angehören, ist die Klassifizierung unnötig. Die Zellen lassen sich auch mittels Selektor für Nachfahren [CSS2 §5.1, CSS2 §5.5] ansprechen:

HTML:

<table class="foo">  
  <tr>  
    <td>01.01.2008</td>  
    <td>keine Probe!</td>  
  </tr>  
</table>

CSS:

.foo td  
{  
  font-family: Arial, Geneva, Helvetica;  
  font-size: 11px;  
  font-weight: bold;  
  text-align: left;  
  padding-left: 2%;  
  color: #000000;  
}

Und obwohl CSS nicht case-sensitiv ist, solltest du nicht Groß- und Kleinschreibung mischen, sondern dich für eine entscheiden. Üblich ist Kleinschreibung.

Live long and prosper,
Gunnar

[Peter]

Hallo Gunnar
Ich denke, man sieht meine Anfängerfehler:

Kann ich nicht nachvollziehen.

Problem z.B. unter

http://www.musikkapelle-bischweier.de/kapelle.htm#diri19052005

Du mischst hier Inline-Styles, veraltete HTML-Attribute und CSS-Angaben im zentralen Stylesheet. Wie willst du da Übersicht behalten?

Noch geht´s grad so :-)! Mit meinen Kenntnissen bin ich eigentlich immer total happy, wenn was überhaupt funktioniert!

Verzichte auf 'style'-Attribute! Verzichte auf HTML-Attribute wie 'width'! Mache ALLE Darstellungsangaben im Stylesheet!

Ich glaub, da blick ich dann nicht mehr durch, wenn ich das Gesamtbild der Tabelle und dann noch die Formatierung der Zellinhalte im CSS festlege.

Bennene Klassen nie nach der gegenwärtig gewünschten Darstellung!

Darf ich fragen, wieso nicht? (siehe "Anfänger")

Und wenn alle Zellen derselben Klasse angehören, ist die Klassifizierung unnötig. Die Zellen lassen sich auch mittels Selektor für Nachfahren ansprechen:

Gehören sie nicht, hab teilweise auch Zellinhalte anderst formatiert.

Und obwohl CSS nicht case-sensitiv ist, solltest du nicht Groß- und Kleinschreibung mischen, sondern dich für eine entscheiden. Üblich ist Kleinschreibung.

Werd ich ändern!

[Der Martin]

Hallo Peter,

Ich glaub, da blick ich dann nicht mehr durch, wenn ich das Gesamtbild der Tabelle und dann noch die Formatierung der Zellinhalte im CSS festlege.

das ist eine Sache der Gewohnheit - eigentlich ist es doch sogar übersichtlicher, wenn man alle Angaben, die das Aussehen betreffen, an einer Stelle zusammenfasst.

Bennene Klassen nie nach der gegenwärtig gewünschten Darstellung!
Darf ich fragen, wieso nicht? (siehe "Anfänger")

Ja, darfst du.

... ach, du hast schon gefragt? ;-)
Ganz einfach: Weil sich die Vorgaben an die Gestaltung während der Lebensdauer eines Projekts doch gelegentlich ändern. Und spätestens dann wird es verwirrend, wenn die Elemente mit class="BlauerKasten" plötzlich in einem blassgelben Kasten stehen sollen. Deswegen sollte man die Bezeichner für Klassen und IDs besser nach dem Verwendungszweck oder nach dem Sinn des damit ausgezeichneten Elements wählen. So ist der Klassenname "Fehlermeldung" sicher geeigneter als "RoteBox".

Und obwohl CSS nicht case-sensitiv ist, solltest du nicht Groß- und Kleinschreibung mischen, sondern dich für eine entscheiden. Üblich ist Kleinschreibung.
Werd ich ändern!

Gut. Das macht's auch leichter lesbar - durchgehende Großschreibung ist recht anstrengend zu lesen (vom Schreiben ganz abgesehen).

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

durchgehende Großschreibung ist recht anstrengend zu lesen (vom Schreiben ganz abgesehen).

Du kennst caps lock/shift lock? ;-)

Live long and prosper,
Gunnar

[Der Martin]

Hallo Gunnar,

durchgehende Großschreibung ist recht anstrengend zu lesen (vom Schreiben ganz abgesehen).
Du kennst caps lock/shift lock? ;-)

natürlich - kenne ich, kann ich anwenden, unterstütze ich aber nicht.  :-P

Schönen Abend noch,
 Martin

[Kai345]

Moin!

durchgehende Großschreibung ist recht anstrengend zu lesen (vom Schreiben ganz abgesehen).

Du kennst caps lock/shift lock? ;-)

Völlig überflüssiges Teil übrigens :) Macht nur Probleme.
Erste Aktion bei einer neuen Tastatur -> Ausbau dieser Taste.

Cü,

Kai

[Gunnar Bittersmann]

@@Peter:

http://www.musikkapelle-bischweier.de/kapelle.htm#diri19052005

Verweise einbinden.

<td class="Tdohnerahmen" width="100">

Damit setzt du die Spaltenbreite auf 100 Pixel. Der Leerraum zwischen den Inhalten wird damit mit größerer Schriftgröße kleiner. Zweckmäßig wäre eine Breitenangabe relativ zur Schriftgröße (in em).

Verzichte auf 'style'-Attribute! Verzichte auf HTML-Attribute wie 'width'! Mache ALLE Darstellungsangaben im Stylesheet!

Ich glaub, da blick ich dann nicht mehr durch, wenn ich das Gesamtbild der Tabelle und dann noch die Formatierung der Zellinhalte im CSS festlege.

Glaub mir, genau das fördert die Übersichtlichkeit, wenn alle Darstellungsangaben im Stylesheet stehen, nicht übers ganze HTML-Dokument verstreut.

Bennene Klassen nie nach der gegenwärtig gewünschten Darstellung!

Darf ich fragen, wieso nicht? (siehe "Anfänger")

Das hatte ich erst kürzlich beschrieben. Wegen eines Fehlers im Forum ([TICKET364], alle Jahre wieder) kann ich das Posting gerade nicht wiederfinden. Ich hoffe, der Fehler wird schnell behoben.

Und wenn alle Zellen derselben Klasse angehören, ist die Klassifizierung unnötig. Die Zellen lassen sich auch mittels Selektor für Nachfahren ansprechen:

Gehören sie nicht, hab teilweise auch Zellinhalte anderst formatiert.

Bei dir gehören ALLE 'td'-Elemente der Klasse "Tdohnerahmen" an; damit ist diese Klasse völlig überflüssig.

Schauen wir mal in deinen Quelltext:

<h2><a name="diri19052005"></a>Dirigenten 1905-2005</h2>

Alle diese 'a'-Elemente sind überflüssig. Stattdessen:

<h2 id="diri19052005">Dirigenten 1905-2005</h2> [SELFHTML: Anker definieren und Verweise zu Ankern.

Deine Tabelle sollte in etwa so notiert sein:

<table id="table_diri19052005">  
  <tbody>  
    <tr>  
      <th>1905-1909</td>  
      <td>Karl Berg, Rastatt</td>  
    </tr>  
    <tr>  
      <th>1909-1913</td>  
      <td class="Tdohnerahmen">Franz Vogt, Rastatt</td>  
    </tr>  
    <!-- ... -->  
  </tbody>  
</table>

Im Stylesheet:

#table_diri19052005  
{  
  margin-left: 5%;  
}  
  
#table_diri19052005 th  
{  
  width: 100px; /* Das war deine bisherige Angabe. Wie gesagt, besser in em angeben. */  
}

'th' ist für die Zellen der ersten Spalte das passende HTML-Element; es sind ja die Kopfzellen der jeweiligen Tabellenzeile. [SELFHTML: Tabellen definieren]

(Die Selektion der Zellen der ersten Tabellenspalte wäre in CSS auch mit der Pseudoklasse :first-child möglich; dafür ist aber der IE zu blöd.)

Eine andere Möglichkeit der Breitenangabe bietet das Vordefinieren von Spalten; aber nicht so wie in SELFHTML angegebn, sondern die Breitenangabe im Stylesheet!

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Bennene Klassen nie nach der gegenwärtig gewünschten Darstellung!

Das hatte ich erst kürzlich beschrieben. Wegen eines Fehlers im Forum ([TICKET364], alle Jahre wieder) kann ich das Posting gerade nicht wiederfinden.

Zufällig doch noch gefunden: http://forum.de.selfhtml.org/archiv/2008/1/t164379/#m1071408

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Peter:

Problem z.B. unter
http://www.musikkapelle-bischweier.de/kapelle.htm

Du solltest die Browser nicht in den Quirks-Modus schicken, aber nicht nur deshalb den DOCTYPE angeben.

Danach das Dokument mal durch einen Validator (http://validator.w3.org/, http://www.validome.org/) jagen; da sind einige kleine Fehler zu berichtigen.

Live long and prosper,
Gunnar