Fehlerhafte Darstellung im Internet Explorer

[Ja.Sch]

Hallo zusammen,

ich habe mit Wordpess eine Website erstellt, die nun leider beim Austesten über verschiedene Browser im Internet Explorer fehlerhaft dargestellt wird. Auf zwei Seiten wird ein extrem langer Abstand zwischen letztem Inhalt und dem Footer angezeigt. Ich habe leider sehr wenig Kenntnisse übers Programmieren und habe durch Googlerecherchen bisher nur in Erfahrung bringen können, dass man die Einstellungen zur Kompatibilitätsansicht aktivieren soll. Da habe ich alle Einstellungsmöglichkeiten aber vergeblich durchprobiert. Kann mir vll. jemand sagen woran es liegt? Die zwei Seiten sind:

https://die-zahnfee-kommt.de/

und

https://die-zahnfee-kommt.de/eine-zahnfeegeschichte

Vielen Dank im Voraus!

 

[Nuon]

Lohnt es sich noch für den IE zu optimieren?

 

[Ja.Sch]

Das Diagramm habe ich auch schon gesehen und wenn es mit sehr viel Aufwand verbunden ist das Problem zu lösen ist es das nicht wert aber ca. 5% nutzen eben den IE noch und daher fände ich es schön, wenn die Seite dort auch korrekt angezeigt würde.

 

[JP-M]

Ich weiß nicht wie es bei Anderen ist, aber wenn ich auch nur versuche die Entwicklertools im Internet Explorer 11 auf den besagten Seiten zu öffnen, friert einfach alles ein.

Zumindest auf der zweiten Seite scheint es, als würde hier das verwendete flex-grow css Attribut nicht richtig funktionieren - das Ganze flex Modell funktioniert erst ab IE 11 und auch das nur teilweise Can I use flex-grow.

Dazu werden immer wieder Styleinformationen mit !important überbügelt. Insgesamt würde ich vermuten, dass der CSS Wildwuchs dem IE einfach unlösbare Probleme bereitet. Das sollte mal entschlackt werden.

 

[Ja.Sch]

Also wenn es an den CSS-Einstellungen liegt, krieg ich das nie wieder ausgebügelt. Ich habe mittels eines Plugins zig CSS-Änderungen vorgenommen. Ich wüsste gar nicht, was genau ich da jetzt wieder ändern muss.

 

[Faust2011]

Auch im Jahr 2018 ist das Erstellen einer Website komplex. Mit HTML5 und CSS3 hat man mächtige Werkzeuge an der Hand, aber sobald es komplizierter wird und die Website möglichst überall laufen soll (alle Browser; Responsive Design; ...) reicht eben ein "WYSIWYG"-Editor nicht mehr aus.

ich habe mit Wordpess eine Website erstellt,

Ich habe mittels eines Plugins zig CSS-Änderungen vorgenommen. Ich wüsste gar nicht, was genau ich da jetzt wieder ändern muss.

Wordpress als WYSIWYG-Editor und dann "mittels eines Plugins zig CSS-Änderungen": Damit sollte doch alles gesagt sein. Denn sie wissen nicht, was sie tun würde es am ehesten treffen, was hier gerade passiert. @Ja.Sch sei mir nicht böse, das hier ist keine Kritik an Dir bzw. Deinem Projekt, sondern zeigt sehr schön, dass man für eine Website eben nicht einfach hier und da ein bisschen klicken kann und dann läuft die Sache schon.

So, damit mein Posting auch noch ein bisschen konstruktiver wird, hier mein Ratschlag: Nach jeder kleinen Änderung immer sofort testen! Und zwar auf jedem Gerät/Browser, das Du unterstützten möchtest. Ist aufwändig, geht aber nicht anders, zumindest solange man den Anspruch hat, dass es perfekt sein muss.

Viel Erfolg!

 

[Ja.Sch]

Kein Problem :-)

Ich bin mir durchaus bewusst, dass ich da keine Ahnung von habe. Da man aber nicht direkt hohe Beträge in die Hand nimmt um eine Website zu erstellen, von der man nicht weiß, ob sie ankommt, sind Wordpress und kleine Helferlein-Plugins natürlich eine gute Lösung für Leute wie mich.

Hätte ja sein können, dass man das IE-Problem fix in den Griff bekommt. Ansonsten bin ich mit dem Ergebnis ganz zufrieden. Alles andere läuft (bis jetzt).

 

[ayngush]

Kann mir vll. jemand sagen woran es liegt?

Ja, es liegt an der Flex-Box des Div-Elements mit der ID "wrapper".

Mir scheint auf dem ersten und auf dem Zweiten Blick auch nicht notwendig, dass das eine Flexbox ist. Ein normales Block-Element würde wohl reichen.

Darüber hinaus ist das Footer-Element zu breit, es erzeugt einen horizontale Scrollbar.

 

[Ja.Sch]

Vielen Dank für die Rückmeldung. Leider weiß ich weder was eine Flex-Box ist noch was ich unter einem Div-Element verstehe kann. Ist es möglich das mal für "Programmieridioten" zu erklären? :-)

Bzw. auch, wie ich das ändern kann.

 

[Sparta8]

Vielen Dank für die Rückmeldung. Leider weiß ich weder was eine Flex-Box ist noch was ich unter einem Div-Element verstehe kann. Ist es möglich das mal für "Programmieridioten" zu erklären? :-)

Bzw. auch, wie ich das ändern kann.

Nein, weil das schon die absoluten Basics sind. Wenn du nicht weißt was ein Div ist, dann ist das in etwa so, als ob du deinem Auto schrauben möchtest, aber nicht weißt was Reifen sind.
(nicht bös gemeint)

 

[Ja.Sch]

Mh.. Ok. Dann muss ich mir das mal anlesen. Danke!

 

[Sparta8]

Viel besser wäre es, wenn du dir ein Besucher Analyse Tool/Plugin (Google Analytics z.B.) installierst und erst mal paar Wochen die Webseite laufen lässt. Dann schau dir genau an wie viele Besucher deine Seite hat und welche Browser diese User verwenden.
Falls du in den vier Wochen zwei Besucher mit dem Internet Explorer hast, ist deine Zeit anderweitig viel besser aufgehoben. Kommen aber 10%, 40% oder gar 80% deiner Besucher mit dem IE, dann zahlt sich die Feinjustierung wirklich aus.
Solche allgemeinen Statistiken wie im zweiten Posting hier sind nur bedingt aussagekräftig. Wirklich wichtig ist, welche Browser genau deine User verwenden.

 

[ayngush]

GoogleAnalytics ist in Zeiten von DSGVO ein wirklich schlechter Rat...

Letztlich wird es am Wordpress-Theme liegen, dass die Darstellung nicht korrekt ist. Also gibt es zwei Möglichkeiten:

1. Alles auf ein anderes, kompatibles Theme umbauen.
2. Ein Child Theme erstellen und die "kaputten" Bereiche reparieren.

 

[Sparta8]

GoogleAnalytics ist in Zeiten von DSGVO ein wirklich schlechter Rat...

https://www.121watt.de/online-marketing/google-analytics-datenschutz-konform/
https://www.medienkraft.at/google-analytics-dsgvo-konform/
https://www.datenschutzbeauftragter...oogle-analytics-2018-fuer-die-dsgvo-anpassen/

Ja genau, Google hat die DSGVO verschlafen und wir müssen in der EU drauf verzichten.

 

[ayngush]

Nicht Google hat etwas verschlafen, sondern die EU. Namentlich die ePrivacy-Verordnung.
Dadurch findet, laut (strittigen) Positionspapier der Datenschutzkonferenz vom 26. April 2018, der § 15 Abs. 3 TMG keine Anwendung mehr. Dadurch gilt einzig und allein noch die EU-DSGVO und demnach ist, auch pseudonymisiertes, Tracking ohne vorherige Opt-In-Einwilligung in der Übergangszeit bis zur Neuregelung der ePrivacy-Verordnung nicht mehr zulässig.

Siehe auch dazu: https://www.troeber.de/news/datensc...ogle-analytics-nur-mit-einwilligung-zulassig/

 

[Ja.Sch]

Danke für eure Hilfe. Ich habe das Problem tatsächlich lösen können.

Was ich aber nicht geschafft habe, ist, die horizontale Scrollbar zu entfernen bzw. sie überflüssig zu machen. Ich habe alles auf 100% Seitenbreite eingestellt aber am rechten Rand bleibt ein weißer Rand und dadurch scheint die Scrollbar zu entstehen.

Weiß da jemand einen Rat?

 

[ayngush]

der Container <div class="fusion-header"> ... hat im Stylesheet durch die Klasse fusion-header die Angabe margin-right: -50px; und wird damit zu breit für die Seite. margin-right: 0; löst das Problem.

 

[Ja.Sch]

Super, vielen Dank!! Hat geklappt!