Michael Schröpl: Seitliche Abstände von Tabellenfeldern

Hallo Leute,

ich habe eine Vorgabe, eine Tabelle zu layouten.

Um bestimmten Feldern seitliche Mindestabstände zu geben, hat der Kunde leere Tabellenspalten der Art <td>&nbsp:</td> eingezogen.
Nach Lektüre von </selfhtml/tdcd.htm#a17> etc. versuche ich nun, diese (inhaltlich überflüssigen) Spalten durch CSS-Formatierungen (seitliche Abstände) zu ersetzen.

Also:

td
{font-family:Arial,Helvetica,sans-serif;
font-size:80%;
padding-left:10px;
padding-right:10px;
text-align:right;
vertical-align:middle;}

.odd
{background-color:#FFFFFF;}

.name
{text-align:left;}

für Tabellenzeilen vom Typ

<tr class="odd">
<td class="name">Allianz AG</td>
<td>358,00</td>
<td class="plus">5,51%</td>
</tr>

die sich per Programm dann sehr nett generieren lassen.

Netscape 4 scheint meine padding-Anweisungen nicht zu verstehen (keine Wirkung).
Alles andere außer dem padding funktioniert m. E. in beiden Browsern.

Hat jemand eine Idee, was ich verkehrt mache? Laut SelfHTML soll padding mit NS4 gehen ...
leider kriege ich das Zeug nicht online, um das CSS wenigstens validieren zu können.

mfg - Michael

  1. Hallo Michael!

    .abc {
    font-family:Arial,Helvetica,sans-serif;
    font-size:80%;
    padding:0 10 0 10;
    width:100%;

    text-align:right;
    vertical-align:middle;
    }
    .odd {
    background-color:#FFFFFF;
    }
    .name {
    text-align:left;
    }
    -->
    </style>
    </head>
    <body bgcolor="#000000">

    <table border="0">
    <tr class="odd">
    <td class="name"><div class="abc">Allianz AG</div></td>
    <td><div class="abc">358,00</div></td>
    <td class="plus"><div class="abc">5,51%</div></td>
    </tr>
    </table>

    Grüße
    Thomas

    1. Hallo Thomas,

      vielen Dank erst mal, aber zunächst einmal wird damit die Zahl der Fragen nur größer.

      1. Soll ich das jetzt so verstehen, daß die Angabe "Netscape 4" bei "padding-right" falsch ist?

      2. Stefans Beschreibung sagt ausdrücklich: "Mit padding: bestimmen Sie *einen* einheitlichen Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, links, unten und rechts. Erlaubt ist *eine* numerische Angabe."
      Ich wäre nie auf die Idee gekommen, bei "numerische Angabe" <../../tdbd.htm#a1> ein Viertupel zu verwenden. Geht das generell? Wo steht das?

      3. Du hast meine <td>-Formatierung in ein <div> umgesetzt mit

      .abc {
      font-family:Arial,Helvetica,sans-serif;
      font-size:80%;
      padding:0 10 0 10;
      width:100%;
      text-align:right;
      vertical-align:middle;
      }

      und

      <td class="name"><div class="abc">Allianz AG</div></td>

      Leider hat dieses <div> jetzt aber Vorrang vor dem td.name, womit ich den Namen (anders als
      alle anderen <td>s, die eben meine <td>-Formatierung nehmen sollen) linksbündig setzen wollte.
      Das funktioniert mit Deinem Konzept nicht mehr, und das ist leider schlimmer als das vorher fehlende Padding.

      Wenn ich Deine padding-4Tupel-Angabe aber einfach in meine <td>-Beschreibung einbaue, dann hat sie keinen Effekt (wieso auch immer ...).

      Hm ... grübelgrübel .... irgendwie verstehe ich es noch nicht ...

      1. Hallo Michael!

        vielen Dank erst mal, aber zunächst einmal wird damit die Zahl der Fragen nur größer. 1. Soll ich das jetzt so verstehen, daß die Angabe "Netscape 4" bei "padding-right" falsch ist?

        Jein. Zumindest akzeptiert NS4.x padding nicht überall (z.B. nicht im td)

        1. Stefans Beschreibung sagt ausdrücklich:

        tja... ist etwas irreführend, zugegeben.

        Ich wäre nie auf die Idee gekommen, bei "numerische Angabe" <../../tdbd.htm#a1> ein Viertupel zu verwenden. Geht das generell? Wo steht das?

        Ja, das geht. http://www.w3.org/TR/REC-CSS2/box.html#padding-properties

        Ich hätte ja auch nur
        padding:0px 10px; schreiben können, was
        padding-top:0px;
        padding-right:10px;
        padding-bottom:0px;
        padding-left:10px; entspricht

        1. Du hast meine <td>-Formatierung in ein <div> umgesetzt mit
          Das funktioniert mit Deinem Konzept nicht mehr, und das ist leider schlimmer als das vorher fehlende Padding.

        dann machen wir es so:

        <html>
        <head>
        <title>test 4</title>
        <style type="text/css">
        <!--
        .abc {
        font-family:Arial,Helvetica,sans-serif;
        font-size:80%;
        padding:0px 10px;
        text-align:right;
        }
        .name {
        font-family:Arial,Helvetica,sans-serif;
        font-size:80%;
        padding:0px 10px;
        text-align:left;
        }
        .odd {
        background-color:#FFFFFF;
        }

        -->
        </style>
        </head>
        <body bgcolor="#000000">
        <table border="0" width="50%">
        <tr class="odd">
        <td><div class="name">Allianz AG</div></td>
        <td><div class="abc">358,00</div></td>
        <td><div class="abc">5,51%</div></td>
        </tr>
        </table>
        </body>
        </html>

        Grüße
        Thomas

        1. Hallo Thomas,

          irgendwie wird mir gerade zum ersten Mal so richtig bewußt, was es bedeutet, um die Fehler von Netscape herumprogrammieren zu müssen.

          Also: Erst mal vielen Dank - es sieht jetzt *beinahe* so aus, wie ich es haben wollte.
          Leider bewirkt die Angabe "0 10 0 10" aber, daß sich die Tabellenzeilen in der *Höhe* ändern!
          (Nicht viel, aber doch ein oder zwei Pixel - man merkt es nur, wenn man alte und neue Version in zwei Browserfenstern nebeneinander hat.)

          Durch die Verlagerung der CSS-Anweisungen von <td> nach <div> wird zudem der generierte Code größer - und die Ladezeit des entsprechenden Dokuments ebenfalls.

          Außerdem muß ich jetzt die Formatierung auch noch zwischen <td> und <div> mischen, d. h. Kombinationen aus beidem verwenden, eben wegen der (semantisch bedingten) Färbung der Feldinhalte:

          <tr class="odd">
          <td><div class="name">Allianz AG</div></td>
          <td><div class="abc">358,00</div></td>
          <td class="plus"><div class="abc">5,51%</div></td>
          </tr>

          Was die Wartbarkeit der Software keineswegs erhöht.
          Anderfalls müßte ich die Formatierungen vermutlich ausmultiplizieren, also komplettes CSS für jede Kombination von Feldfärbung und Textformatierung definieren.
          Das wiederum ist eine Katastrophe, weil der Kunde diese Formatierungen ggf. selbst warten können will (mein CGI-Skript generiert nur die nackte Tabelle, das CSS wird in der umgebenden SSI-Datei definiert, deren Aussehen der Kunde selbst bestimmt - außerdem soll das CGI-Skript innerhalb des SSI-Dokuments mit verschiedenen Parametern mehrfach aufgerufen werden, deshalb will ich die CSS-Definitionen auch nicht selbst generieren und n-mal ausgeben). Wenn alles in minimaler Darstellung gegangen wäre, dann wäre das viel einfacher für den Kunden gewesen.

          <schluchz>Ich will wieder zu meinem guten alten HTML zurück ...</schluchz>

          1. ... einen Browserabsturz später:

            Also: Erst mal vielen Dank - es sieht jetzt *beinahe* so aus, wie ich es haben wollte.
            Leider bewirkt die Angabe "0 10 0 10" aber, daß sich die Tabellenzeilen in der *Höhe* ändern!
            (Nicht viel, aber doch ein oder zwei Pixel - man merkt es nur, wenn man alte und neue Version in zwei Browserfenstern nebeneinander hat.)

            ... was sich mit "-1 10 -1 10" wieder korrigieren läßt - oioioi ... :-(

      2. Hallo Michael!

        vielen Dank erst mal, aber zunächst einmal wird damit die Zahl der Fragen nur größer.

        Das laesst sich wohl nur selten vermeiden bei Wissenszuwachs....
        ;-)

        1. Soll ich das jetzt so verstehen, daß die Angabe "Netscape 4" bei "padding-right" falsch ist?

        »»
        Nein. aber nach meinen Erfahrungen funktioniert nur padding-top und padding-left im NN 4. NN ist "selbst schuld"!

        Ich wäre nie auf die Idee gekommen, bei "numerische Angabe" <../../tdbd.htm#a1> ein Viertupel zu verwenden. Geht das generell? Wo steht das?

        »»
        Ich empfehle Dir http://www.htmlhelp.com/, dort gibt es neben sehr guten Anleitungen (u.a. zu allen CSS-Properties und deren Schreibweise) auch Online-Code-Checker (CSS und HTML) , bei denen man Dateien auch lokal vom Rechner checken kann!!!! (was deine urspruengliche Frage beantworten duerfte).

        Hope that helps...
        Gruss,
        Daniel

  2. Hallo Michael!

    leider kriege ich das Zeug nicht online, um das CSS wenigstens validieren zu können.

    Mit einem Web-Server auf dem Rechner und einer Online-Verbindung kannst Du auch Dateien valligatorisieren lassen, die auf Deinem PC liegen. Einfach die URI in die W3C-Maske eingeben (so wurden saemtliche Auslesedateien crocodile-jubilee gemacht)!

    Um die aktuelle IP zu ermitteln, kann man unter Start/Ausfuehren einfach winipcfg eingeben...

    http://ermittelteIP/selfspezial/sfausles_neu/zuvalidiernedeauslesedatei.htm war dann die URI, die in die Maske kam.

    Bis danndann
    PAF (patrickausfrankfurt), SELFSPEZIAL

    1. leider kriege ich das Zeug nicht online, um das CSS wenigstens validieren zu können.
      Mit einem Web-Server auf dem Rechner und einer Online-Verbindung kannst Du auch Dateien valligatorisieren lassen, die auf Deinem PC liegen. Einfach die URI in die W3C-Maske eingeben (so wurden saemtliche Auslesedateien crocodile-jubilee gemacht)!

      Unter http://www.homepage.de/home/schroepl/_validate/ kannst Du Dir die Lösung für meine Homepage ansehen - bloß vom Büro aus geht eben kein FTP durch die Firewall ...

      Um die aktuelle IP zu ermitteln, kann man unter Start/Ausfuehren einfach winipcfg eingeben...

      Huch? Keiner meiner beiden WinNT4-Rechner findet dieses Kommando.
      Braucht man dafür Admin-Privileg? (Habe ich natürlich nicht.)

      http://ermittelteIP/selfspezial/sfausles_neu/zuvalidiernedeauslesedatei.htm war dann die URI, die in die Maske kam.

      Die lokale IP-Adresse meines Entwicklungsrechners mit Apache drauf weiß ich (muß ich ja leider, siehe <../../sfarchiv/2000_2/t00262.htm>), aber wenn ich die eingebe, meint der Valligator nur:
      "Transport endpoint is not connected."
      (Was weiß ich, wie viele Adreßübersetzungen zwischen hier und dem WWW liegen - meine außen sichtbare Surf-Adresse ist vermutlich die der Firewall in *Zürich* ...)

      1. Hallo Michael!

        Um die aktuelle IP zu ermitteln, kann man unter Start/Ausfuehren einfach winipcfg eingeben...

        Huch? Keiner meiner beiden WinNT4-Rechner findet dieses Kommando.
        Braucht man dafür Admin-Privileg? (Habe ich natürlich nicht.)

        Nein :-) Allerdings kenne ich WinNT nicht. Unter Windows 98 ist die winipcfg.exe unter C:\WINDOWS

        Vielleicht heisst die Datei unter NT anders! Kann mir aber nicht vorstellen, dass es sowas nicht gibt...

        Ansonsten kann das in der Tat an der Firewall liegen, dass es nicht klappt.

        Bis danndann
        PAF (patrickausfrankfurt), SELFSPEZIAL

      2. Hallo Michael und Patrik

        Um die aktuelle IP zu ermitteln, kann man unter Start/Ausfuehren einfach winipcfg eingeben...

        Huch? Keiner meiner beiden WinNT4-Rechner findet dieses Kommando.
        Braucht man dafür Admin-Privileg? (Habe ich natürlich nicht.)

        Unter WinNT heist der Befehl 'ipconfig' und wird mit folgnder Syntax aufgerufen:

        <---schnipp--->
        Windows NT IP-Konfiguration

        Syntax: IPCONFIG [/? /ALL /RELEASE [Adapter] /RENEW [Adapter]]

        /?         Zeigt diesen Hilfetext an.
             /ALL       Zeigt vollst„ndige Konfigurationsinformation an.
             /RELEASE   Gibt die IP-Adresse für den angegebenen Adapter frei.
             /RENEW     Erneuert die IP-Adresse für den angegebenen Adapter.

        Standardm„áig wird nur die IP-Adresse, die Subnet Mask und das Standard-
        Gateway für jeden an TCP/IP gebundenen Adapter angezeigt.

        Wird bei /RELEASE oder /RENEW kein Adaptername angegeben, so werden die
        IP-Adressen aller an TCP/IP gebundenen Adapter freigegeben oder erneuert.
        <---schnapp--->

        Grüsse
        Tom