Twilo: Internet Explorer 6: float Problem

Hallo,

ich hab mal ein paar fragen zwecks CSS :-)

Internet Explorer 6 Problem
http://www.twilo.de/version/version1.htm
der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.

beim testen fand ich heraus, dass wen ich das Bild herausnehme und stattdessen Text mache...
http://www.twilo.de/version/version2.htm
das die rechte Spalte in Höhe der 2. Zeile vom linken div anfängt

woran könnte das liegen?
oder ist das ein bekannter Bug?

Internet Explorer 5 Problem
http://www.twilo.de/version/screenshot.png
der Internet Explorer 5 ignoriert bei mir irgendwie die padding-top Angabe, da wo die 2 schwarzen Rahmen sind

kann man vom Code her das ganze noch optimieren?
wäre das, so wie es zur Zeit ist, relativ Barrierefrei?

mfg
Twilo

  1. Hallo,

    ich hab mal ein paar fragen zwecks CSS :-)

    Internet Explorer 6 Problem
    http://www.twilo.de/version/version1.htm
    der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.

    Das da:
    <div id="bildContainer1">
      <div id="bildContainer2">
        <div id="bildContainer3">
          <div id="bild"><img src="/version/motiv.gif" alt="" /></div>
          <div id="rahmen">
            <div id="text">
               ...
            </div>
          </div>
          <p>Hier kann noch etwas Text stehen.</p>
        </div>
      </div>
    </div>

    ist _irre_. Ev. reicht ein #text { float:right; }.
    Aber versuche bitte das ganze zu vereinafachen!

    Grüße
    Thomas

    1. Hallo,

      ich hab mal ein paar fragen zwecks CSS :-)

      Internet Explorer 6 Problem
      http://www.twilo.de/version/version1.htm
      der Internet Explorer 6 fängt mit den rechten div etwas zu tief an.

      Das da:
      <div id="bildContainer1">
        <div id="bildContainer2">
          <div id="bildContainer3">
            <div id="bild"><img src="/version/motiv.gif" alt="" /></div>
            <div id="rahmen">
              <div id="text">
                 ...
              </div>
            </div>
            <p>Hier kann noch etwas Text stehen.</p>
          </div>
        </div>
      </div>

      ist _irre_. Ev. reicht ein #text { float:right; }.

      dann hab ich das Problem, dass er mir das nicht rechts floatet, das hatte ich schon probiert
      neue Version
      neue CSS-Datei

      Aber versuche bitte das ganze zu vereinafachen!

      wie kann ich das denn vereinfachen?
      der Rahmen soll abewr so aussehen
      mir fällt da nix passendes ein

      mfg
      Twilo

    2. Hallo,

      Das da:
      <div id="bildContainer1">
        <div id="bildContainer2">
          <div id="bildContainer3">
            <div id="bild"><img src="/version/motiv.gif" alt="" /></div>
            <div id="rahmen">
              <div id="text">
                 ...
              </div>
            </div>
            <p>Hier kann noch etwas Text stehen.</p>
          </div>
        </div>
      </div>

      Aber versuche bitte das ganze zu vereinafachen!

      ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?

      mfg
      Twilo

      1. Hallo,

        Aber versuche bitte das ganze zu vereinafachen!

        ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?

        Nimm einen Tabelle. Im ernst.

        Grüße
        Thomas

        1. Hallo,

          Aber versuche bitte das ganze zu vereinafachen!

          ich bekomm das nicht vereinfacht, kann mir jemand ein Tipp geben, wie man das vereinfachen könnte?

          Nimm einen Tabelle. Im ernst.

          das bringt mich auch nicht viel weiter ;-)

          wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code

          denn der Rahmen soll ungefähr so aussehen :-)

          mfg
          Twilo

          1. Hallo,

            Nimm einen Tabelle. Im ernst.

            das bringt mich auch nicht viel weiter ;-)

            wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code

            denn der Rahmen soll ungefähr so aussehen :-)

            Oh menno!

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
            <head>
            <title>Version 2</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <style type="text/css">
              body {
               background-color:#999999;
               margin:20px;
              }
              #Container {
               width:29.2em;
               background-color:#FFFFFF;
               padding:0.4em;
              }
              #RahmenContainer {
               border:0.4em solid #000000;
               padding:0.2em;
              }
              #tableContainer {
               border:0.2em solid #000000;
               border-collapse:collapse;
               width:28em;
              }
              #bild img {
               width: 10em;
               /*height:200px;*/
               border:0px;
               display:block;
              }
              p {
               margin:0px;
               padding:0px;
              }
              .name {
               font-size:1.5em;
               text-align:center;
               margin:1em 0;
              }
              .datum {
               font-size:0.5em;
               text-align:center;
              }
              .angehoerige {
               margin:0.5em 3em;
              }
              .spruch {
               margin: 0em 1.5em;
              }
            </style>
            </head>
            <body>
            <div id="Container">
             <div id="RahmenContainer">
              <table id="tableContainer" cellpadding="0" cellspacing="0" border="0">
               <tr>
                <td id="bild" valign="top">
                  <img src="/version/motiv.gif" alt="" />
                </td>
                <td id="text">
                 <p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
                 <p class="name">Vorname Nachname<br />
                  <span class="datum">* 31.12.2004&nbsp;&nbsp;&#8224; 01.01.2005</span>
                 </p>
                 <p class="angehoerige">In Liebe und Dankbarkeit<br />
                  <strong>Person1<br />
                  Person2<br />
                  Person3</strong>
                 </p>
                </td>
               </tr>
               <tr>
               <td colspan="2">
                <p>Hier kann noch etwas Text stehen.</p>
               </td>
               </tr>
              </table>
             </div>
            </div>
            </body>
            </html>

            Grüße
            Thomas

            1. Hallo,

              Nimm einen Tabelle. Im ernst.

              das bringt mich auch nicht viel weiter ;-)

              wenn ich Tabellen nehmen würde, müsste ich die Tabellen auch verschachteln, dadurch entsteht sogar noch mehr Code

              denn der Rahmen soll ungefähr so aussehen :-)

              Oh menno!

              wie soll ich das verstehen? *g*

              <div id="Container">
              <div id="RahmenContainer">
                <table id="tableContainer" cellpadding="0" cellspacing="0" border="0">
                 <tr>
                  <td id="bild" valign="top">
                    <img src="/version/motiv.gif" alt="" />
                  </td>
                  <td id="text">
                   <p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
                   <p class="name">Vorname Nachname<br />
                    <span class="datum">* 31.12.2004&nbsp;&nbsp;&#8224; 01.01.2005</span>
                   </p>
                   <p class="angehoerige">In Liebe und Dankbarkeit<br />
                    <strong>Person1<br />
                    Person2<br />
                    Person3</strong>
                   </p>
                  </td>
                 </tr>
                 <tr>
                 <td colspan="2">
                  <p>Hier kann noch etwas Text stehen.</p>
                 </td>
                 </tr>
                </table>
              </div>
              </div>

              das soll weniger sein als

              <div id="bildContainer1">
                <div id="bildContainer2">
                  <div id="bildContainer3">
                    <div id="bild"><img src="/version/motiv.gif" alt="" /></div>
                    <div id="rahmen">
                      <div id="text">
                        <p class="spruch">Die Erinnerung ist das einzige Paradies, woraus wir nicht vertrieben werden können.</p>
                        <p class="name">Vorname Nachname<br />
                          <span class="datum">* 31.12.2004&nbsp;&nbsp;&#8224; 01.01.2005</span></p>
                        <p class="angehoerige">In Liebe und Dankbarkeit<br />
                          <strong>Person1<br />
                          Person2<br />
                          Person3</strong></p>
                      </div>
                    </div>
                    <p>Hier kann noch etwas Text stehen.</p>
                  </div>
                </div>
              </div>

              ? ;-)

              denn du schriebst ja

              Aber versuche bitte das ganze zu vereinafachen!

              ps. wie war eigentlich dein

              ist _irre_.

              gemeint?

              ps. den Fehler konnte ich beseitigen
              das IE 6 Problem lag am "vertical-align" bei "#bild"
              IE 6 Problem ist hier behoben

              das IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht

              mfg
              Twilo

              1. Hallo,

                Oh menno!

                wie soll ich das verstehen? *g*

                Wie möchtest du es verstehen? ;-)

                denn du schriebst ja

                Aber versuche bitte das ganze zu vereinafachen!

                Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)

                ps. den Fehler konnte ich beseitigen
                das IE 6 Problem lag am "vertical-align" bei "#bild"
                IE 6 Problem ist hier behoben

                das IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht

                Genau das habe ich gemeint mit vereinfachen. ;-)
                Du machst super verrenkungen (die 3px Kommentar in deinem CSS z.B.) um den IE5, dann den IE6 etc zu bedienen. Den Code den ich dir zeigte kommt mit einem Drittel der CSS aus die du sonst brauchst und braucht keine Hacks für irgendwelche Browser.
                Ich denke, das kann man als vereinfachen betrachten? ;-)

                Grüße
                Thomas

                1. Hallo,

                  Oh menno!

                  wie soll ich das verstehen? *g*

                  Wie möchtest du es verstehen? ;-)

                  z.B.
                  och Menno, der Twilo hat Recht
                  och Menno, ich (Thomas J.S) hab mal wieder kein Recht
                  och Menno, ich (Thomas J.S) hab mal wieder alles falsch gemacht
                  och Menno, ich (Thomas J.S) erzähl mal wieder nur Mist
                  och Menno, ich (Thomas J.S) ...

                  da fällt mir noch mehr ein :-P

                  denn du schriebst ja

                  Aber versuche bitte das ganze zu vereinafachen!

                  Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)

                  dafür kann man dein nicht mehr anpassen ;)

                  z.B.
                  kann man es nicht so einfach anpassen wie bei
                  hier :-)
                  Version 4 hat noch ein Fehler :-/

                  ps. den Fehler konnte ich beseitigen
                  das IE 6 Problem lag am "vertical-align" bei "#bild"
                  IE 6 Problem ist hier behoben

                  das IE 5 Problem lag daran, weil der IE5 für #bildContainer2 und #bildContainer3 eine Höhe von 1px braucht

                  Genau das habe ich gemeint mit vereinfachen. ;-)
                  Du machst super verrenkungen (die 3px Kommentar in deinem CSS z.B.) um den IE5, dann den IE6 etc zu bedienen. Den Code den ich dir zeigte kommt mit einem Drittel der CSS aus die du sonst brauchst und braucht keine Hacks für irgendwelche Browser.
                  Ich denke, das kann man als vereinfachen betrachten? ;-)

                  dann muss ich aber für die anderen Versionen extra Dateien erstellen
                  ich bleib bei der CSS-Variante *g*
                  die gefällt mir besser ;)

                  mfg
                  Twilo

                  1. Hallo,

                    z.B.
                    och Menno, der Twilo hat Recht
                    och Menno, ich (Thomas J.S) hab mal wieder kein Recht
                    och Menno, ich (Thomas J.S) hab mal wieder alles falsch gemacht
                    och Menno, ich (Thomas J.S) erzähl mal wieder nur Mist
                    och Menno, ich (Thomas J.S) ...

                    Du heisst Thomas J.S.!?! Das ist aber nett! ;-)

                    da fällt mir noch mehr ein :-P

                    Sprich weiter! ;-)

                    Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)

                    dafür kann man dein nicht mehr anpassen ;)

                    Also was du innerhalb der Tabelle machst ist relativ egal:
                    Version 1: ist schon gegeben,
                    Version 2: braucht du nur eine Zelle
                    Version 3: ebenfalls
                    Version 4: braucht 2 Zellen

                    dann muss ich aber für die anderen Versionen extra Dateien erstellen
                    ich bleib bei der CSS-Variante *g*
                    die gefällt mir besser ;)

                    Du hast auch jetzt 4 Dateien. Wo ist da der Unterschied?
                    Bzw. du hättest sagen könnne, dass du nur experimetierts und das ganze nicht wirklich brauchst ;-)

                    Grüße
                    Thomas

                    1. Hallo,

                      Ja ;-) Du brauchst 5 ineinander verschtelte divs ich zwei und eine Tabelle (mit ledigich drei Zellen). ;-)

                      dafür kann man dein nicht mehr anpassen ;)

                      Also was du innerhalb der Tabelle machst ist relativ egal:
                      Version 1: ist schon gegeben,
                      Version 2: braucht du nur eine Zelle
                      Version 3: ebenfalls
                      Version 4: braucht 2 Zellen

                      jo, bei dir muss man die Tabellen ändern
                      ps. wo sind das denn eigentlich Tabellarische Daten? :)

                      dann muss ich aber für die anderen Versionen extra Dateien erstellen
                      ich bleib bei der CSS-Variante *g*
                      die gefällt mir besser ;)

                      Du hast auch jetzt 4 Dateien. Wo ist da der Unterschied?
                      Bzw. du hättest sagen könnne, dass du nur experimetierts und das ganze nicht wirklich brauchst ;-)

                      zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)

                      wobei 4 noch nicht so will, wie ich das gerne hätte :-/

                      mfg
                      Twilo

                      1. Hallo Twilo,

                        jo, bei dir muss man die Tabellen ändern
                        ps. wo sind das denn eigentlich Tabellarische Daten? :)

                        wie gesagt, wenn ich gewusst hätte dass du nur ein wenig experimetierst ...

                        zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)

                        Ich sehe da für die Praxis überhapt keinen Vorteil darin. Auch wenn du dann verschiede Styles per <link> zur Verfügung stellt. Nicht alle Browser unterstützen das, vor allem nicht der IE, also kommt dann der Ehrgeitz es doch für "alle" Browser zugänglich zu machen und du stehst wieder am Afang. (Oder du hast doch 4 CSS-Dateien und wechselst diese per JavaScript aus. Dann mach es wiederum keinen Unterschied ob es nun 4 CSS- oder 4 HTML-Dateien sind)

                        Du hattest eine konkte Anforderung "diese Seite sollte im IE 5 und 6 und Firefox gleich aussehen". Ich lieferte eine Lösung, dass sie nicht das war was du dir vorgestellt hat, tut mir Leid.

                        Grüße
                        Thomas

                        1. Hallo,

                          jo, bei dir muss man die Tabellen ändern
                          ps. wo sind das denn eigentlich Tabellarische Daten? :)

                          wie gesagt, wenn ich gewusst hätte dass du nur ein wenig experimetierst ...

                          experimetieren kann man das nicht nennen, dass fliesst nachher so im Projekt ein, nur jetzt teste ich, wie ich das am besten mache :)

                          zur Zeit ja, nur nachher wird es nur per CSS geregelt.. also nix mehr am Quellcode rumpfuschen :)

                          Ich sehe da für die Praxis überhapt keinen Vorteil darin. Auch wenn du dann verschiede Styles per <link> zur Verfügung stellt. Nicht alle Browser unterstützen das, vor allem nicht der IE, also kommt dann der Ehrgeitz es doch für "alle" Browser zugänglich zu machen und du stehst wieder am Afang. (Oder du hast doch 4 CSS-Dateien und wechselst diese per JavaScript aus. Dann mach es wiederum keinen Unterschied ob es nun 4 CSS- oder 4 HTML-Dateien sind)

                          das entsprechende CSS-File wird nachher per PHP eingeflegt

                          Du hattest eine konkte Anforderung "diese Seite sollte im IE 5 und 6 und Firefox gleich aussehen". Ich lieferte eine Lösung, dass sie nicht das war was du dir vorgestellt hat, tut mir Leid.

                          hätte ich es nicht per CSS hinbekommen, hätte ich deine Variante genommen ;)
                          trotzdem thx noch einmal :)

                          mfg
                          Twilo