Tilman Dralle: Internet Explorer und seine Tücken

Hallo!
Meine Homepage basiert auf dem Design von Jeena Paradies, das ja auf selfhtml.org zu finden ist. Das Umschreiben der Homepage funktionierte perfekt, auch der Internet Explorer hat bis auf eins immer angezeigt. Allerdings tritt leider folgendes Problem auf: "http://www.galerie-e-werner.de/aquarelle.htm" Wenn ihr euch diese Seite anschaut, seht ihr, dass zwischen der Überschrift "Aquarelle" und der Tabelle zwar im Quellcode nichts steht, der Internet Explorer (nicht Firefox) aber einen großen Abstand, der ziemlich hässlich aussieht, anzeigt. Ich  habe keine Ahnung, was der Auslöser sein könnte. Das gleiche Problem tritt bei den anderen Seiten (Öl, Zeichnungen, Mischtechnik) auch auf,  bei den reinen Textseiten wie z.B. bei http://www.galerie-e-werner.de/kontakt_bilder.htm nicht. Auch bei den  Objekten (die wie die "Problem-Seiten" eine Überschrift und eine Tabelle hat) tritt das Problem merkwürdigerweise nicht auf (http://www.galerie-e-werner.de/objekte.htm)
Kann mir jemand helfen??
Gruß und Vielen Dank im Voraus
Tilman Dralle

  1. Lieber Tilman,

    ich glaube Du hast da etwas nicht verstanden!

    Oder wie erklärst Du solche Schnitzer, wie

    <table border=0 width=100%>  
    <tr align="center">  
    <td width="125px">
    

    Solcher Unsinn war sicherlich nicht in Jeenas Vorlage zu finden!

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo!
      Danke für den Hinweis. Ich weiß zwar nicht, warum der Code falsch ist (zugegeben: ich bin ein schlechter HTML-Coder), aber der Tipp war richtig, denn wenn ich border=0 width=100% wegnehme, ist der Abstand zumindest weg.
      Gruß
      Tilman

    2. <table border="1" width="60%">
        <tr>
          <td width="50%" height="100">Berlin</td>
          <td>Hamburg</td>
          <td>M&uuml;nchen</td>
        </tr>
        <tr>
          <td>Milj&ouml;h</td>
          <td>Kiez</td>
          <td>Bierdampf</td>
        </tr>
        <tr>
          <td>Buletten</td>
          <td>Frikadellen</td>
          <td>Fleischpflanzerl</td>
        </tr>
      </table>

      Das ist ein selfhml.org Beispiel. Warum kann man dann bei <table> statt width="60%" nicht auch width="100%" schreiben? Das verursacht bei mir auf jeden Fall den hässlichen Abstand.
      Gruß
      Tilman

      1. Wenn ich statt <table width="100%"> <table width="99%"> schreibe, geht alles.
        Das war's anscheinend.
        Tilman

        1. Liebe(r) Tilman,

          Jeenas Vorlage basiert auf rein semantischem HTML-Code (also keine HTML-Geschichten, die das AUSSEHEN betreffen) und CSS für die Gestaltung (also alles was das Aussehen betrifft NUR MIT CSS). Du hast diese strenge Trennung von Inhalt und seiner Darstellung nicht beibehalten. Nun siehe zu, dass Du das wieder herstellst. Dabei kann Dir das SelfHTML-Kapitel zu CSS-basierten Layouts helfen.

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.

          1. Hi,
            ich hab versucht die Trennung wieder herzustellen und ich hoffe es ist mir gelungen. Keine Tabellen mehr im Layout drin, und alle sonstigen Formatierungen sollten auch über die CSS-Datei laufen.
            Gruß
            Tilman

  2. Hallo Tilman,

    Allerdings tritt leider folgendes Problem auf: http://www.galerie-e-werner.de/aquarelle.htm Wenn ihr euch diese Seite anschaut, seht ihr, dass zwischen der Überschrift "Aquarelle" und der Tabelle zwar im Quellcode nichts steht, der Internet Explorer (nicht Firefox) aber einen großen Abstand, der ziemlich hässlich aussieht, anzeigt.

    Du hast dort definitiv einen Fehler in Deinem Code: Du öffnest ein <p>, der die Tabelle enthält. <p> darf aber kein Blockelement wie z.B. <table> enthalten, siehe http://www.w3.org/TR/html401/struct/text.html#edef-P. Vielleicht wars das schon. Selten, aber nicht nie, ist der IE ungnädiger als andere Browser.

    Sagen wir so, Du solltest zuerst Deine Fehler bereinigen, nutze einen Validator. Es sind noch ein paar mehr.

    Freundliche Grüße

    Vinzenz

    1. Hallo!
      Ok, ich wußte tatsächlich nicht, dass ich keine Tabelle im <p>-Tag haben darf. Jetzt muss ich mir überlegen, wie ich die Bilder trotzdem in Tabellenform darstellen kann, aber zumindest ist das Problem behoben.
      Danke für den Validator-Tipp. Ich glaube tatsächlich, dass mein Code eine Überprüfung dringend nötig hat.
      Gruß
      Tilman

    2. PS: Was schlägst du vor soll ich verwenden, um die Bilder inmitten des <p>-Tags zu ordnen?
      Tilman

      1. Hi,

        PS: Was schlägst du vor soll ich verwenden, um die Bilder inmitten des <p>-Tags zu ordnen?

        wieso ordnen? Ich sehe weder eine bestimmte Reihenfolge noch eine erforderliche Aufteilung in Zeilen und Spalten. Du brauchst hierzu überhaupt keine weiteren Elemente, wie Du in dieser Galerie siehst. Lediglich die Abstände sollten über CSS ansprechend definiert werden, wobei es hilfreich ist, den Bildern gleiche Höhen zu geben.

        freundliche Grüße
        Ingo

        1. Hallo,
          Danke für den Tipp. Ich habe mir angeschaut, wie du das mit CSS umgesetzt hast und habe es übernommen. Allerdings finde ich, dass es bei mir mit Tabellen besser aussah. Bei dir ergänzen sich die Bilder ganz gut; bei mir divergieren die Zeilen-Längen aber ziemlich. Das sieht leider ein bißchen unschön aus; dafür kann ich jetzt aber sagen, dass mein Code sauber ist.
          Gruß
          Tilman

          1. Hi,

            Allerdings finde ich, dass es bei mir mit Tabellen besser aussah. Bei dir ergänzen sich die Bilder ganz gut; bei mir divergieren die Zeilen-Längen aber ziemlich.

            Ist Dir nicht aufgefallen, woran das liegt?
            Verwende für Deine Thumbnails einfach Bilder gleicher Höhe.

            freundliche Grüße
            Ingo

    3. Halloo,
      Ich kann jetzt ganz feierlich verkünden, dass alle meine Seiten valid sind. Außer die Startseite, in der der blöde Counter-Code eingebunden ist (webcounters.de), der leider nicht die XHTML Strict Bedingungen erfüllt.
      Gruß
      Tilman