zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellungsproblem display: grid

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.12.2017, 13:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2017
Beiträge: 3
Schischi befindet sich auf einem aufstrebenden Ast
Standard Darstellungsproblem display: grid

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.12.2017, 13:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.12.2017, 14:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2017
Beiträge: 3
Schischi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 06.12.2017, 14:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Das ist aber schade, was machen wir da nur? Was ich damit sagen will: Ohne genaue Fehlerbeschreibung kann man dir leider nicht genau helfen.
Mit Zitat antworten
  #5 (permalink)  
Alt 06.12.2017, 14:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.12.2017
Beiträge: 3
Schischi befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bildergröße beim verkleinen des Browserfensters melvinuspo CSS 3 07.04.2015 17:41
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:58 Uhr.