Janine: Tabelle mit nix.gif in HTML 4.01 Transitional

Hallo,
am Anfang eines HTML-Dokument steht folgende Deklaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Im <body> kommt u.a. diese Tabelle vor:

<table border="0" width="646" cellspacing="0" cellpadding="0">
<tr>
 <td height="1" bgcolor="#000000"><img alt="" src="../images/misc/nix.gif" width="1" height="1"></td>
</tr>
</table>

Im Netscape 4 sowie in allen IE Versionen, die ich getestet habe, wird diese Tabelle als schwarzer Strich mit Länge 646 und Höhe 1 dargestellt. Nur bei Mozilla/Netscape 6 erscheint ein ca. 10 Pixel hoher schwarzer Balken mit Länge 646.

Die Prüfung mit verschiedenen HTML-Checkern hat leider keinen Fehler gefunden.
Hat vielleicht jemand eine Erklärung dafür?

Vielen Dank im voraus!

  1. hi

    <table border="0" width="646" cellspacing="0" cellpadding="0">
    <tr>
    <td height="1" bgcolor="#000000"><img alt="" src="../images/misc/nix.gif" width="1" height="1"></td>
    </tr>
    </table>

    Im Netscape 4 sowie in allen IE Versionen, die ich getestet habe, wird diese Tabelle als schwarzer Strich mit Länge 646 und Höhe 1 dargestellt. Nur bei Mozilla/Netscape 6 erscheint ein ca. 10 Pixel hoher schwarzer Balken mit Länge 646.

    und wieder einmal....:)
    Das hängt damit zusammen, das das Bild auf der baseline steht und nicht ganz unten. Es gibt dazu diverse Lösungen, hier wäre es das einfachste, wenn man das Bild mit valign="botton" versieht.

    Grüße aus Bleckede

    Kai

    1. Tag auch

      <table border="0" width="646" cellspacing="0" cellpadding="0">
      <tr>

      <td style="font-size:1px" bgcolor="#000000"><img alt="" src="../images/misc/nix.gif" width="1" height="1"></td>

      </tr>
      </table>

      Funktioniert auf jeden Fall.

      Thomas J.

      1. Hallo.

        Funktioniert auf jeden Fall.

        Oder auch nicht. Hab selbes Problem (wobei ich nur 2px hoch bin).

        <tr>
                  <td class="navi"><img src="images/line.gif" width="140" height="1" alt="" /></td>
                </tr>

        mit:
        td.navi {
         background-color : #C9DA96;
                color : #000000;
         font-size : 1px;
         width : 140px;
         height : 1px;
        }

        Grüße aus Würzburg
        Julian

        1. Tag auch

          Oder auch nicht. Hab selbes Problem (wobei ich nur 2px hoch bin).

          Sorry, das kann ich nicht nachvollziehen.

          <table cellspacing="0" cellpadding="0" width="600" bgcolor="#000000">
          <tr>
           <td style="font-size:1px"><img src="blank.gif" width="1" height="1" border="0" alt=""></td>
          </tr>
          </table>
          ergibt bei mir eine Tabelle, die exakt 1 Pixel hoch ist.

          Thomas J.

          1. Tag auch

            Oder auch nicht. Hab selbes Problem (wobei ich nur 2px hoch bin).

            Sorry, das kann ich nicht nachvollziehen.

            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#000000">
            <tr>
            <td style="font-size:1px"><img src="blank.gif" width="1" height="1" border="0" alt=""></td>
            </tr>
            </table>
            ergibt bei mir eine Tabelle, die exakt 1 Pixel hoch ist.

            Thomas J.

            Hast Du eigentlich auch den Typ auf HTML 4.01 Transitional gestellt?

            1. Hast Du eigentlich auch den Typ auf HTML 4.01 Transitional gestellt?

              Yep.

              1. Hast Du eigentlich auch den Typ auf HTML 4.01 Transitional gestellt?
                Yep.

                Wie? mit <!DOCTYPE HTML PUBLIC "blatransitionalbal" ..> oder mit <!doctype html public ..>?

                Gruß Herbalizer

              2. Hast Du eigentlich auch den Typ auf HTML 4.01 Transitional gestellt?
                Yep.

                Dann kann ich mir eigentlich nur noch vorstellen, daß Du keinen Link zur DTD-Datei angegeben hast. Wenn man den wegläßt, emulieren die neueren Browser (IE6, Mozilla usw.) Rendering Bugs älterer Browser. Wozu das auch immer gut sein mag ...

                richtig:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                falsch, aber kompatibel:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                1. Hallo Janine,

                  Dann kann ich mir eigentlich nur noch vorstellen, daß Du keinen Link zur DTD-Datei angegeben hast.

                  Ist in diesem Fall egal. Interessant ist's, ob die Zeile einzeln ist oder nicht. Das Beispiel von thomas passt bei mir auch, fügt man aber eine zweite Zeile mit font-size != 1px ein, dann zerhautst das auch.

                  Grüße asu Würzburg
                  Julian

              3. Hast Du eigentlich auch den Typ auf HTML 4.01 Transitional gestellt?
                Yep.

                Hallo,

                lass doch das "http://www.w3.org/TR/html4/loose.dtd" weg. Dann funxt!

                warum? keine Ahnung - hatte ich aber schonmal in irgendeinem Zusammenhang !

                Gruss RaMa

                1. Hi!

                  lass doch das "http://www.w3.org/TR/html4/loose.dtd" weg. Dann funxt!

                  warum? keine Ahnung - hatte ich aber schonmal in irgendeinem Zusammenhang !

                  Wegen http://mozilla.org/docs/web-developer/quirks/doctypes.html

                  Gruß Herbalizer

          2. Hallo Thomas,

            also mal sämtliche Einstellungen dazu:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
            ...
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="navi"><img src="images/line.gif" width="140" height="1" alt="" /></td>
                    </tr>
                   </table>

            table {
             border : none;
             border-spacing : 0px;
             border-style : none;
             border-collapse : collapse;
            }
            tr {
             font-family : Arial, Helvetica, sans-serif;
             font-size : 12px;
            }
            td {
             padding : 0px;
             background-color : #FFFFFF;
             color : #000000;
             border : none;
            }
            td.navi {
             background-color : #C9DA96;
                color : #000000;
             font-size : 1px;
             width : 140px;
             height : 1px;
            }

            Mal andersrum gefragt: Auf welchem Mozilla wird's denn bei Dir korrekt dargestellt? Immerhin sind wir ja zwei gegen einen... ;-)

            Grüße aus Würzburg
            Julian

          3. Hallo Thomas,

            hab Dein Beispiel mal getestet: Und siehe da, es klappt.
            Teste Du doch bitte mal eine Tabelle, die aus mehr als einer Zeile besteht und die Zeile dann auch nicht 1px hoch ist. z.B.:
            <table cellspacing="0" cellpadding="0" width="600" bgcolor="#000000">
            <tr>
             <td style="font-size:1px"><img src="blank.gif" width="1" height="1" border="0" alt=""></td>
            </tr>
            <tr>
             <td style="font-size:12px">Test</td>

            </tr>
            </table>

            Grüße aus Würzburg
            Julian

      2. Tag auch

        <table border="0" width="646" cellspacing="0" cellpadding="0">
        <tr>
        <td style="font-size:1px" bgcolor="#000000"><img alt="" src="../images/misc/nix.gif" width="1" height="1"></td>
        </tr>
        </table>
        Funktioniert auf jeden Fall.

        Funktioniert leider nur teilweise. Dann ist das Bild zwar nicht mehr ganz so hoch, aber immer noch zwei anstatt einem Pixel.

        1. Funktioniert leider nur teilweise. Dann ist das Bild zwar nicht mehr ganz so hoch, aber immer noch zwei anstatt einem Pixel.

          Huch!
          Welche Mozilla-Version hast Du denn?

          Thomas J.

          1. Funktioniert leider nur teilweise. Dann ist das Bild zwar nicht mehr ganz so hoch, aber immer noch zwei anstatt einem Pixel.

            Huch!
            Welche Mozilla-Version hast Du denn?

            Thomas J.

            Ich habe Version 1.0 unter Windows NT 4.0. Allerdings sieht es unter Netscape 6.2 völlig identisch aus.

      3. hi

        <td style="font-size:1px" bgcolor="#000000">

        dann können wir lieber gleich die line-height runterscheuchen - die isses nämlich auch, die im Sloppy-mode reduziert wird ;)

        Grüße aus Bleckede

        Kai

        1. Hi,

          dann können wir lieber gleich die line-height runterscheuchen

          Nö, is nich. Auch mit font-size:1px und/oder line-height:1px und mit/ohne Link zur DTD ist die Zeile zu hoch sobald sie nicht alleine in der Tabelle ist.

          Grüße aus Würzburg
          Julian

    2. hi

      und wieder einmal....:)
      Das hängt damit zusammen, das das Bild auf der baseline steht und nicht ganz unten. Es gibt dazu diverse Lösungen, hier wäre es das einfachste, wenn man das Bild mit valign="botton" versieht.

      Das hat leider nichts gebracht. Das Bild ist immer noch so groß wie vorher.

  2. Hi1

    Bekanntes Problem! Mozilla macht als erstes das Richtig was alle anderen Browser falsch machen! Siehe:
    http://developer.netscape.com/evangelism/docs/articles/img-table/

    Gruß Herbalizer