Kalle1: Bildanzeige in Opera falsch

Guten Abend,
ich habe die untenstehenden (beispielhaften) Zeilen in meinem HTML-Dokument.
Das angesprochene Bild wird richtig angezeigt in

  • Internet Explorer
  • Mozilla Firefox
  • Netscape

aber verstümmelt in Opera.

Ich habe mir dann die Bildeigenschaften angeschaut. Danach ist die Bildgröße in den ersten drei Browsern wie im HTML-Dokument angegeben 45 X 40.
In Opera ist die Größe 100 X 100!
Hat mir jemand eine Erklärung?
Danke.

<tr>
<td width="48" height="42"><a name="z1" href="http://www........de" target="_top"><img border="0" src="bilder/urlaub.gif"
  alt="Urlaub" width="45" height="40"></a></td>
<td width="102" height="42"><a name="z2" href="http://www........de" target="_top"><font size="2">Urlaub</font></a> </td>
</tr>
<tr>
<td .....    </td>
<td .....    </td>
</tr>

  1. hallo,

    <img border="0" src="bilder/urlaub.gif"
      alt="Urlaub" width="45" height="40">

    ok, dein Bild ist 45 Turnschuhe breit und 40 Straußeneidurchmesser hoch. Da kein Browser damit was anzufangen weiß (außer dem IE, der dafür einfach Pixel nimmt), nehmen sie eben etwas, was ihnen als "default"-Größe erscheint.

    <font size="2">Urlaub</font>

    Dieses "font" willst du nicht angeben. Dafür wolltest du doch immer schon CSS nehmen, gelle?

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Hallo Christoph,

      <img border="0" src="bilder/urlaub.gif"
        alt="Urlaub" width="45" height="40">

      ok, dein Bild ist 45 Turnschuhe breit und 40 Straußeneidurchmesser hoch.

      Das bedeutet also, dass Turnschuhe und Straußeneier in deinem Universum jeweils ein Pixel breit und hoch sind. In http://de.selfhtml.org/html/grafiken/einbinden.htm#breite_hoehe@title=meinem ist das anders.

      Grüße
       Roland

      1. hallo Roland,

        Das bedeutet also, dass Turnschuhe und Straußeneier in deinem Universum jeweils ein Pixel breit und hoch sind.

        Exakt. Mein Universum ist minimalistisch orientiert. Alle Kleidungsstücke, die ich nicht täglich benutze (das trifft auf Turnschuhe und Straußeneier zu) erhalten Standardgrößen, um sie ordentlich im Schrsnk stapeln zu können.

        In http://de.selfhtml.org/html/grafiken/einbinden.htm#breite_hoehe@title=meinem ist das anders.

        Ich werde mich hüten, dein Universum zu stören ;-)

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. "Mit dem Attribut width geben Sie die Breite der Grafik an, und mit height die Höhe (width = Breite, height = Höhe). Notieren Sie die Maße ohne Einheiten, wird automatisch px für Pixel herangezogen."

          Demnach ist die Maßangabe korrekt.
          Was sollen dann, lieber Christoph, die Straußeneier u.a. ?
          Kann mir jemand eine seriöse Erklärung geben ?
          Danke.

          1. Moin!

            Demnach ist die Maßangabe korrekt.

            Ganz genau.

            Was sollen dann, lieber Christoph, die Straußeneier u.a. ?
            Kann mir jemand eine seriöse Erklärung geben ?

            Christoph rannte in die Irre und verwechselte HTML- und CSS-Größenangaben.

            - Sven Rautenberg

            --
            "Love your nation - respect the others."
            1. Hello out there!

              Christoph rannte in die Irre

              Na wenigstens irrte er nicht zu Rán.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  2. Ich lasse mal die Belehrung bezüglich Tables, altem HTML anstelel von schönem HTML, usw. weg.

    Ich kann es nicht erklären, ich habe Deinen Code mal als Datei gespeichert und mit Opera geöffnet. Und das Bild hat die gewünschte Größe in Opera. und das obwohl keien korrekte URI zu einem Bild führt, und ich aus Faulheit head, body, dtd etc weggelassen habe. Und als ich dann um Sicher zugegehen bead body usw. und eine korrekte URI zu einer Bilddatei hinzugefügt habe blieb es so, korrekt.

    Ist das exakt der selbe Code den du hier gepostet hast? Funktioniert nämlich wie er soll, soweit ich das sehe. Könnte mir vortellen das bei Deiner falschangezeigten HTML-Datei irgendwelche Anführungszeichen oder ähnliches fehlt.

    1. Ich lasse mal die Belehrung bezüglich Tables, altem HTML anstelel von schönem HTML, usw. weg.

      Für entsprechende Hinweise wäre ich dankbar (Einfache Beschreibung oder Utilities, die alt => neu konvertieren oder Utilities, die melden, wo was nicht mehr der Norm entspricht).

      Ich habe das Programm auf das Nötigste vereinfacht, ohne dass der Effekt verschwand.

      <!doctype html PUBLIC "-//IETF//DTD HTML//EN//3.0">
      <HTML>
      <HEAD>
      </HEAD>
      <BODY>
      <table>
      <tr>
        <td width="48" height="42">
        </td>
        <td width="102" height="42">
        </td>
      </tr>
      <tr>
        <td width="48" height="42">
           <a href="f_info.htm" target="_top"><img border="0" src="bild.gif" width="45" height="40"></a></font>
        </td>
        <td width="102" height="42">
           <a name="xxxxx" href="http://www.xxxxx.de" target="_top"><font size="2">Seite 1&nbsp;</font></a>
        </td>
      </tr>

      </table>
      </BODY>
      </HTML>

      Jetzt habe ich die Ursache gefunden -
      allerdings    n i c h t    den Grund, warum unterschiedliche
      Behandlung in den Browsern.
      Das Originalbild hat 100*100 Pixel und wird in den 3 Fällen auf die in HTML angegebene Größe 'zusammengestaucht', nicht aber so in Opera.

      Muss ich, damit das Programm in allen Browsern funktioniert ein Bild, das an unterschiedlichen Stellen in unterschiedlicher Größe angezeigt werden soll, dann tatsächlich x-Mal in der entsprechenden Größe erzeugen?

      1. Moin,

        <!doctype html PUBLIC "-//IETF//DTD HTML//EN//3.0">

        du bist sicher, dass du diesen antiquarischen, nie zum Standard gewordenen HTML-Dialekt verwenden willst? Und dass du das "Schlüsselwort" DOCTYPE wirklich klein schreiben möchtest? Und du bist dir außerdem sicher, dass die Attribute width und height für Bilder in HTML 3.0 gültig waren?

        <HEAD>
        </HEAD>

        Ich hoffe, das ist nur ein reduzierter Code-Auszug? Sonst fehlt hier nämlich das title-Element, das im head auftauchen *muss*.

        <tr>
          <td width="48" height="42">
          </td>
          <td width="102" height="42">
          </td>
        </tr>

        Eine komplett leere Tabellenzeile? Wirklich?

        <td width="48" height="42">
             <a href="f_info.htm" target="_top"><img border="0" src="bild.gif" width="45" height="40"></a></font>
          </td>

        Fehler: Du schließt ein font-Element, das nirgends geöffnet wurde.

        Muss ich, damit das Programm in allen Browsern funktioniert ein Bild, das an unterschiedlichen Stellen in unterschiedlicher Größe angezeigt werden soll, dann tatsächlich x-Mal in der entsprechenden Größe erzeugen?

        Das wäre natürlich die idiotensichere Variante. Zumal Grafikprogramme meistens bessere Skalierungsalgorithmen haben als die Rendering-Engines der Browser. Wenn ein Browser Grafiken skalieren muss, sieht das meistens scheußlich aus.

        So long,
         Martin

        --
        Die beste Informationsquelle sind Leute, die jemand anderem versprochen haben, nichts weiterzuerzählen.
          (alte Journalistenweisheit)
        1. Hello out there!

          du bist sicher, […] dass du das "Schlüsselwort" DOCTYPE wirklich klein schreiben möchtest?

          Möchte man vielleicht nicht tun, kann man aber. [http://www.validome.org/lang/ge/errors/DOCTYPE]

          Und du bist dir außerdem sicher, dass die Attribute width und height für Bilder in HTML 3.0 gültig waren?

          Ja. [http://www.w3.org/MarkUp/html3/html3.dtd]

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. Danke Gunnar,
            das baut mich wieder etwas auf.

        2. du bist sicher, dass du diesen antiquarischen, nie zum Standard gewordenen HTML-Dialekt verwenden willst? Und dass du das "Schlüsselwort" DOCTYPE wirklich klein schreiben möchtest? Und du bist dir außerdem sicher, dass die Attribute width und height für Bilder in HTML 3.0 gültig waren?

          Habe das Gerippe irgendwoher kopiert, vielleicht sogar aus Selfhtml, vielleicht auch von Frontpage generiert.

          Ich hoffe, das ist nur ein reduzierter Code-Auszug? Sonst fehlt hier nämlich das title-Element, das im head auftauchen *muss*.

          Wie schon geschrieben, handelte es sich um eine radikale Codereduzierung, aber ohne dass der Effekt verloren ging. Dabei kommt es natürlich vor, dass man das eine oder andere zuviel oder zuwenig löscht.

          Das wäre natürlich die idiotensichere Variante. Zumal Grafikprogramme meistens bessere Skalierungsalgorithmen haben als die Rendering-Engines der Browser. Wenn ein Browser Grafiken skalieren muss, sieht das meistens scheußlich aus.

          Vielleicht idiotensicher, aber auch aufwendig. Und wenn der Browser die Möglichkeit anbietet, warum sie nicht nutzen? Das scheußliche Aussehen ist ja wohl nur in Opera der Fall.

          Leider enthält Dein Beitrag zu viele Fragen. Mir wäre es lieber, auf meine Frage Antworten zu erhalten.
          Es bleibt nach wie vor die Frage, warum Opera sich so abweichend verhält.
          Gruß
          Kalle1

          1. Hello out there!

            Zumal Grafikprogramme meistens bessere Skalierungsalgorithmen haben als die Rendering-Engines der Browser. Wenn ein Browser Grafiken skalieren muss, sieht das meistens scheußlich aus.
            Vielleicht idiotensicher, aber auch aufwendig. Und wenn der Browser die Möglichkeit anbietet, warum sie nicht nutzen?

            Du willst, um dir etwas Aufwand zu ersparen, den Nutzern der Seite eine scheußlich Darstellung der Bilder zumuten?

            Bilder sollten i.a.R. in der Größe vorliegen, in der sie angezeigt werden sollen, und nicht vom Browser skaliert werden.

            Es bleibt nach wie vor die Frage, warum Opera sich so abweichend verhält.

            Kenne mich mit Opera nicht aus. Aber vielleicht gibt es die Einstellungsmöglichkeit, dass er width- und height-Angaben von Bildern ignoriert und Bilder immer in ihrer Originalgröße anzeigt?

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          2. Hallo Kalle1.

            Es bleibt nach wie vor die Frage, warum Opera sich so abweichend verhält.

            Inwiefern abweichend? Er skaliert die Grafik auf die von dir angegebene Dimension herunter, offenbart aber in den Eigenschaften der Grafik die tatsächlichen Dimensionsangaben.

            Wo siehst du hier ein Problem?

            Einen schönen Samstag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. Inwiefern abweichend? Er skaliert die Grafik auf die von dir angegebene Dimension herunter, offenbart aber in den Eigenschaften der Grafik die tatsächlichen Dimensionsangaben.

              Wo siehst du hier ein Problem?

              Das Problem liegt darin, dass bei Opera das Bild nicht mehr erkennbar ist, wohl aber bei den andern.
              Wozu die Möglichkeit der Size-Angabe, wenn sie zu solchen Ergebnissen führt ?

              1. Hallo Kalle.

                Das Problem liegt darin, dass bei Opera das Bild nicht mehr erkennbar ist, wohl aber bei den andern.

                Kann ich nicht nachvollziehen. Die Grafik ist, obgleich erwartungsgemäß verzerrt, noch immer erkennbar.

                Wozu die Möglichkeit der Size-Angabe, wenn sie zu solchen Ergebnissen führt ?

                Um bereits beim Laden eines Dokumentes den Platz für die zu ladenden Grafiken reservieren zu können, so dass die Inhalte nicht durch die Gegend springen.

                Einen schönen Sonntag noch.

                Gruß, Ashura

                --
                sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                [HTML Design Constraints: Logical Markup]
                1. Hallo Ashura

                  Kann ich nicht nachvollziehen. Die Grafik ist, obgleich erwartungsgemäß verzerrt, noch immer erkennbar.

                  Meine Grafik leider überhaupt nicht!
                  Gruß Kalle

                  1. Hallo Kalle.

                    Kann ich nicht nachvollziehen. Die Grafik ist, obgleich erwartungsgemäß verzerrt, noch immer erkennbar.
                    Meine Grafik leider überhaupt nicht!

                    Dann bleibt nur eine Möglichkeit: lade Beispieldokument und Grafik hoch und stelle hier einen Link dahin zur Verfügung. Andernfalls kann dir hier niemand weiterhelfen.

                    Einen schönen Sonntag noch.

                    Gruß, Ashura

                    --
                    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                    [HTML Design Constraints: Logical Markup]
                    1. Hallo Ashura,

                      Problem ist gelöst.
                      Das Bild war im GIF-Format und ich habe es jetzt in JPG umgewandelt.  Damit funktioniert es.
                      Ja, mir war als absoluter Anfänger nicht bewußt, dass es da Unterschiede in der Behandlung (nur bei Opera) gibt!

                      Dank nochmals
                      Gruß
                      Kalle1

                      1. Hello out there!

                        Das Bild war im GIF-Format und ich habe es jetzt in JPG umgewandelt.

                        Dann ist JPEG (mit 'E'!) bestimmt nicht das richtige Format für diese Art Grafik. [GIF-JPEG]

                        Wandel mal in PNG um und schau, ob es damit funktioniert.

                        See ya up the road,
                        Gunnar

                        --
                        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                        1. Dann ist JPEG (mit 'E'!) bestimmt nicht das richtige Format für diese Art Grafik.

                          Das verstehe ich jetzt nicht. Mit dem Format jpg (als Suffix) also bild.jpg hat es doch jetzt funktioniert, warum noch ein anderes Format?

                          1. Hello out there!

                            Das verstehe ich jetzt nicht. Mit dem Format jpg (als Suffix) also bild.jpg hat es doch jetzt funktioniert, warum noch ein anderes Format?

                            Das verstehe ich jetzt nicht. Du hast doch den verlinkten Artikel gelesen? Was bliebt unklar, welches Grafikformat für welche Art Grafik geeignet ist?

                            See ya up the road,
                            Gunnar

                            PS: Und natürlich das GIF in PNG umwandeln, nicht das JPEG.

                            --
                            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                            1. Hallo,

                              Das verstehe ich jetzt nicht. Du hast doch den verlinkten Artikel gelesen? Was bliebt unklar, welches Grafikformat für welche Art Grafik geeignet ist?

                              Habe ich gelesen, aber auch:

                              "GIF und JPEG sind - trotz neuerer Formate wie PNG oder auch SVG - nach wie vor die verbreitetsten und üblichen Formate für Grafiken auf Webseiten."

                              PS: Und natürlich das GIF in PNG umwandeln, nicht das JPEG.

                              Wenn ich das mache, macht dann nicht vielleicht irgendein Browser "xyz" Probleme?
                              Da möchte ich doch lieber als rel. Anfänger nicht auch noch Lehrgeld bezahlen.
                              Schönen Abend noch.

                              1. Hello out there!

                                Wenn ich das mache, macht dann nicht vielleicht irgendein Browser "xyz" Probleme?

                                Mit PNG sollten alle heute im Einsatz befindlichen Browser klarkommen.

                                Die Frage ist, macht Opera bei PNG die selben Probleme wie bei GIF?

                                See ya up the road,
                                Gunnar

                                --
                                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                                1. Die Frage ist, macht Opera bei PNG die selben Probleme wie bei GIF?

                                  Opera funktioniert mit png wie mit jpeg - also OK!
                                  Gruß
                                  Kalle1

                                  1. Opera funktioniert mit png wie mit jpeg - also OK!

                                    Allerdings ist jetzt die Transparenz weg!

                                    Kennt jemand ein Freeware-Grafikprogramm, mit dem ich png-Dateien bearbeiten kann und die Transparenz wiederherstellen kann?
                                    Gruß
                                    Kalle1

                                    1. Hello out there!

                                      Allerdings ist jetzt die Transparenz weg!

                                      Jetzt? Bei JPEG gibt es keine Transparenz. Bei PNG schon.

                                      Womit hast du das GIF in PNG umgewandelt?

                                      Kennt jemand ein Freeware-Grafikprogramm, mit dem ich png-Dateien bearbeiten kann und die Transparenz wiederherstellen kann?

                                      GIMP.

                                      See ya up the road,
                                      Gunnar

                                      --
                                      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                                      1. Hi

                                        Womit hast du das GIF in PNG umgewandelt?

                                        Paint

                                        Habe aber jetzt Gimp installiert und das Bild damit konvertiert.
                                        Es funktioniert jetzt in allen vier Browsern
                                        IE, Netscape, Opera, Firefox.
                                        Ist es sinnvoll weitere Browser in den Test einzubeziehen oder sind die vier die gebräuchlichsten ?
                                        Gruß
                                        Kalle1

                                        1. Hallo Kalle1.

                                          Es funktioniert jetzt in allen vier Browsern
                                          IE, Netscape, Opera, Firefox.
                                          Ist es sinnvoll weitere Browser in den Test einzubeziehen oder sind die vier die gebräuchlichsten ?

                                          Falls du mit Netscape nicht eine Version < 7 meinst, kannst du dir diesen Test sparen, da Netscape die selbe Rendering-Engine wie Firefox verwendet.

                                          In jedem Fall solltest du aber noch versuchen, im Konqueror und/oder Safari zu testen.

                                          Einen schönen Montag noch.

                                          Gruß, Ashura

                                          --
                                          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                                          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                                          [HTML Design Constraints: Logical Markup]
                                          1. Hallo

                                            In jedem Fall solltest du aber noch versuchen, im Konqueror und/oder Safari zu testen.

                                            Wenn ich es richtig sehe, kann ich diese Browser nicht unter meinem Windows testen?

                                            Gruß Kalle1

                                            1. Hallo Kalle1.

                                              In jedem Fall solltest du aber noch versuchen, im Konqueror und/oder Safari zu testen.
                                              Wenn ich es richtig sehe, kann ich diese Browser nicht unter meinem Windows testen?

                                              Nicht ohne weiteres, richtig.

                                              Möglichkeiten bestehen aber in Form von GNU/Linux-LiveCDs (z. B. Knoppix), Emulatoren wie QEMU und KDE on Cygwin.

                                              Interessant wäre natürlich eine auf die allernötigsten Bibliotheken und sonstige Binaries heruntergeschrumpfte Version der Cygwin-Version, aber so etwas gibt es meines Wissens momentan nicht.

                                              Einen schönen Montag noch.

                                              Gruß, Ashura

                                              --
                                              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                                              „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                                              [HTML Design Constraints: Logical Markup]
                                              1. Hallo Ashura

                                                Möglichkeiten bestehen aber in Form von GNU/Linux-LiveCDs (z. B. Knoppix), Emulatoren wie QEMU und KDE on Cygwin.

                                                Das alles ist mir noch zu 'hoch'. Ich muss erst mal mit HTML, Javascript und Perl zurechtkommen, bevor ich mich an diese Dinge heranwage.
                                                Vielen Dank für die Unterstützung
                                                Kalle1

                                                1. Hallo Kalle1.

                                                  Möglichkeiten bestehen aber in Form von GNU/Linux-LiveCDs (z. B. Knoppix), Emulatoren wie QEMU und KDE on Cygwin.

                                                  Das alles ist mir noch zu 'hoch'. Ich muss erst mal mit HTML, Javascript und Perl zurechtkommen, bevor ich mich an diese Dinge heranwage.

                                                  Kann ich verstehen (und insbesondere, dass du dich an Perl versuchst, achte ich sehr), aber eine LiveCD in deinen Computer einzulegen, davon zu booten und dann einfach das Konqueror-Icon anzuklicken, ist nicht sonderlich schwierig.

                                                  Der Rest ist wie bei jedem anderen Browser auch.

                                                  Einen schönen Montag noch.

                                                  Gruß, Ashura

                                                  --
                                                  sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                                                  „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                                                  [HTML Design Constraints: Logical Markup]
                                    2. Hallo Kalle1.

                                      Kennt jemand ein Freeware-Grafikprogramm, mit dem ich png-Dateien bearbeiten kann und die Transparenz wiederherstellen kann?

                                      Mit welchem Programm hast du denn die PNG erstellt?

                                      Mit dem GIMP kann dir so etwas jedenfalls nicht passieren.

                                      Einen schönen Sonntag noch.

                                      Gruß, Ashura

                                      --
                                      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                                      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                                      [HTML Design Constraints: Logical Markup]