Holger: ...bzw. (BROWSER), vertical-align

Schönen guten Morgen...

Ja, ich weiß, diese Frage wurde hier schon desöfteren gestellt, allerdings - ja, ich habe das Archiv durchsucht - niemals derart beantwortet, daß es mir in diesem speziellen Falle hätte weiterhelfen können. Ergo fühle ich mich genötigt, Euch erneut damit zu belästigen:

Nach meinem Logikverständnis sollten folgende Zeilen auf gängigen Benutzerklienten geneigt sein, das Bild blafasel.png vertikal zu zentrieren:

[...]
<table style="height:100%">
<tr>
<td style="vertical-align:middle">
<img src="blafasel.png" width="50" height="50" alt="bla bla">
</td>
</tr>
</table>
[...]

Bei Opera und dem IE funktioniert das auch tadellos, Netscape 6.x und Mozilla 1.0 hingegen weigern sich beharrlich. Tun sie das absichtlich, oder wissen sie es einfach nicht besser? Gibt es überhaupt irgendeine möglichkeit, dieses Bild (oder halt sonstige Inhalte) vertikal zu zentrieren? Mit Layern gelingt mir das nämlich ebensowenig. Wer mir zu helfen vermag, dem werde ich auf Wunsch einen eigenen Altar errichten.

Danke im Voraus,
Holger

  1. Du solltest statt % in px arbeiten. Dann funktionierts.

    1. Nachtrag:
      Funktioniert auch mit <table style="height: 100%">
      Allerdings sollte der <body> eine Höhe haben die der Fenserhöhe entspricht.

      1. Nachtrag:
        Funktioniert auch mit <table style="height: 100%">
        Allerdings sollte der <body> eine Höhe haben die der Fenserhöhe entspricht.

        Das klingt sinnvoll. Netscape und Mozilla zeigen sich aber weiterhin störrisch.

        Holger

  2. Hi,

    <table style="height:100%">

    stelle Dir eine Frage: Wie viel sind 100% der Höhe des übergeordneten Elementes? Kleiner Tipp: Es ist _nicht_ die Höhe des Fensters.

    Cheatah

    1. Hi,

      <table style="height:100%">

      stelle Dir eine Frage: Wie viel sind 100% der Höhe des übergeordneten Elementes? Kleiner Tipp: Es ist _nicht_ die Höhe des Fensters.

      Cheatah

      Hallo,

      in diesem speziellen Falle ist diese Tabelle das einzige enthaltene Element, die somit praktisch _doch_ die Höhe des Fensters bestimmt, oder irre ich?

      Holger

      1. in diesem speziellen Falle ist diese Tabelle das einzige enthaltene Element, die somit praktisch _doch_ die Höhe des Fensters bestimmt, oder irre ich?

        Nö. Übergeordnetes Element sollte wenigstens <body> sein.

        http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

        1. Nö. Übergeordnetes Element sollte wenigstens <body> sein.

          http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

          Ups.... Ja, klar, <body> ist schon da, ich vergaß.

          Holger

        2. Nö. Übergeordnetes Element sollte wenigstens <body> sein.

          [...] - Dieses Zeichen bedeutet i.d.R. ausgelassener Bereich, möglicherweise ist da ein Body....

          ...und ie >=5 und NN 6.2 brauchen dieses Body Element nicht!

          1. Nö. Übergeordnetes Element sollte wenigstens <body> sein.

            [...] - Dieses Zeichen bedeutet i.d.R. ausgelassener Bereich, möglicherweise ist da ein Body....

            ...und ie >=5 und NN 6.2 brauchen dieses Body Element nicht!

            Was nicht für Qualität spricht. Minimaler Inhalt des <html> ist nämlich <head> und <body> (oder <frameset>).

            1. Nö. Übergeordnetes Element sollte wenigstens <body> sein.

              [...] - Dieses Zeichen bedeutet i.d.R. ausgelassener Bereich, möglicherweise ist da ein Body....

              ...und ie >=5 und NN 6.2 brauchen dieses Body Element nicht!

              Was nicht für Qualität spricht. Minimaler Inhalt des <html> ist nämlich <head> und <body> (oder <frameset>).

              Eine komplette Webseite sollte dieses Elemente schon enthalten, da wollte ich dir nicht widersprechen....

              ...aber um sich auf ein bsp. einzulassen und die funktionalität einer tabelle zu testen, reicht es auch aus darauf zu verzichten!

              Meist haben die Elemente <head> und <body> auch mehr sinn als nur eine 100% Höhe zu haben... oder?

              1. ...aber um sich auf ein bsp. einzulassen und die funktionalität einer tabelle zu testen, reicht es auch aus darauf zu verzichten!

                Sicher, die eigentliche Funktionalität ist ja eine zuordnnde Darstellung von Daten. Aber dafür brauch ich erstmal kein ausgefeiltes Layout/ Design mit Ausrichtung, Formatierung etc.

                Meist haben die Elemente <head> und <body> auch mehr sinn als nur eine 100% Höhe zu haben... oder?

                Ja. http://www.w3.org/TR/html4/

      2. Da du den Mozilla nutzt, solltest du mal unter Tools > Web Development > DOM Inspector mal den Computed Style des body Elements angucken.

      3. Hi,

        in diesem speziellen Falle ist diese Tabelle das einzige enthaltene Element, die somit praktisch _doch_ die Höhe des Fensters bestimmt, oder irre ich?

        wieso glaubst Du, der <body> würde das gesamte Fenster beanspruchen? Er ist so lang, wie nun mal benötigt wird, und wenn nur eine Tabelle drin ist, schaut der Browser eben, wie groß die wird. Dies wird anschließend auf 100% der berechneten Größe festgelegt... tja, rekursive Abhängigkeit :-)

        Cheatah

  3. [...]
    <table style="height:100%">
    <tr>
    <td style="vertical-align:middle" valign="middle">
    <img src="blafasel.png" width="50" height="50" alt="bla bla">
    </td>
    </tr>
    </table>
    [...]

    Bei Opera und dem IE funktioniert das auch tadellos, Netscape 6.x und Mozilla 1.0 hingegen weigern sich beharrlich.

    Tun sie das absichtlich, oder wissen sie es einfach nicht besser?

    Wer weiss das schon ???

    Netscape 6.2.2 kann das so wie du es beschreibst und für Netscape 4.x kannst du doch einfach valign="middle" hinter deine style-block schreiben s.o.

    Ansonsten könnte die Höhenangabe problematisch sein, die Netscape nur sehr ungern beachtet...
    Erstell eine Blindspalte neben deiner Bildspalte mit einer transparenten Grafik, die hoch genug ist ein 100% zu simulieren.

    Falls deine Seite folgende Doctype Def. benutzt, lösche sie!
    <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

    Netscape 6.2 ignoriert sonst sämtliche (!) Höhenangaben.

    Wenn Dir das geholfen hat....?! Ein Foto vom Altar bitte an mich ;-)

    1. Falls deine Seite folgende Doctype Def. benutzt, lösche sie!
      <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

      Netscape 6.2 ignoriert sonst sämtliche (!) Höhenangaben.

      Falsch!!!!!!!!!!!!!!
      Das löschen der DTD stellt den Mozilla von Standard- in Quark(NN4)-Modus um und amt das NN4 verhalten nach. Somit nutzt du wieder nur nichtstandardkonfome Auszeichnung und CSS.

      1. Falls deine Seite folgende Doctype Def. benutzt, lösche sie!
        <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

        Netscape 6.2 ignoriert sonst sämtliche (!) Höhenangaben.

        Falsch!!!!!!!!!!!!!!
        Das löschen der DTD stellt den Mozilla von Standard- in Quark(NN4)-Modus um und amt das NN4 verhalten nach. Somit nutzt du wieder nur nichtstandardkonfome Auszeichnung und CSS.

        Nicht falsch!!!!!!!

        ....es mag sein, dass da was umgestellt wird, aber deshalb verliert NN 6.2 nicht seine Vorteile gegenüber NN 4.x

        Seit wann gibt es einen Standard ?? ...warte auf sowas schon lange vergeblich

        1. Seit wann gibt es einen Standard ?? ...warte auf sowas schon lange vergeblich

          Wenn Leute wie DU diese Standards ständig torpedieren dauerts ewig. Aber du benutzt sicherlich auch 1/6 Zoll Schrauben....

    2. Falls deine Seite folgende Doctype Def. benutzt, lösche sie!
      <!doctype html public "-//W3C//DTD HTML 4.0 //EN">

      Netscape 6.2 ignoriert sonst sämtliche (!) Höhenangaben.

      Ja, ist dieser Dokumententyp, und ich bin viel zu narzisstisch, daran etwas zu ändern.... ;-)

      Wenn Dir das geholfen hat....?! Ein Foto vom Altar bitte an mich ;-)

      Danke jedenfalls.... Aber den Altar hat sich Kai verdient, denn dank seines Rats geht es nun (auch mit NS 6.2). Wenn er ihn nicht will, oder wenn ...ein tragischer Unfall eintreten sollte, komme ich aber auf Dich zurück. ;-)

      Dennoch dankend,
      Holger

  4. hi

    <html style="height:100%">
    <body style="height:100%">

    <table style="height:100%">
    <tr>
    <td style="vertical-align:middle">
    <img src="blafasel.png" width="50" height="50" alt="bla bla">
    </td>
    </tr>
    </table>

    </body>
    </html>

    ...tjo - was soll man sonst noch sagen?

    Grüße aus Bleckede

    Kai

    1. ...tjo - was soll man sonst noch sagen?

      Grüße aus Bleckede

      Kai

      Nichts, denn es klappt ganz wunderbar. Recht herzlichen Dank nach Bleckede...

      Holger