Werner: Im FF und Opera ok, im IE6 und IE7 falsch

Hallo,
folgendes HTML wird korrekt angezeigt in allen gängigen Browsern
(Tabelle liegt unmittelbar unter der Überschrift "Infoteil"):

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Test</title>  
<style type="text/css">  
<!--  
  #Navigation {  
    float:left;  
    font-size:0.83em;  
    width:220px;  
  }  
  #Infoteil {  
    margin-left:240px;  
    padding:0 1em 0 1em;  
  }  
  #Inhalt {  
    padding-left:2em;  
    padding-right:2em;  
    overflow:hidden;  
  }  
  table.t1 {  
    border:5px #5A7332 solid;  
    border-spacing:0px;  
   }  
  table.t1 td {  
    border:5px #5A7332;  
   }  
-->  
</style>  
</head>  
<body>  
<div id="Navigation">  
<h1>Navi-Teil</h1>  
<a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
<a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
<a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
<a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
<a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
</div>  
<div id="Infoteil">  
<h1>Infoteil</h3>  
     <table  class="t1">  
      <tr>  
       <td style="width:20%; text-align:center">  
            aaaaaaaaaaaaaaaaaaaaa</a>  
       </td>  
       <td style="width:20%; text-align:center">  
            aaaaaaaaaaaaaaaaaaa</a>  
       </td>  
       <td style="width:20%; text-align:center">  
            aaaaaaaaaaaaaaaaaaa</a>  
       </td>  
       <td style="width:20%; text-align:center">  
            aaaaaaaaaaaaaaaaaaa</a>  
       </td>  
       <td style="width:20%; text-align:center">  
            aaaaaaaaaaaaaaaaaaa</a>  
       </td>  
      </tr>  
  
     </table>  
</div>  
</body>  
</html>  

Wird der Text in einer der Spalten um ein oder mehrere "a" verlängert,
so springt die Tabelle im Internet Explorer nach unten während sie in den anderen Tabellen die Position nicht verändert.
Woran kann dies liegen?
Grüße
Werner

  1. Hallo, Werner!

    Das sieht ein wenig wie der Cousin vom Expanding Box Problem aus...

    Da Du ohnehin keine tabellarischen Daten hast: warum machst Du nicht eine ungeordnete Liste (ul -> li...) aus dem, was aller Wahrscheinlichkeit nach eine Menüstruktur werden soll?

    Gruß, LX

    --
    RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
    RFC 1925, Satz 11a: Siehe Regel 6a
    1. Hallo,

      Das sieht ein wenig wie der Cousin vom Expanding Box Problem aus...

      Eher nicht, denn das Problem tritt ja auch beim IE7 auf, und in Deinem zitierten Dokument steht "IE7 has fixed this issue".

      Da Du ohnehin keine tabellarischen Daten hast: warum machst Du nicht eine ungeordnete Liste (ul -> li...) aus dem, was aller Wahrscheinlichkeit nach eine Menüstruktur werden soll?

      Ich habe schon eine echte Tabelle, im Original war der Effekt aber nicht einzukreisen.
      Daher habe ich die Tabelle immer weiter vereinfacht, bis ich auf die Ursache gestoßen bin.

      Gruß
      Werner

      1. Hi,

        Daher habe ich die Tabelle immer weiter vereinfacht, bis ich auf die Ursache gestoßen bin.

        zu welchem Zeitpunkt dieser Vereinfachung hast Du die Validierung des Codes vergessen?

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          Daher habe ich die Tabelle immer weiter vereinfacht, bis ich auf die Ursache gestoßen bin.

          zu welchem Zeitpunkt dieser Vereinfachung hast Du die Validierung des Codes vergessen?

          Danke für die großartige Hilfe!
          Der gemeldete Fehler trat nicht erst durch die Vereinfachung auf, also hat er nichts mit dem jetzt nicht mehr validen Code zu tun!
          Ich habe aber der Ordnung halber den Code korrigiert und der Fehler tritt nach wie vor auf.
          Gruß
          Werner

          1. Was wir an Deinem Code komisch finden, sind die schließenden </a>-Tags, die nichts mit irgendwelchen davorstehenden Links zu tun haben.

            Gruß, LX

            --
            RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
            RFC 1925, Satz 11a: Siehe Regel 6a
            1. Mahlzeit LX,

              Was wir an Deinem Code komisch finden, sind die schließenden </a>-Tags, die nichts mit irgendwelchen davorstehenden Links zu tun haben.

              Es ist auch nicht besonders sinnvoll, ein <h1>-Element zu öffnen und ein </h3>-Element zu schließen ...

              Aber das weiß Werner ja alles, denn er hat ja den Code validiert.

              MfG,
              EKKi

              --
              sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
              1. Mahlzeit LX,

                Was wir an Deinem Code komisch finden, sind die schließenden </a>-Tags, die nichts mit irgendwelchen davorstehenden Links zu tun haben.

                Es ist auch nicht besonders sinnvoll, ein <h1>-Element zu öffnen und ein </h3>-Element zu schließen ...

                Aber das weiß Werner ja alles, denn er hat ja den Code validiert.

                MfG,
                EKKi

                Das ist doch Schnee von gestern!

                Lest doch bitte meinen letzten Beitrag genauer!
                1. Der Fehler trat im Original-HTML auf, dieser war validiert
                2. Auch in dem korrigierten HTML (<h1>....</h1> und Entfernung der </a>
                   tritt der Effekt weiterhin auf!
                Wenn hier die Fragesteller immer wieder aufgefordert werden, das Problem genauer zu beschreiben, so erwarte ich von den Helfern, dass sie die Beiträge wenigstens genauer lesen und ich brauche nicht mehrmals den Hinweis auf invalides HTML (dazu noch zu einem Zeitpunkt, da dies schön längst erledigt war).
                Ich hoffe, dass es jemand gibt, der Sachliches beitragen kann.
                Gruß
                Werner

                1. Mahlzeit Werner,

                  FOTU bzw. TUFO ist nicht besser TOFU.

                  1. Der Fehler trat im Original-HTML auf, dieser war validiert

                  Gut. Und warum war dann der hier gezeigte Code fehlerhaft? Woher sollen Deine Leser wissen, dass der hier gezeigte Code in Teilen mit dem Originalcode nicht übereinstimmt? Woher sollen alle Beteiligten wissen, dass nicht genau diese Teile eventuell irgendwelche Fehler verursachen?

                  Kurzum: warum machst Du es den freiwilligen und ehrenamtlichen Helfern - und damit letztendlich Dir - unnötig schwer?

                  Wenn hier die Fragesteller immer wieder aufgefordert werden, das Problem genauer zu beschreiben,

                  In Deinem konkreten Fall wurde lediglich erwartet, dass Du exakt den Code zeigst, der Probleme verursacht ... und nicht irgendwelche falsch zusammenkopierten, fehlerhaften Bruchstücke (die sich die Helfer am besten noch selbst nachbauen und korrigieren sollen - geht's noch?).

                  so erwarte ich von den Helfern, dass sie die Beiträge wenigstens genauer lesen

                  Zeig doch bitte jetzt endlich mal den *wirklichen* Problem-Code. Nicht irgendwas in der Richtung "Ja, das weiß ich doch, dass das falsch ist - im Original ist das nicht so!" (Woher sollen das Deine Leser wissen? Warum ist das unterschiedlich?) ... nur dann ist eine wirklich zielführende Ursachenforschung möglich und sinnvoll.

                  und ich brauche nicht mehrmals den Hinweis auf invalides HTML (dazu noch zu einem Zeitpunkt, da dies schön längst erledigt war).

                  War es? Wo? Du hast nach dem Hinweis keinen korrigierten Code gepostet. Woher sollen Deine Leser also wissen, wie Dein Code nun *wirklich* aussieht? Sollen wir raten?

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                  1. Mahlzeit Werner,

                    FOTU bzw. TUFO ist nicht besser TOFU.

                    1. Der Fehler trat im Original-HTML auf, dieser war validiert

                    Gut. Und warum war dann der hier gezeigte Code fehlerhaft? Woher sollen Deine Leser wissen, dass der hier gezeigte Code in Teilen mit dem Originalcode nicht übereinstimmt? Woher sollen alle Beteiligten wissen, dass nicht genau diese Teile eventuell irgendwelche Fehler verursachen?

                    Genau das habe ich erläutert! Und ich habe geschrieben, dass daher der Fehler nicht durch die Verkleinerung des Codes kam!

                    In Deinem konkreten Fall wurde lediglich erwartet, dass Du exakt den Code zeigst, der Probleme verursacht ... und nicht irgendwelche falsch zusammenkopierten, fehlerhaften Bruchstücke (die sich die Helfer am besten noch selbst nachbauen und korrigieren sollen - geht's noch?).

                    Der Ursprungscode ist viel zu umfangreich und unübersichtlich!
                    Habe ich erwartet, dass der verinfachte (fehlerhafte) Code von Euch korrigiert werden sollte! Wenn es hätte jemand testen wollen, so hätte er es mit diesem fehlerhaften Code machen können!
                    Mehrfach hatte ich geschrieben, dass der Effekt im Original (validen) Code und bei dem geposteten Code auftritt.

                    Zeig doch bitte jetzt endlich mal den *wirklichen* Problem-Code. Nicht irgendwas in der Richtung "Ja, das weiß ich doch, dass das falsch ist - im Original ist das nicht so!" (Woher sollen das Deine Leser wissen? Warum ist das unterschiedlich?)

                    Ja woher soll es der Leser wissen? Wenn er meine Postings gelesen hätte, da stand es schwarz auf weiss.

                    War es? Wo? Du hast nach dem Hinweis keinen korrigierten Code gepostet. Woher sollen Deine Leser also wissen, wie Dein Code nun *wirklich* aussieht? Sollen wir raten?

                    Habe ich nicht geschrieben, dass ich die angemahnten Fehler korrigiert habe.
                    Wenn ich schreibe ich habe </a> entfernt, dann benötigt man wohl nicht viel Phantasie, zu wissen wie der Code danach aussieht!
                    Aber sich an Nebensächlichkeiten aufhalten ist halt einfacher als sich dem Problem zu widmen.
                    Mir reichts! Ich verzichte auf Deine Hilfe!

                    1. Hi,

                      Der Ursprungscode ist viel zu umfangreich und unübersichtlich!

                      Umfangreich wäre kein Problem (Developer-Tools, mit denen man direkt von angeklickten Elementen zum DOM und damit ggf. Code kommt, existieren) - und Unübersichtlichkeit ist ein weiteres Problem, an dem du in deinem eigenen Interesse arbeiten solltest.

                      Habe ich erwartet, dass der verinfachte (fehlerhafte) Code von Euch korrigiert werden sollte! Wenn es hätte jemand testen wollen, so hätte er es mit diesem fehlerhaften Code machen können!

                      Daraus, wie sich fehlerhafter Code verhält, Rückschlüsse darauf ziehen zu wollen, wie sich fehlerfreier Code verhält (oder nicht), wird kaum jemand wagen, der über etwas Ahnung bzgl. der Materie verfügt. Es wäre einfach Zeitverschwendung.

                      Habe ich nicht geschrieben, dass ich die angemahnten Fehler korrigiert habe.

                      Wenn wir nicht sehen, wie, dann können wir nicht wissen, ob du dabei nicht vielleicht neue Fehler eingebaut hast - ggf. nicht mal syntaktischer, sondern logischer Natur. Ergo könnte wieder nur geraten werden - Zeitverschwendung.

                      *Du* könntest es vermeiden, dass ggf. gleich mehrere Mitleser Zeit verschwenden, anstatt sich deinem Problem zu widmen.
                      Ein validiertes Online-Beispiel, an dem sich das exakt beschriebene Felverhalten nachvollziehen lässt, ist oftmals noch am effektivsten.

                      Aber sich an Nebensächlichkeiten aufhalten ist halt einfacher als sich dem Problem zu widmen.
                      Mir reichts! Ich verzichte auf Deine Hilfe!

                      Schade.

                      MfG ChrisB

                      --
                      “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
  2. Hallo, Werner!

    Entschuldige, wenn wir Forenteilnehmer nicht ganz so hilfsbereit reagieren, wenn man uns das Leben schwer macht. Falls Du immer noch eine Lösung willst, hier ist sie:

    Ich habe mir jetzt mal tatsächlich die Mühe gemacht, Dein Problem nachzuvollziehen. Ich muss so viele aaa's anfügen, dass es theoretisch zu einem Umbruch kommen würde, bevor die Tabelle im IE7 unter den Navi-Teil springt.

    Diesen Fehler basiert auf der hasLayout-Eigenschaft und kann bspw. mit dem zoom-Hack umgangen werden - dazu musst Du lediglich in den CSS-Definitionen folgendes einbauen:

    #Infoteil { zoom: 1; }

    Gruß, LX

    --
    RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
    RFC 1925, Satz 11a: Siehe Regel 6a
    1. Hi LX,

      Ich habe mir jetzt mal tatsächlich die Mühe gemacht, Dein Problem nachzuvollziehen. Ich muss so viele aaa's anfügen, dass es theoretisch zu einem Umbruch kommen würde, bevor die Tabelle im IE7 unter den Navi-Teil springt.

      Ich hatte mich ebenfalls bemüht, allerdings im IE6, da reichten wenige "a"

      Diesen Fehler basiert auf der hasLayout-Eigenschaft und kann bspw. mit dem zoom-Hack umgangen werden - dazu musst Du lediglich in den CSS-Definitionen folgendes einbauen:

      #Infoteil { zoom: 1; }

      Und so etwas hatte ich auch vermutet, allerdings rutschte dann im IE6 nicht nur die aaaa-Zeile sondern auch die Überschrift "Infoteil" nach unten, daher habe ich meine Klappe pardon meine Finger gehalten.
      So long
      Steffen

      1. Diesen Fehler basiert auf der hasLayout-Eigenschaft und kann bspw. mit dem zoom-Hack umgangen werden - dazu musst Du lediglich in den CSS-Definitionen folgendes einbauen:
        #Infoteil { zoom: 1; }

        Und so etwas hatte ich auch vermutet, allerdings rutschte dann im IE6 nicht nur die aaaa-Zeile sondern auch die Überschrift "Infoteil" nach unten, daher habe ich meine Klappe pardon meine Finger gehalten.

        Da Du ja offenbar schon einen Testcase hast: kannst Du mal versuchen, hasLayout durch eine CSS-Höhenangabe einzutüten oder wahlweise dem linken div ebenfalls per zoom:1 hasLayout zu geben?

        Gruß, LX

        --
        RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
        RFC 1925, Satz 11a: Siehe Regel 6a
        1. Da Du ja offenbar schon einen Testcase hast: kannst Du mal versuchen, hasLayout durch eine CSS-Höhenangabe einzutüten oder wahlweise dem linken div ebenfalls per zoom:1 hasLayout zu geben?

          Ich habe das Beispiel von Werner korrigiert aber mit den "zoom:1" an den unterschiedlichen Stellen  hat sich jetzt nichts verändert ===>:

            
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
          <html>  
          <head>  
          <title>Test Werner  mit    Korr. von mir</title>  
          <style type="text/css">  
          <!--  
            #Navigation {  
              float:left;  
              font-size:0.83em;  
              width:220px;  
          /*    zoom:1;                      ###################### ohne Wirkung ################# */  
                                             border: 1px black solid;  
            }  
            #Infoteil {  
              margin-left:240px;  
              padding:0 1em 0 1em;  
          /*    word-wrap:break-word;        ###################### ohne Wirkung ################# */  
          /*    zoom:1;                      ###################### ohne Wirkung ################# */  
          /*    overflow:hidden;             ###################### ohne Wirkung ################# */  
                                             border: 1px red solid;  
            }  
            table.t1 {  
              border:5px #5A7332 solid;  
              border-spacing:0px;  
                                             border: 1px green dashed;  
             }  
            table.t1 td {  
              border:5px #5A7332;  
                                             border: 1px yellow solid;  
             }  
                                             h1 {border: 1px gray dotted;}  
          -->  
          </style>  
          </head>  
          <body>  
          <div id="Navigation">  
          <h1>Navi-Teil</h1>  
          <a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
          <a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
          <a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
          <a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
          <a href="http://www.example.com">aaaaaaaaaaaaaaaaaa</a><br><br>  
          </div>  
          <div id="Infoteil">  
          <h1>Infoteil</h1>  
               <table  class="t1">  
                <tr>  
                 <td style="width:20%; text-align:center">xaaaaaaaaaaaaaaaaaaaa</td>  
                 <td style="width:20%; text-align:center">aaaaaaaaaaaaaaaaaaa</td>  
                 <td style="width:20%; text-align:center">aaaaaaaaaaaaaaaaaaa</td>  
                 <td style="width:20%; text-align:center">aaaaaaaaaaaaaaaaaaa</td>  
                 <td style="width:20%; text-align:center">aaaaaaaaaaaaaaaaaaa</td>  
                </tr>  
            
               </table>  
          </div>  
          </body>  
          </html>  
          
          
          1. Der zoom-Hack funktioniert tatsächlich nur im IE7, im IE6 bleibt einem nur, den #Infoteil absolut zu positionieren.

            Gruß, LX

            --
            RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
            RFC 1925, Satz 11a: Siehe Regel 6a
            1. Hallo LX!

              Der zoom-Hack funktioniert tatsächlich nur im IE7,

              Seltsam, ich habe ein CSS-File mit eben diesen Hack für den 6er...:

              * html p.button {zoom: 1}

              Das wirft in der FF-Fehlerkonsole immer einen CSS-Fehler, weswegen ich - entgegen Gunnar und Cheatah - doch das ganze in einem CC packe.

              Viele Grüße aus Frankfurt/Main,
              Patrick

              --
              _ - jenseits vom delirium - _

                 Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
              J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
              1. Bonjour!

                Seltsam, ich habe ein CSS-File mit eben diesen Hack für den 6er...:

                * html p.button {zoom: 1}

                Das wirft in der FF-Fehlerkonsole immer einen CSS-Fehler, weswegen ich - entgegen Gunnar und Cheatah - doch das ganze in einem CC packe.

                Ich verwende zwar auch meistens* ein per CC eingebundenes Extra-Stylesheet für IE 6 und 7, aber in diesem Fall geht es auch valide. zoom:1 wirkt dadurch, daß es hasLayout triggert – das geht z.B. auch mit dem validen display:inline-block.

                Viele Grüße vom Længlich

                * Immer dann, wenn es viel oder invalide wird. Für ein oder zwei kleine Anpassungen lohnt sich ein Extra-CSS IMHO nicht.

                --
                Mein aktueller Gruß ist:
                Französisch
                1. Hallo Længlich!

                  aber in diesem Fall geht es auch valide. zoom:1 wirkt dadurch, daß es hasLayout triggert – das geht z.B. auch mit dem validen display:inline-block.

                  Mag alles sein, doch der FF schreibt bei jedem Aufruf einen Fehler in die Konsole. Und das ist für mich schon genauso ärgerlich wie ein roter Balken beim Valli!

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --
                  _ - jenseits vom delirium - _

                     Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                  J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
                  1. Ninsuk koontcun nalkoo'n!

                    aber in diesem Fall geht es auch valide. zoom:1 wirkt dadurch, daß es hasLayout triggert – das geht z.B. auch mit dem validen display:inline-block.

                    Mag alles sein, doch der FF schreibt bei jedem Aufruf einen Fehler in die Konsole. Und das ist für mich schon genauso ärgerlich wie ein roter Balken beim Valli!

                    Das ist IMHO sogar noch ärgerlicher, weil es mehr User mitkriegen. (Die Anzahl der User, die in die Konsole schauen, dürfte wohl höher sein als diejenige derer, die die Seite durch den Validator jagen.)
                    Aber Firefox kennt display:inline-block und meckert deswegen nicht. ;-)

                    Viele Grüße vom Længlich

                    --
                    Mein aktueller Gruß ist:
                    Sinkyone (California, USA)