Drathy: Tabellenbreite funzt im FF nicht...

Hallo!

Ich nutze folgende Eigenschaften für meine Tabelle:

<table borders="0" cellspacing="0" cellpadding="0" style="width:520px;text-align:center; position:absolute;top:280px;left:360px;">

Im Firefox wird diese allerdings nicht mit vorgegebener Breite angezeigt sondern mit einer minimalen Breite...

Woran liegt das??

  1. Hallo,

    <table borders="0" cellspacing="0" cellpadding="0" style="width:520px;text-align:center; position:absolute;top:280px;left:360px;">

    Was ist "borders"?

    Im Firefox wird diese allerdings nicht mit vorgegebener Breite angezeigt sondern mit einer minimalen Breite...

    Woran erkennst Du das? Folgendes:

    <table border="0" cellspacing="0" cellpadding="0" style="width:520px; text-align:center; position:absolute; top:280px; left:360px; background-color:#00D900;">
    <tr><td>Test</td></tr>
    </table>

    sieht im IE und im Firefox relativ gleich aus.

    Woran liegt das??

    An etwas, was Du uns bisher nicht gezeigt hast.

    viele Grüße

    Axel

    1. Im Firefox wird diese allerdings nicht mit vorgegebener Breite angezeigt sondern mit einer minimalen Breite...
      Woran erkennst Du das? Folgendes:

      Daran, dass der Text innerhalb der Tabelle dicht an dicht ist, und nicht durch die Größe der Tabellenzellen auseinander gezogen wird...

      Woran liegt das??
      An etwas, was Du uns bisher nicht gezeigt hast.

      Wie sich gerade gezeigt hat, (mit border="1") ist die Breite der Tabelle ok, aber die der Zellen nicht... Selbst wenn ich die Breite der Zellen (4 Spalten) jeweils auf 25% setze, wird nicht die Breite der gesamten Tabelle ausgefüllt...komisch!

      1. Hallo,

        Woran erkennst Du das?
        Daran, dass der Text innerhalb der Tabelle dicht an dicht ist, und nicht durch die Größe der Tabellenzellen auseinander gezogen wird...

        Welcher Text? Du hast nur den TABLE-Tag gepostet.

        Wie sich gerade gezeigt hat, (mit border="1") ist die Breite der Tabelle ok, aber die der Zellen nicht... Selbst wenn ich die Breite der Zellen (4 Spalten) jeweils auf 25% setze, wird nicht die Breite der gesamten Tabelle ausgefüllt...komisch!

        Wenn Du wirklich willst, dass Dir jemand helfen kann, dann bringen solche diffusen Beschreibungen gar nichts. Bitte zeige uns den relevanten Quelltext. Das beste wäre ein Link zu einem online erreichbaren Beispiel.

        viele Grüße

        Axel

        1. Welcher Text? Du hast nur den TABLE-Tag gepostet.

          Ok, alles klar. Dachte es hätte mit dem TABLE-Tag zu tun, im Nachhinein natürlich quatsch. Hier der komplette BODY:

          <body>
          <?PHP include_once($_SERVER["DOCUMENT_ROOT"]."/wDeutsch/wLayout/structure/header.php");?>
          <div class="blockContent">

          <div class="elementBild">
               <img src="/wDeutsch/img/sehtest.jpg" alt="">
          </div>
          <div class="headline">Anleitung</div>

          <div class="text">Bitte stellen Sie sich im in der unten stehenden Tabelle angebenen
          Abstand vor Ihren Monitor.
          </div>

          <table border="1" cellspacing="0" cellpadding="0" style="width:520px; text-align:center; position:absolute; top:280px; left:360px; ">
            <tr>
             <td class="sehtestTabelleHL">Größe des Monitors</td>
             <td class="sehtestTabelleHL">640x480px</td>
             <td class="sehtestTabelleHL">800x600px</td>
             <td class="sehtestTabelleHL">1024x768px</td>
            </tr>
            <tr>
             <td class ="sehtestTabelle">14''</td>
             <td class ="sehtestTabelle">5,5m</td>
             <td class ="sehtestTabelle">4,0m</td>
             <td class ="sehtestTabelle">1,9m</td>
            </tr>
            <tr>
             <td class ="sehtestTabelle">15''</td>
             <td class ="sehtestTabelle">6,0m</td>
             <td class ="sehtestTabelle">4,5m</td>
             <td class ="sehtestTabelle">2,4m</td>
            </tr>
            <tr>
             <td class ="sehtestTabelle">17''</td>
             <td class ="sehtestTabelle">7,0m</td>
             <td class ="sehtestTabelle">5,5m</td>
             <td class ="sehtestTabelle">3,4m</td>
            </tr>
          </table>

          <div class="text" style="position:absolute;top:400px;">
          Der Abstand, den Sie vom Bildschirm einhalten sollten, ist von der Größe
          und Auflösung Ihres Monitors abhängig. Bitte schließen oder bedecken Sie
          Ihr linkes Auge. Können Sie die Zahlenreihe fehlerfrei lesen, verfügen Sie
          über die jeweils darunter angegebene Sehschärfe auf dem rechten Auge.
          Um die Sehschärfe <br>Ihres linken Auges zu überprüfen, bedecken Sie doch
          bitte das rechte Auge und wiederholen Sie den Test.
          </div>

          <div class="elementWeiterButton">
          <a href="/wDeutsch/sehtest/10_prozent.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','/wDeutsch/wLayout/design/img/icons/weiter_hover.gif',1)"><img src="/wDeutsch/wLayout/design/img/icons/weiter.gif" width="103" height="43" border="0" name="Image1"></a>

          </div>
          <?PHP include_once($_SERVER["DOCUMENT_ROOT"]."/wDeutsch/wLayout/structure/footer_sehtest.php");?>
          </body>

          Die dazugehörigen css-Definitionen:

          .sehtestTabelleHL     {font-size:15px;font-family:verdana, arial, sans-serif;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:#B2600B;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:#B2600B;}
          .sehtestTabelle       {font-size:15px;font-family:verdana, arial, sans-serif;border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#000000;}

          Ich hoffe es ist so ok...

          1. Hallo,

            tut mir leid, aber bei mir sieht das in allen Browsern fast gleich aus. Folgendes habe ich getestet:

              
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
                    "http://www.w3.org/TR/html4/strict.dtd">  
            <html>  
            <head>  
            <title>Sehtesttabelle</title>  
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
            <style type="text/css">  
            <!--  
            .sehtestTabelleHL     {font-size:15px;font-family:verdana, arial, sans-serif;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:#B2600B;border-bottom-style:solid; border-bottom-width:2px;border-bottom-color:#B2600B;}  
            .sehtestTabelle       {font-size:15px;font-family:verdana, arial, sans-serif;border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#000000;}  
            -->  
            </style>  
            </head>  
              
            <body>  
              
            <div class="blockContent"> <!--DIV1 Anfang-->  
              
            <div class="elementBild"> <!--DIV2 Anfang-->  
                 <img src="/wDeutsch/img/sehtest.jpg" alt="">  
            </div> <!--DIV2 Ende-->  
            <div class="headline">Anleitung</div> <!--DIV3 Anfang und Ende-->  
              
            <div class="text">Bitte stellen Sie sich im in der unten stehenden Tabelle angebenen  
            Abstand vor Ihren Monitor.  
            </div> <!--DIV4 Anfang und Ende-->  
              
            <table border="1" cellspacing="0" cellpadding="0" style="width:520px; text-align:center; position:absolute; top:280px; left:360px; ">  
              <tr>  
               <td class="sehtestTabelleHL">Größe des Monitors</td>  
               <td class="sehtestTabelleHL">640x480px</td>  
               <td class="sehtestTabelleHL">800x600px</td>  
               <td class="sehtestTabelleHL">1024x768px</td>  
              </tr>  
              <tr>  
               <td class ="sehtestTabelle">14''</td>  
               <td class ="sehtestTabelle">5,5m</td>  
               <td class ="sehtestTabelle">4,0m</td>  
               <td class ="sehtestTabelle">1,9m</td>  
              </tr>  
              <tr>  
               <td class ="sehtestTabelle">15''</td>  
               <td class ="sehtestTabelle">6,0m</td>  
               <td class ="sehtestTabelle">4,5m</td>  
               <td class ="sehtestTabelle">2,4m</td>  
              </tr>  
              <tr>  
               <td class ="sehtestTabelle">17''</td>  
               <td class ="sehtestTabelle">7,0m</td>  
               <td class ="sehtestTabelle">5,5m</td>  
               <td class ="sehtestTabelle">3,4m</td>  
              </tr>  
            </table>  
              
            <div class="text" style="position:absolute;top:400px;">  
            Der Abstand, den Sie vom Bildschirm einhalten sollten, ist von der Größe  
            und Auflösung Ihres Monitors abhängig. Bitte schließen oder bedecken Sie  
            Ihr linkes Auge. Können Sie die Zahlenreihe fehlerfrei lesen, verfügen Sie  
            über die jeweils darunter angegebene Sehschärfe auf dem rechten Auge.  
            Um die Sehschärfe <br>Ihres linken Auges zu überprüfen, bedecken Sie doch  
            bitte das rechte Auge und wiederholen Sie den Test.  
            </div> <!--DIV5 Anfang und Ende-->  
              
            <div class="elementWeiterButton"> <!--DIV6 Anfang-->  
            <a href="/wDeutsch/sehtest/10_prozent.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','/wDeutsch/wLayout/design/img/icons/weiter_hover.gif',1)"><img src="/wDeutsch/wLayout/design/img/icons/weiter.gif" width="103" height="43" border="0" name="Image1"></a>  
              
            </div> <!--DIV6 Ende-->  
              
              
            <!--DIV1 Ende?-->  
            </body>  
            </html>  
            
            

            Anmerkungen:
            1. Es fehlt ein abschließendes DIV-Tag.
            2. Man kann nicht nur DIV-Elemente mit CSS formatieren.
            3. Absolutes Positionieren ist nur in wenigen Ausnahmefällen wirklich sinnvoll.
            4. Das TD.sehtestTabelleHL möchte gerne ein TH-Element sein.

            Die Anmerkungen haben aber nichts mit dem Problem zu tun, welches Du beschrieben hast. Wie gesagt, bei mir wird die Tabelle sowohl im IE6.0, als auch im FireFox1.0.7, als auch im Opera8.5 richtig angezeigt.

            viele Grüße

            Axel

            PS: Das mit den 7.00m Abstand vom Monitor ist lustig. Steht Dein PC in einem Saal?

            1. Das CMS, mit welchem das Grundgerüst der Seite erstellt wurde nutzt folgenden Doctype:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
              Kann es evtl. damit zusammenhängen?

              Anmerkungen:

              1. Es fehlt ein abschließendes DIV-Tag.

              Ups, beim kopieren vergessen....

              1. Man kann nicht nur DIV-Elemente mit CSS formatieren.

              Schon klar, aber ich weiß grad nicht auf was Du damit anspielst...

              1. Absolutes Positionieren ist nur in wenigen Ausnahmefällen wirklich sinnvoll.

              Wie positioniere ich die Elemente denn am besten? Mit position:relativ? Sorry, falls blöde Frage...

              1. Das TD.sehtestTabelleHL möchte gerne ein TH-Element sein.

              Hast Recht...

              Die Anmerkungen haben aber nichts mit dem Problem zu tun, welches Du beschrieben hast. Wie gesagt, bei mir wird die Tabelle sowohl im IE6.0, als auch im FireFox1.0.7, als auch im Opera8.5 richtig angezeigt.

              Mist - ich verstehe das nicht...
              Link zum Screenshot: https://fotoalbum.web.de/gast/drathy/pix
              So sieht das bei mir im FF aus...

              PS: Das mit den 7.00m Abstand vom Monitor ist lustig. Steht Dein PC in einem Saal?

              LOL...der Wert kommt vom Optiker.. ;-)

              1. Hallo,

                Das CMS, mit welchem das Grundgerüst der Seite erstellt wurde nutzt folgenden Doctype:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                Kann es evtl. damit zusammenhängen?

                Nein.

                1. Man kann nicht nur DIV-Elemente mit CSS formatieren.
                  Schon klar, aber ich weiß grad nicht auf was Du damit anspielst...

                Darauf, dass ein Textabsatz in ein P-Element gehört, ein Bild auch direkt mit CSS formatiert werden kann, ein '<div class="headline">' nach einem Hx-Element schreit ..., auf HTML eben ;-)).

                1. Absolutes Positionieren ist nur in wenigen Ausnahmefällen wirklich sinnvoll.
                  Wie positioniere ich die Elemente denn am besten? Mit position:relativ? Sorry, falls blöde Frage...

                Nein, die Frage ist nicht blöd, weil darin die eigentliche Kunst der Gestaltung von HTML-Dokumenten liegt. Überlege zuerst welchen Aufbau dein Dokument haben soll. Du hast ein Bild für den Sehtest, darunter eine Überschrift "Anleitung", dann einen Textabsatz und darunter eine Schaltfläche [Weiter], dann folgt die Tabelle und darunter wieder ein Textabsatz. Wenn Du das Dokument so aufbaust, brauchst Du gar nicht zu positionieren, ggf. mit margin ein- bzw. abrücken.

                Mist - ich verstehe das nicht...
                Link zum Screenshot: https://fotoalbum.web.de/gast/drathy/pix
                So sieht das bei mir im FF aus...

                Dann hast Du aber CSS unterschlagen. Diese Ansicht bekomme ich auch hin, mit einem "td {float:left;}" im CSS.

                viele Grüße

                Axel

                1. Kann es evtl. damit zusammenhängen?
                  Nein.

                  Ok, hatte das auch zwischenzeitlich schon getestet... :-/

                  1. Man kann nicht nur DIV-Elemente mit CSS formatieren.
                    Schon klar, aber ich weiß grad nicht auf was Du damit anspielst...
                    Darauf, dass ein Textabsatz in ein P-Element gehört, ein Bild auch direkt mit CSS formatiert werden kann, ein '<div class="headline">' nach einem Hx-Element schreit ..., auf HTML eben ;-)).

                  Hmmm...leuchtet alles ein. Werde das in meinem Hirn vermerken! :)

                  1. Absolutes Positionieren ist nur in wenigen Ausnahmefällen wirklich sinnvoll.
                    Wie positioniere ich die Elemente denn am besten? Mit position:relativ? Sorry, falls blöde Frage...
                    Nein, die Frage ist nicht blöd, weil darin die eigentliche Kunst der Gestaltung von HTML-Dokumenten liegt. Überlege zuerst welchen Aufbau dein Dokument haben soll. Du hast ein Bild für den Sehtest, darunter eine Überschrift "Anleitung", dann einen Textabsatz und darunter eine Schaltfläche [Weiter], dann folgt die Tabelle und darunter wieder ein Textabsatz. Wenn Du das Dokument so aufbaust, brauchst Du gar nicht zu positionieren, ggf. mit margin ein- bzw. abrücken.

                  Danke für Deinen Hinweis! Werde mich bei meiner nächsten Arbeit bemühen, es so aufzubauen!!!

                  Mist - ich verstehe das nicht...
                  Link zum Screenshot: https://fotoalbum.web.de/gast/drathy/pix
                  So sieht das bei mir im FF aus...
                  Dann hast Du aber CSS unterschlagen. Diese Ansicht bekomme ich auch hin, mit einem "td {float:left;}" im CSS.

                  Richtig, ich habe nicht die komplette css-Datei gezeigt - dann würdet Ihr wohl hinten über kippen, da die noch voll Müll ist... :( Aber ein float:left wird nicht verwendet...außerdem würde es dann doch im IE auch so dargestellt werden...

                  1. Hallo,

                    Richtig, ich habe nicht die komplette css-Datei gezeigt - dann würdet Ihr wohl hinten über kippen, da die noch voll Müll ist... :(

                    Dann entmülle sie, sonst wirst Du wohl den Fehler nicht finden.

                    Aber ein float:left wird nicht verwendet

                    ... könnte auch ein "td {display:inline;}" sein, obwohl das, wegen "text-align:center;" für TABLE, etwas anders aussehen sollte.
                    ... könnten auch Kombinationen aus CSS Angaben sein ...

                    ...außerdem würde es dann doch im IE auch so dargestellt werden...

                    Nein, das habe ich getestet, den stört das überhaupt gar nicht.

                    viele Grüße

                    Axel

                    1. Werde die css-Datei umgehend entmüllen!

                      Also ich habe nunmal eben die Positionierung der Tabelle mit margin-left:360px sowie margin-top:280px gemacht und siehe da, der FF stellt die Tabelle nun richtig da.
                      Problem ist nun, dass im IE gar keine Tabelle angezeigt wird (ist wohl nicht richtig positioniert...?!
                      Oh mann, das kann doch echt alles nicht wahr sein...