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

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

DerNeuling21

Mitglied
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.
 
Werbung:
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.
 
Werbung:
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.
 
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)
 
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.
 
Werbung:
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 */ 
}
 
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.
 
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.
 
Werbung:
... 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.
 
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.
 
(Bis auf das Hintergrundbild bei Leistungen)
Das wirst du auch nach meinem Kenntnisstand nicht weg bekommen :confused:. Aber die IE Nutzer kennen das - also ruhig bleiben und Füße still halten.
Aber vielleicht kennt hier ja jemand doch eine Methode, dem IE das Gezappel von fixierten Elementen abzugewöhnen.
 
Werbung:
Zurück
Oben