Andreas Pakulat: Whitespace zwischen 2 TD's!

Hi,

ich hab eine sehr merkwürdige Sache hier:

<table style="width:90%" border="1" cellspacing="0" cellpadding="0">
 <tr>
   <td style="background-color:#FFCC33;height;3"></td>
   <td style="background-color:#FFCC33;width:16%" valign="middle"
                class="Kontakt" align="center">
     <b>NEWS</b></td>
   <td style="background-color:#FFCC33;width:15px" valign="top"
         align="right"><img src="corner_bottom_left.gif"
                width="15" height="15"></td>
   <td style="background-color:#FFFFFF;width:84%" valign="top"></td>
[...]

In dieser Tabelle ist extra Whitespace zwischen der Spalte mit NEWS und dem darauffolgenden Bild. Ich hab davon mal nen Screenshot gemacht. Das merkwürdige ist halt, dass ich nirgendwo einen Abstand zwischen den Zellen definiert habe auch in der Klasse Kontakt nicht!

Es hilft auch die Angabe von display:block im img-Tag nicht, ich hab wirklich keine Ahnung wo ich da ansetzen sollte?

mfg Andreas

  1. Hallo

    ich hab eine sehr merkwürdige Sache hier:

    schau'n wir doch mal...

    <table style="width:90%" border="1" cellspacing="0" cellpadding="0">

    cellspacing & -padding könnten noch ne Einheit vertragen...

    <tr>
       <td style="background-color:#FFCC33;height;3"></td>

    dto. für height, außerdem würde ich nach 'height' ein ':' anstatt eines ';' verwenden, und generell hinter einem ';' ein ' ' frei lassen

    <td style="background-color:#FFCC33;width:16%" valign="middle"
                    class="Kontakt" align="center">
         <b>NEWS</b></td>
       <td style="background-color:#FFCC33;width:15px" valign="top"

    liegt hier schon der Fehler? td ist 15px breit. und das Bild? vielleicht nur 14px, entsteht dadurch ein "Rand"

    align="right"><img src="corner_bottom_left.gif"
                    width="15" height="15"></td>

    Einheiten fehlern...

    <td style="background-color:#FFFFFF;width:84%" valign="top"></td>

    besser ein ' ' Platz lassen nach ';'

    [...]

    [snip]... ich hab wirklich keine Ahnung wo ich da ansetzen sollte?

    Mein Vorschlag:
    1. Flüchtigkeitsfehler korrigieren
    2. im td mit dem Bild die width-Angabe weglassen/ändern

    dann schau'ma weiter :-)
    _______________________
    Mit freundlichen Grüßen
    Sebastian

    1. Hallo,

      schau'n wir doch mal...

      Gute Idee!

      <table style="width:90%" border="1" cellspacing="0" cellpadding="0">
      cellspacing & -padding könnten noch ne Einheit vertragen...

      Falsch! Entweder eine Zahl für Pixel, oder Zahl% für Prozentangaben
      0 ist also korrekt.

      <tr>
         <td style="background-color:#FFCC33;height;3"></td>
      dto. für height, außerdem würde ich nach 'height' ein ':' anstatt eines ';' verwenden,

      würde = er muss! ;-)

      »»und generell hinter einem ';' ein ' ' frei lassen

      Das ist reine Geschmacksache.

      <td style="background-color:#FFCC33;width:15px" valign="top"
      liegt hier schon der Fehler? td ist 15px breit. und das Bild? vielleicht nur 14px, entsteht dadurch ein "Rand"
               align="right"><img src="corner_bottom_left.gif"
                      width="15" height="15"></td>

      Die Breite des Bildes spielt keine Rolle. (Auserdem: wenn er 15px Breite für das Bild angibt, streckt ein Browser das Bild dann auch auf 15px, auch wenn es eigentlich nur 14px breit sein sollte)

      Einheiten fehlern...

      Falsch! Siehe oben.

      <td style="background-color:#FFFFFF;width:84%" valign="top"></td>
      besser ein ' ' Platz lassen nach ';'

      Das ist noch immer reine Geschmacksache.

      @Andreas

      [snip]... ich hab wirklich keine Ahnung wo ich da ansetzen sollte?

      Die Seite online stellen, damit man sie sich ansehen kann, wobei ich davon ausgehe, dass du nach <td> und vor <img> keinen Zeilenumbruch in deinem Quelltext hast: spich <td><img></td> und nicht
      <td>
        <img>
      </td>

      Grüße
      Thomas

      1. Hi,

        <tr>
           <td style="background-color:#FFCC33;height;3"></td>
        dto. für height, außerdem würde ich nach 'height' ein ':' anstatt eines ';' verwenden,

        würde = er muss! ;-)

        Das ist ein Typo, aber leider auch im code :( gewesen

        [snip]... ich hab wirklich keine Ahnung wo ich da ansetzen sollte?

        Die Seite online stellen, damit man sie sich ansehen kann,

        Hab ich jetzt, aber das komische ist, dort sieht's gut aus?!
        Teile des Dokumentes funktionieren nicht, da ich nur diese eine Seite hochgeladen hab (+Bilder) und den Rest nicht, aber das sollte ja eigentlich keinen Einfluss darauf haben ob die Seite ordentlich aussieht? Ein diff zwischen den jeweils gespeicherten Versionen der Dateien zeigt auch nichts.

        Vielleicht sollte ich dazu sagen, das die Seite dynamische Inhalte enthält die von einem ApplicationServer(Zope) erzeugt werden. Was aber eigentlich ja nichts anderes bedeutet als das dieser an einigen Stellen HTML-Code einfügt.

        wobei ich davon ausgehe, dass du nach <td> und vor <img> keinen Zeilenumbruch in deinem Quelltext hast: spich <td><img></td> und nicht
        <td>
          <img>
        </td>

        Ja, das Problem hatte ich schonmal woanders, also darauf passe ich auf. Es ist ja auch kein Leerraum innerhalb eines <td></td> sondern zwischen </td> und dem nächsten <td>!

        mfg Andreas

        1. Hallo,

          Die Seite online stellen, damit man sie sich ansehen kann,

          Hab ich jetzt, aber das komische ist, dort sieht's gut aus?!
          Teile des Dokumentes funktionieren nicht, da ich nur diese eine Seite hochgeladen hab (+Bilder)

          http://localhost:9673/ls-dbis/Bilder/corner_bottom_left.gif  ???

          Auf meinem localhost liegen deine Bilder aber nicht! ;-)

          Grüße
          Thomas

          1. Hallo,

            Die Seite online stellen, damit man sie sich ansehen kann,

            Hab ich jetzt, aber das komische ist, dort sieht's gut aus?!
            Teile des Dokumentes funktionieren nicht, da ich nur diese eine Seite hochgeladen hab (+Bilder)

            http://localhost:9673/ls-dbis/Bilder/corner_bottom_left.gif  ???

            Auf meinem localhost liegen deine Bilder aber nicht! ;-)

            Huuch, da hab ich wohl was vergessen. Aber jetzt sind die Links soweit korrekt das die problematische Tabelle angezeigt wird. Aus irgendeinem Grund ist das jetzt auch wieder mit Leerraum. Ich werd mal fix darunter diesselbe Tabelle mit ner Border malen lassen, damit man das besser sieht.

            Andreas

            1. Hallo,

              Huuch, da hab ich wohl was vergessen. Aber jetzt sind die Links soweit korrekt das die problematische Tabelle angezeigt wird. Aus irgendeinem Grund ist das jetzt auch wieder mit Leerraum. Ich werd mal fix darunter diesselbe Tabelle mit ner Border malen lassen, damit man das besser sieht.

              Entschuldige, aber langsam macht diese Art des Spiels keinen Spaß mehr:

              "404 Unable to retrieve /~ap125/style_css."
               <link rel="stylesheet" href="style_css" type="text/css">

              Ich würde dir gerne helfen, aber wenn ich mich darum kümmern muss, dass du alle notwendige Dateien online stellt, macht das echt keinen Spaß.

              So wie es im Moment aussieht (ohne die CSS-Datei) gibt es das Problem bei meinem IE6 und Mozill 1.3 nicht, auch wenn es sehr wohl Zeilenumbrüche in deiner Tabelle gibt:
              ---------------------------------------------------
              <tr>
                      <td style="background-color:#FFCC33;height:3"></td>
                      <td style="background-color:#FFCC33;width:16%" valign="middle"
                class="Kontakt" align="center">
                 <b style="display:block">NEWS</b></td>
               <td style="background-color:#FFCC33;width:15px" valign="top"
                align="right"><img src="Bilder/corner_bottom_left.gif"
                  width="15" height="15"></td>
               <td style="background-color:#FFFFFF;width:84%" valign="top"></td>
               <td style="width:3;background-color:#FFFFFF">
                 <img src="Bilder/spacer.gif"
                   height="3" width="1" style="display:block"></td>
                    </tr>

              ---------------------------------------------------

              Der Quelltest der Seite schuat so aus als würde er von einem Script dynamisch zusammengestellt, falls nicht, könntest du deinen Editor so einstellen, dass er erst nach 200 oder 300 Zeichen einen Zeilenumbruch macht.
              Sonst wie gesagt: im IE6 und Mozilla 1.3  ist der Fehler nicht zu sehen (aber ohne dein CSS)

              Grüße
              Thomas

              1. Hallo,

                Huuch, da hab ich wohl was vergessen. Aber jetzt sind die Links soweit korrekt das die problematische Tabelle angezeigt wird. Aus irgendeinem Grund ist das jetzt auch wieder mit Leerraum. Ich werd mal fix darunter diesselbe Tabelle mit ner Border malen lassen, damit man das besser sieht.

                Entschuldige, aber langsam macht diese Art des Spiels keinen Spaß mehr:

                "404 Unable to retrieve /~ap125/style_css."
                <link rel="stylesheet" href="style_css" type="text/css">

                Ich würde dir gerne helfen, aber wenn ich mich darum kümmern muss, dass du alle notwendige Dateien online stellt, macht das echt keinen Spaß.

                Kann ich verstehen, aber ich habe leider keine Möglichkeit den Application Server der den HTML-Code eigentlich erzeugt online zu stellen. Ich kann also nur lokal mir das angucken und dann den Quelltext wegspeichern. Ich hoffe das es jetzt funktioniert.

                So wie es im Moment aussieht (ohne die CSS-Datei) gibt es das Problem bei meinem IE6 und Mozill 1.3 nicht, auch wenn es sehr wohl

                Also ich habs mittlerweile auch mit Konqueror und Opera getestet und die zeigen auch lokal richtig an. Mozilla ist bei mir noch 1.0.0, weil es bisher keine neuen Debianpakete dafür gibt.

                Zeilenumbrüche in deiner Tabelle gibt:


                <tr>
                        <td style="background-color:#FFCC33;height:3"></td>
                        <td style="background-color:#FFCC33;width:16%" valign="middle"
                  class="Kontakt" align="center">
                   <b style="display:block">NEWS</b></td>

                Hier ist das Problem, genau zwischen der oberen und der unteren Zelle entsteht im Mozilla ein Leerraum.

                <td style="background-color:#FFCC33;width:15px" valign="top"
                  align="right"><img src="Bilder/corner_bottom_left.gif"
                    width="15" height="15"></td>
                <td style="background-color:#FFFFFF;width:84%" valign="top"></td>
                <td style="width:3;background-color:#FFFFFF">
                   <img src="Bilder/spacer.gif"

                ^^^^^^^^^^^^^^^^^^^
                Du meinst das? Das liegt aber hinter dem Problem nicht davor

                Der Quelltest der Seite schuat so aus als würde er von einem Script dynamisch zusammengestellt,

                Wie gesagt das Ding wird von nem ApplicationServer erzeugt, d.h. Teile  sind fest kodierter Html (z.B. die obere Zeile mit der falschen Darstellung) andere Teile werden beim Abruf dynamisch ersetzt (z.B. die eigentliche URL der Bilder).

                falls nicht, könntest du deinen Editor so einstellen, dass er erst nach 200 oder 300 Zeichen einen Zeilenumbruch macht.

                Nee, geht nicht, ich habe schon mit den 100 Zeichen langen Zeilen genug Probleme im XTerm+vim. Wenn das style-Attribut nicht komplett auf einer Zeile stehen müsste würd ich bei max. 80 Zeichen umbrechen.

                Das die Einrückung teilweise nicht ganz stimmt, liegt auch vor allem an der dynamischen Generierung und daran das der Header der HTML-Datei in einer anderen Datei steht als der Body.

                Sonst wie gesagt: im IE6 und Mozilla 1.3  ist der Fehler nicht zu sehen (aber ohne dein CSS)

                Aber das stylesheet ist nicht so wichtig, maximal für die Textauszeichnung in dem Fall. Hatte mir das ja genau so wie es im Netz stand angeguckt und hatte den Fehler.

                Wie gesagt wahrscheinlich liegts am älteren Mozilla hier. Ich hab auch festgestellt das wenn ich das ganze markiere und dann die Markierung aufhebe dann ists weg, bis ich ein anderes Fenster in Vordergrund hole.

                1. Hallo,

                  Wie gesagt wahrscheinlich liegts am älteren Mozilla hier.

                  Ich habe dir drei Screenshots gemacht:

                  http://www.meta-text.net/etc/andreas1_ie.jpg
                  http://www.meta-text.net/etc/andreas1_moz.jpg
                  http://www.meta-text.net/etc/andreas1_op.jpg

                  Grüße
                  Thomas

                  1. Hallo,

                    Wie gesagt wahrscheinlich liegts am älteren Mozilla hier.

                    Ich habe dir drei Screenshots gemacht:

                    http://www.meta-text.net/etc/andreas1_ie.jpg
                    http://www.meta-text.net/etc/andreas1_moz.jpg
                    http://www.meta-text.net/etc/andreas1_op.jpg

                    Hab ich mir gedacht. Bin auch grad dabei den Mozilla Sourcecode zu laden. Werde dann wohl heute nacht compilieren lassen...

                    Danke fürs verifizieren.

                    Andreas

      2. schau'n wir doch mal...
        Gute Idee!

        <table style="width:90%" border="1" cellspacing="0" cellpadding="0">
        cellspacing & -padding könnten noch ne Einheit vertragen...
        Falsch! Entweder eine Zahl für Pixel, oder Zahl% für Prozentangaben
        0 ist also korrekt.

        ich habe geschrieben: "könnte"... also ich habe mal gelesen, dass Einheits-Angaben immer eine gute Sache sind. Leider kann ich aber derzeit die Quelle nicht mehr finden ... :-(

        <tr>
           <td style="background-color:#FFCC33;height;3"></td>
        dto. für height, außerdem würde ich nach 'height' ein ':' anstatt eines ';' verwenden,
        würde = er muss! ;-)
        »»und generell hinter einem ';' ein ' ' frei lassen
        Das ist reine Geschmacksache.

        dto. leider wieder ohne Quelle...

        <td style="background-color:#FFCC33;width:15px" valign="top"
        liegt hier schon der Fehler? td ist 15px breit. und das Bild? vielleicht nur 14px, entsteht dadurch ein "Rand"
                 align="right"><img src="corner_bottom_left.gif"
                        width="15" height="15"></td>
        Die Breite des Bildes spielt keine Rolle. (Auserdem: wenn er 15px Breite für das Bild angibt, streckt ein Browser das Bild dann auch auf 15px, auch wenn es eigentlich nur 14px breit sein sollte)

        ajo, mein Fehler... ich meinte das auch andersherum, das Bild schmaler als die td-Breitenangabe... sorry

        _______________________
        Mit freundlichen Grüßen
        Sebastian

        1. Hallo,

          0 ist also korrekt.
          ich habe geschrieben: "könnte"... also ich habe mal gelesen, dass Einheits-Angaben immer eine gute Sache sind. Leider kann ich aber derzeit die Quelle nicht mehr finden ... :-(

          Bei CSS hast du recht.
          Aber es ging um HTML Angaben.
          Beides kann man in der jeweiligen Spez. nachlesen. ;-)

          Grüße
          Thomas