Internet Explorer Support, Grid: center divs, Image wird nicht richtig angezeigt

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

DerNeuling21

Mitglied
15 September 2017
59
1
8
19
Hallo zusammen,

da jetzt leider kein Weg daran vorbei führt, muss ich einen kleinen Internet Explorer Support für eine Webseite schreiben.

Die Domain ist folgende: it-kraus.net

Mir geht es einerseits mal darum, das auf der Home Seite das Sartbild nicht richt angezeigt wird und auf der "Leistungen" Seite die Div's, also die angebotenen Leistungen nicht zentriert sind.

Wie im Code zu sehen ist, wird auf der Leistungen Seite der Content normal mit "display: grid" zentriert, aber leider lässt sich das mit "display: -ms-grid" nicht genau so umsetzen.

Darum bitte ich euch für hilfreiche antworten, damit ich auch wieder etwas lernen kann, DANKE.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
Was du willst geht nicht. Also entweder den IE11 außen vor lassen (beziehungsweise ein einfaches Fallback einrichten) oder Webseiten mit aktuellem HTML und CSS erstellen. Da musst du dich schon entscheiden.
 

Sailor

Aktives Mitglied
14 Juli 2017
402
46
28
So wie es aussieht, nutzt du ja ein CMS (Joomla) zum Erstellen deiner Seite und damit hast du wohl nur wenig Einfluss auf die Aktualität des verwendeten HTML/CSS. Allerdings, wenn ich mir das Ergebnis der Überprüfung des Codes im W3C Validator ....
https://validator.w3.org/nu/?doc=http://it-kraus.net/
anschaue, dann ist das in Sachen Qualität und Aktualität eher Suboptimal.
Aber daran sollten deine Probleme nicht liegen, eher daran... und das ist das, was @MrMurphy ausdrücken wollte... dass der IE (egal welche Version) eben nicht oder nur unzureichend mit aktuellem HTML5 und CSS3 umgehen kann.
Man kann mit dem IE, wenn man sich überhaupt an ihm orientieren will, nur versuchen mit irgendwelchen CSS Fall-Backs das Erscheinungsbild so hinbiegen, dass es einigermaßen passt.
Jetzt aber konkret zu deinen Problemen.
Das Startbild wird nicht nicht richtig angezeigt, weil es als Hintergrundbild des 'div's' mit der Klasse 'home-start-image' eingefügt ist... aber das div hat keine Höhe und damit hat auch das Hintergrundbild keine Höhe.
Den Fehler mit den nicht zentrierten div's auf der 'Leistungen-Seite' kann ich nicht erkennen - sieht ok aus. Mach doch mal einen Screenshot.
 

DerNeuling21

Mitglied
15 September 2017
59
1
8
19
So wie es aussieht, nutzt du ja ein CMS (Joomla) zum Erstellen deiner Seite und damit hast du wohl nur wenig Einfluss auf die Aktualität des verwendeten HTML/CSS. Allerdings, wenn ich mir das Ergebnis der Überprüfung des Codes im W3C Validator ....
https://validator.w3.org/nu/?doc=http://it-kraus.net/
anschaue, dann ist das in Sachen Qualität und Aktualität eher Suboptimal.
Aber daran sollten deine Probleme nicht liegen, eher daran... und das ist das, was @MrMurphy ausdrücken wollte... dass der IE (egal welche Version) eben nicht oder nur unzureichend mit aktuellem HTML5 und CSS3 umgehen kann.
Man kann mit dem IE, wenn man sich überhaupt an ihm orientieren will, nur versuchen mit irgendwelchen CSS Fall-Backs das Erscheinungsbild so hinbiegen, dass es einigermaßen passt.
Jetzt aber konkret zu deinen Problemen.
Das Startbild wird nicht nicht richtig angezeigt, weil es als Hintergrundbild des 'div's' mit der Klasse 'home-start-image' eingefügt ist... aber das div hat keine Höhe und damit hat auch das Hintergrundbild keine Höhe.
Den Fehler mit den nicht zentrierten div's auf der 'Leistungen-Seite' kann ich nicht erkennen - sieht ok aus. Mach doch mal einen Screenshot.
Danke mal für die lange und ausführliche Antwort.

Also ja, ich würde am LIEBSTEN auch gerne IE außen vorlassen, weil es einfach ein Stück SCH**** ist, ABER viele unserer Mitmenschen haben leider keine Ahnung, das es so viel bessere Browser in dem Ihnen nicht außreichend bekannten Internet es gibt. Somit gibt es sehr viele altere, aber auch junge Personen, die kaum etwas mit PC und Internet anfangen können und dann mit dem IE versuchen im Neuland Hilfe zu finden. Wenn Sie dann dort dann eine nicht richtig angepasste Seite finden, ist Ihnen leider nicht klar, dass ihr Browser daran Schuld ist und von vielen Entwicklern mit Absicht (eher mit Recht) boykottiert wird und suchen dann so lange weiter, bis eine einigermaßen gut aussehende Seite auftaucht.

Man muss leider immer beachten, welche Zeilgrupper mit der Webseite angesprochen werden soll.
Die Validator Fehler habe ich übrigens mal ausgebügelt, danke für den Tipp.


5169

Hier mal ein Bild zum Zentrierfehler. (Sind 2 verschiedene Bildschirme)(links richtig, rechts falsche Ansicht im IE)
 

Sailor

Aktives Mitglied
14 Juli 2017
402
46
28
Das scheinen Bilder zu sein, die auf unterschiedlich Breiten (Pixel) Displays aufgenommen wurden.
Dann habe ich den Verdacht, dass es an der Formatierung des Conntainer leistungen-content-all liegen könnte. Der hat keine vorgegebene Breite und links und rechts jeweils ein margin von 10%.
Die Inhalte in diesem Container - die div's leistungen-content - haben jeweils eine Breite von 1200px.
Versuche mal dem dem äußeren Container leistungen-content-all eine Breite von auch 1200px zu geben und dann den linken und rechten margin den Wert auto zu geben.
Das ist bestimmt noch nicht die endgültige Lösung, denn bei Displays mit kleinerer Breite greifen da einige MediaQueries in die Formatierung ein und das kann ich nicht abschätzen, wie sich das Layout dann verhält - muss man ausprobieren.
Ich denke aber, dass da noch eine weitere MediaQuery notwendig wird, die bei Breite kleiner 1200px den 'width' Wert des Containers leistungen-content-all auf 100% setzt.
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.120
443
83
Berlin
Warum so kompliziert und nicht einfach IE-optimierte Styles per Media-Query anhängen?
Code:
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 
   /* IE10+ specific styles go here */ 
}
 

DerNeuling21

Mitglied
15 September 2017
59
1
8
19
Ok, die Leistungen passen jetzt, bis auf das Hintergrundbild, das sich ein wenig beim scrollen mitbewegt, aber das soll jetzt eher Nebensache sein. Ich hätte da jetzt noch eher ein Problem auf der Startseite mit dem "Pfeil runter" Button, der außerhalb des Bildes ist.
 

Sailor

Aktives Mitglied
14 Juli 2017
402
46
28
Bitte mal folgendes testen:
Für den Container home-start
CSS:
.home-start {
    justify-content: center;
    display: -ms-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
Und für den Container .home-start-content
CSS:
.home-start-content {
    position: relative;
    display: inline-block;
    color: #ffffff;
    font-size: 300%;
    margin-top: -5%;
}
Das bitte mit allen verfügbaren Browsern testen.
 

Sailor

Aktives Mitglied
14 Juli 2017
402
46
28
... noch etwas ist mir aufgefallen. Du hast an ganz vielen Stellen im CSS noch nicht die Webkit Erweiterung für Flexbox im IE angegeben... also überall wo
CSS:
display: flex;
steht musst du ergänzen...
CSS:
display: -ms-flexbox;
display: flex;
Damit sollten dann der IE, wie auch die anderen Browser was anfangen können.
 

DerNeuling21

Mitglied
15 September 2017
59
1
8
19
Vielen dank für die ganzen Antworten. Bin jetzt dank euch zum Glück fertig (Bis auf das Hintergrundbild bei Leistungen) und wieder ein ganzes Stück schlauer.
 
Werbung:

Latest posts