Homepageansicht unterschiedlich je nach Browser

    Hallo, ich habe bei einer Homepage das Problem das wenn ich die Initiale aktiviere, sie in Google chrome, wo die Seite auch mit erstellt wird, vernünftig angezeigt wird- im Internet Explorer jedoch riesengroß angezeigt wird.

    Außerdem wird im Internet Explorer auch ein Rahmen beim Bild der eingestellt wurde anders angezeigt.

    Die Problemseite ist http://www.hesborn.net

    - das initialen Problem taucht zb auf der Seite Bollerberg auf und das rahmenproblem auf der Startseite ganz unten... bei einer anderen Seite von mir ignoriert der Internet Explorer die Initialen Ansicht einfach ganz...

    falls jemand mal mit beiden Browsern gucken kann würde ich mich über eine Rückmeldung freuen...

    Zitat von WebEcke

    im Internet Explorer jedoch riesengroß angezeigt wird.

    Wenn Du die Version IE11 meinst, dann ist dieser Browser für die neuen Webtechniken einfach zu alt und unterstützt diese nicht.
    Der Nachfolger EDGE zeigt die Seite so an wie im Chrome oder Firefox.

    Das Rahmen-Problem unten kannst du wie folgt beheben

    Lösche das right heraus und schon geht es. Spannenderweise zeigt auch der FF (andere Browser habe ich nicht getestet) einen Fehler im unteren Rahmen an. Der fällt aber nicht so stark auf.


    Code
    .tm-box-decoration-default::before, .tm-box-decoration-primary::before, .tm-box-decoration-secondary::before {
    content: '';
    position: absolute;
    top: -30px;
    bottom: -30px;
    left: -30px;
    right: -30px;
    z-index: -1;
    pointer-events: none;
}

    Bei den Initialen verstehe ich nicht, wie du das umgesetzt hast? Finde da nichts CSS-entsprechendes.

    Muss leider zugeben, mit sowas noch nie gearbeitet zu haben, weil es den Lesefluss erschwert (Webseiten sind keine Bücher!) und ich immer bestrebt bin, dass die Usability funktioniert. Aber vielleicht hilft dir das hier weiter:

    https://blog.kulturbanause.de/2017/08/initiale-css-drop-cap/



    Axel

    Irgendwo in der CSS-Datei findest im Wust diesen Wust

    Code
    ...
.uk-dropcap::first-letter,.uk-dropcap>p:first-of-type::first-letter{display:block;margin-right:10px;float:left;font-size:5.19em;line-height:1;color:inherit;margin-bottom:-2px}
...
    Code
    .uk-dropcap>p:first-of-type::first-letter{

    Entscheidend ist das

    Code
    font-size:5.19em

    Danach folgen ähnliche Anweisungen (musst also aufpassen), die spezifisch für schlauere Browser sind und für die das wieder überschrieben wird bspw. 1.1%.


    Im IE11 wird einem das

    Code
    ::first-letter

    direkt im Inspektor bei Anwahl vom DIV .uk-dropcap angezeigt. Im FF muss man die "Pseudo-Elemente" aufklappen, wenn nicht.