Willkommen auf dem Portal für Mediengestalter

top · Moderator Threadersteller

Ich habe hier ein Problem mit einem vertikal mittig gesetzten Text in Chrome, Safari und Opera.

https://jsfiddle.net/arnweo1q/

Beim ersten Seitenaufbau ist der Text schön mittig. (Mit Hilfe von display: table-cell; )
Sobald das Feld aber die Größe ändert, durch Änderung der Browserbreite oder durch den Rollover-Effekt, hat das Textfeld nicht mehr die komplette Höhe und der Text ist etwas zu hoch. In FF und Edge läuft es wie es soll. Selbst der IE11 macht das richtig. <-- Schuld!

Schon mal jemand ein ähnliches Problem gehabt oder einen Lösungsansatz? * Keine Ahnung... *

JanG · **Verfasst** Fr 11.11.2016 09:39 **Titel**

Ich hab bisher nur sehr selten mit before und after gearbeitet.
Wenn ich im Safari bei #fam-block a:before, #fam-block a:after die 50% height wegmache
geht es zwar, aber dann fehlt natürlich der Pfeil.
Daher hab ich height mal auf 75px gestellt und das geht im FF und Safari.
Allerdings nicht responsiv, aber da hast Du zumindest schon mal den "Übeltäter".
Würde daher den Pfeil vielleicht anders machen, aber da ich mit before/after selten was gemacht hab,
musst Du nun weitermachen. Lächel

Peaze!

Morgo · **Verfasst** Fr 11.11.2016 11:12 **Titel**

before und after nicht auf das table-cell Element, sondern auf den äußeren Container: https://jsfiddle.net/ktfp6wv6/

*Klugscheisser-Modus an*: before und after sind keine Pseudo-Klassen, sondern Pseudo-Elemente, werden also mit "::" notiert, nicht mit ":".

top · Moderator Threadersteller

Danke für's anschauen.
Du hast recht, der Bug scheint mit den Elementen :before und :after in Kombination mit dem table-cell zusammen zu hängen.

Ich habe die Teile mal von den a-Element entfernt und an das darüber liegende div gehängt:

https://jsfiddle.net/arnweo1q/1/

Nun läuft es auf allen aktuellen Browsern. * huduwudu! *

Zwar ist jetzt nicht mehr der Bereich über dem Bild anklickbar, aber das ignoriere ich jetzt einfach weg.

Edit: Und während ich das hier tippe, sehe ich. dass Morgo auf die gleiche Lösung gekommen ist.

. o O (Und du hast natürlich recht - da gehören zwei Doppelpunkte hin. Bin ich noch so von css2 gewöhnt... Ooops

)

JanG · **Verfasst** Fr 11.11.2016 11:26 **Titel**

Wieder was gelernt! Danke! *Thumbs up!*

Peaze!

Icehawk · **Verfasst** Fr 11.11.2016 15:22 **Titel**

Ich nutze zum vertikalen zentrieren meist dass hier:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

hadouken · **Verfasst** So 13.11.2016 16:28 **Titel**

Du kannst einfach den Inhalt ("Blablabla <br> Blub blub") in ein Element mit display block wrappen.

https://jsfiddle.net/arnweo1q/4/

Willkommen auf dem Portal für Mediengestalter

Thema: CSS/Chrome: Falsche Höhe bei Größenänderung. vom 10.11.2016

CSS/Chrome: Falsche Höhe bei Größenänderung.