Hallo zusammen,

mein Name ist Ralf und ich erstelle mehr oder weniger Hobbymäßig Webseiten in Wordpress und Joomla. Hier habe ich mir zumindest auch grundlegende Kenntnisse in der CSS Gestaltung angeeignet.

Nun habe ich allerdings ein kleines Darstellungsproblem.

Auf meiner Entwicklungsseite https://dev.schetschok.de/lernen habe ich ein Quiz-Plugin. Dieses hat die Antworten einer Frage, wenn diese einen Zeilenumbruch haben, für mein Verständnis "unschön" dargestellt.

Eine CSS Anpassung hat dies behoben, zumindest in Firefox, Chrome...
EDGE und Internetexplorer jedoch zeigen das alte Verhalten, da sie scheinbar nicht mit dem CSS zurecht kommen.

Folgenden Code habe ich eingefügt:

.wpProQuiz_questionListItem{
display: grid;
grid-template-columns: 20px auto;
}
.wpProQuiz_questionListItem label {
display: grid;
grid-template-columns: 20px auto;
grid-gap: 1rem;
align-items: flex-start;
}
.wpProQuiz_quiz .wpProQuiz_questionInput[type="radio"] {
margin: 7px 0 0 0 !important;
}


Scheinbar kommt Microsoft (noch) nicht mit dem grid Zurecht. Ich habe gelesen dass es notwendig ist einen vendor mit anzugeben aber egal as ich einfüge es klappt einfach nicht.

Vllt hat jemand eine schlaue Idee oder einen Tip für mich.

Mit Dank im Voraus!

mfg
Ralf

IE verwendet eine alte Syntax von grid https://www.w3.org/TR/2011/WD-css3-g...yout-20110407/

Siehe auch hier: https://caniuse.com/#feat=css-grid

Edge verwendet in der aktuellen Version das "richtige" Grid Layout, wenn das bei dir inkorrekt angezeigt wird, dann hast du evenutell noch eine alte Version.

Hier auch noch mehr Information dazu.
https://rachelandrew.co.uk/archives/...s-grid-layout/

Du brauchst wohl -ms-grid als Präfix.

Hallo cloned,

ja korrekt, das -ms-grid muss wohl noch dabei, allerdings scheitere ich da an der Syntax.. jedenfalls kommt nicht dabei heraus was ich mir vorstelle, im Gegenteil.

Das ist aber schade, was machen wir da nur? Was ich damit sagen will: Ohne genaue Fehlerbeschreibung kann man dir leider nicht genau helfen.

ja ich verstehe...

Also: Mein oben geposteter CSS-Code funktioniert bestens für alle Browser bis auf Microsoft...

Mir fehlt die Kenntnis für die -MS-Codierung des Codes.

.wpProQuiz_questionListItem{
display: grid;
display: -ms-grid;
grid-template-columns: 20px auto;
-ms-grid-columns:: 20px auto;
}

sowie
...
grid-template-columns: 20px auto;
-ms-grid-columns: 20px auto;
...

zerschiesst mir die Ansicht in den Microsoft Browsers. Also habe ich da ja noch einen Fehler drin vermute ich. Die Zeile grid-template-columns: 20px auto; zum Beispiel vermute ich ist fehlerhaft aber ich verstehe die korrekte Syntax nicht...