ff 1.5 - "align=middle" bei geringer höhe falsche

  • hallo,

    ich habe von 1.07 auf 1.50 upgedatet und war über die darstellung meiner webseite doch etwas erstaunt, anscheinend rendert die neue version anders (die höhe der gesamten seite entspricht jetzt mehr der darstellung im internet explorter).

    aber:

    "align=middle" funktioniert bei grafiken KLEINER HÖHE nicht korrekt im zusammenhang mit text.

    in den folgenden beispielen fehlt die referenzierte grafik (ich habe das beispiel aus selfhtml - mit vorhandener grafik ist das ergebnis qualitativ das gleiche wie beschrieben). der browser stellt ein leeres rechteck dar.


    bei grafiken "großer höhe" ist die anzeige korrekt (in der vertikalen mitte bezüglich des textes):

    p>Denkt der Denker
    <img src="denker.gif" width="70" height="137" align="middle" alt="Denker">
    an die Mitte?</p>

    bei grafiken "geringer höhe" ist die grafik so angeordnet, dass ihre mitte mit der "baseline" des textes identisch ist. im folgenden beispiel wurde gegenüber oben nur die höhe von 137 auf 13 geändert (z.b. um eine minigrafik vor einem text anzuzeigen:

    p>Denkt der Denker
    <img src="denker.gif" width="70" height="13" align="middle" alt="Denker">
    an die Mitte?</p>

    in ff 1.07, in nvu (mit dem ich meine seiten erstelle) und im ie werden die kleinen grafiken "korrekt" angezeigt. - oder habe ich bisher etwas falsch gemacht?

    auf http://www.ing-rb.de/ seht ihr, was ich meine. mit ff 1.50 sind die auswahdreiecke alle hässlich nach unten gerutscht. bisher waren sie auf der höhe des textes.

    weiß jemand abhilfe - oder habe ich bisher etwas falsch gemacht?

    das ganze ist besonders extrem, wenn der text relativ klein ist!

    grüße, z8400

  • Ich habe leider das gleiche Problem mit der 1.5. Ich hatte da gestern Abend auch eine sehr lange Schock-Sekunde, denn ich empfehle meinen Kunden fuer mein Redaktionssystem FireFox in der neuesten Version zu nutzen und jetzt habe ich in allen Installationen diesen Darstellungsfehler.

    Auf der anderen Seite ist das Alignment in img-Tags eh deprecated und sollte in sofern auch nicht mehr eingesetzt werden.

    Um das Alignment HTML-konform und cross-Browser kompatibel wieder an den Start zubekommen, habe ich folgendes gemacht:

    - die (kleinen) Images an denen das Alignment erfolgen soll auf die Hoehe der auszurichtenden Schrift gebracht (css: line-height)
    - in den img-Tags align="middle" gegen style="vertical-align: middle;" getauscht


    Abhilfe schaffen wuerde statt 'middle' den Wert 'absmiddle' zu verwenden, was allerdings auch nicht zu empfehlen ist, da kein HTML-Standard und somit ab in die Tonne.

    Wer sich das Online anschauen moechte kann das auf http://www.livegigs.de tun.
    (Ich hoffe mich erschlaegt keiner, wenn ich hier bei meinem ersten Posting einen externen Link setze ...)

    Sollte jemand eine einfachere Loesung gefunden haben, waere ich dankbar, denn ich muss mich noch durch einige Installationen wuehlen ...

    Gruesse
    Rolf

  • Gibt es einen Weg, mein HTML zu korrigieren, oder komme ich an Styles nicht vorbei? (Bis jetzt habe ich noch nicht mit Styles gearbeitet, sondern nur amateurhaft mit Nvu rumgefrickelt.)

  • Wenn du nur amateurhaft in NVU rumfrickelst solltest du nicht davon ausgehen, dass deine Seiten wirklich funktionieren. Wobei NVU noch ne gute Qualität hat. Wenn ich da an Frontpage denke...

    ansonsen sehe ich das problem nicht. Kannst du nicht style="vertical-align:middle;" angeben?

  • @ JonHa:

    Eigentlich sollte ich alles weitere im Nvu-Forum erörtern, aber da ich mich hier nun schonmal als DAU geoutet habe und mein Ruf schon prima ruiniert ist, erlaube ich mir noch eine weitere dumme Frage. Ich erbitte euer aller Toleranz ;)

    Ich habe Nvu bisher fast nur als WYSIWYG-Editor benutzt - wie gesagt: "amateurhaft" und ohne nennenswerte Eingriffe in den Quelltext. Aber bis zum FF 1.5 hatte ich den Eindruck, dass meine Seiten durchaus funktionieren.

    Natürlich mag es gar kein Problem sein, style="vertical-align:middle" anzugeben... nur: für einen WYSIWYG-Dödel wie mich ist es ein Problem, weil ich mich im Quelltext ziemlich verloren fühle. Wo nur gebe ich diese schlichte Zeile ein...?

    Bitte nicht hauen!
    Eure Antwort lautet jetzt bestimmt: "siehe: SelfHTML"
    Aber wenn es doch "so einfach" ist, kann mir vielleicht auch jemand einen entsprechend einfachen Tipp auf die Schnelle geben.
    Ich gelobe auch, mich fortan tiefer in HTML hineinzuknien.
    In genau diesem Moment fange ich damit an!!!

  • Im Prinzip an der selben Stelle wie der HTML Teil. In den selben Bildertag.

    <img style="width: 35px; height: 19px; vertical-align:middle;" alt="" src="Minipfeil.gif" align="middle">

    So könnte das dann aussehen. Das wäre dann auch für Firefox und IE vertretbar.

  • Nein, Firefox 1.5 hat definitiv ein Problem damit!

    Hier mal ein Beispiel:
    Quelltext:

    Code
    <div style="border: 1px solid #000000;">
    <img src="http://www.firefox-browser.de/forum/images/smiles/icon_surprised.gif" style="width: 15px; height: 15px; border: none; vertical-align: middle;" />Der Text der neben dem Bild steht, sollte genau mittig zu dem Bild sein!
    </div>

    Der IE6 und der Opera stellen es richtig da:
    Opera:
    [Blockierte Grafik: http://pub.ehmig.net/img/firefox-browser.de/0000_opera.jpg]
    IE6:
    [Blockierte Grafik: http://pub.ehmig.net/img/firefox-browser.de/0000_ie6.jpg]


    Beim Firefox hingegen sieht es so aus!
    [Blockierte Grafik: http://pub.ehmig.net/img/firefox-browser.de/0000_firefox.jpg]

    und das ist nicht richtig!

    Gruß
    Taz

  • ich kenn mich mit dem thema nicht aus, aber eins weiß ich:
    - wenns internet explorer und opera anders machen als der firefox, heißt das noch lange nicht, dass das auch richtig ist.


    und wenn das ganze erst seit 1.5 so ist, ists sehr wahrscheinlich, dass es sich um einen bugfix handelt, vermute ich.

  • Da magst du im allgemeine schon recht haben, aber nicht in diesem fall!

    Firefox 1.5 zeigt das CSS Attribut "vertical-align: middle;" nicht korrekt an!

    Zitat

    middle == Mittig zwischen den oberen und unteren Rand des Elternelements


    und wenn du dir jetzt die bilder noch einmal anschaust, wirst du sehen, das der Text und der Smilie beim Firefox nicht in der mitte sind.


    Firefox 1.5, "vertical-align: middle;"
    [Blockierte Grafik: http://pub.ehmig.net/img/firefox-browser.de/0000_firefox.jpg]

    und so sollte es aussehen ;)
    [Blockierte Grafik: http://pub.ehmig.net/img/firefox-browser.de/0000_opera.jpg]