display flex und der IE
Fred
- css
Hallo und guten Morgen,
ich versuche mich in display:flex; reinzufuchsen, habe auch alles wunderbar hinbekommen, solange man den Firefox, Chrome oder Opera benutzt. Selbst mit dem Samsung S4 sieht es gut aus. Dann hab ich mal mit dem IE11 draufgeschaut und da geht ja gar nichts.
Was will ich erreichen: Auf großen Displays soll aside rechts neben der eigentlichen Seite stehen, die "eigentliche" Seite in der Breite dynamisch sein. Die "eigentliche" Seite mit header, nav, section und footer soll sowohl bei großen und kleinen Displays in der Höhe dynamisch sein, wobei nur section dynamisch ist. Der footer soll sich unten am Viewport befinden (oder halt nach unten rauslaufen), wie beim Sticky footer.
Hier eine Seite zum scrollen; http://neu.gwfb.de/start/index.php und diese mit wenig Inhalt; http://neu.gwfb.de/start/test.html Was kann ich machen um es im IE auch so aussehen zu lassen?
Gruß
Fred
Hallo
Was kann ich machen um es im IE auch so aussehen zu lassen?
Bei solchen Problemen ist Can I Use? die erste Anlaufstelle. Laut den dortigen Angaben unterstützt der IE11 das flexbox-Modell. Im Reiter „known issues“ findest du aber Anmerkungen über Rand- und Sonderbedingungen (hier auch der IE-Browser), deren Inhalt du zuerst bitte gegen deinen realen Code zu prüfst.
Dann können wir weiter schauen.
Tschö, Auge
Hi,
Im Reiter „known issues“ findest du aber Anmerkungen über Rand- und Sonderbedingungen (hier auch der IE-Browser), deren Inhalt du zuerst bitte gegen deinen realen Code zu prüfst.
Known issue 1. umgesetzt, im FF bleibt es wie zuvor,
Known issue 2. wirkt sich negativ auf den FF aus, aside bleibt am unteren Viewport, der Hauptteil scrollt raus, bleiben also nicht mehr gleich lang.
Leider habe ich vor heute abend keinen IE 11 zum Testen parat.
Gruß
Fred
Moin!
Known issue 1. umgesetzt, im FF bleibt es wie zuvor,
Known issue 2. wirkt sich negativ auf den FF aus, aside bleibt am unteren Viewport, der Hauptteil scrollt raus, bleiben also nicht mehr gleich lang.
Leider habe ich vor heute abend keinen IE 11 zum Testen parat.
Tja. Dann kannst Du erst heute abend weiter machen.
Jörg Reinholz
Hallo,
Dann wirst Du überlegen müssen, es besonderen Browsern besonders recht zu machen. Antwort ab "In the light of the evolving thread, I have updated the below:"
Ich werd' nicht wirklich schlau daraus. Ich lasse mein funktionierendes CSS wie es ist und schreibe den IE kram hier rein:
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { height:100%; }
Tja. Dann kannst Du erst heute abend weiter machen.
Um zu sehen das es im IE11 geht oder nicht geht ja, aber ob es im FF noch schön ist sehe ich ja jetzt ;-)
Fred
Hallo
Um zu sehen das es im IE11 geht oder nicht geht ja, aber ob es im FF noch schön ist sehe ich ja jetzt ;-)
Praktische Erfahrungen mit den mit Flexbox verbundenen Eigenheiten der browser habe ich auch noch nicht. Die bei den Known Issues auf Can I Use? verlinkte Seite mit gesammelten Workarounds scheint zumindest lesenswert zu sein.
Testen lässt sich das aber wirklich nur, wenn man vor den betroffenen Browsern sitzt.
Tschö, Auge
'nabend
Tja. Dann kannst Du erst heute abend weiter machen.
kurzer Zwischenstand. Kleiner Viewport und wenig Inhalt geht schon mal, der Rest sieht immer noch gruselig aus. Am schlimmsten war es die "browser detection hacks" einzurichten, der für IE 8 9 10 wirkt sich auch auf IE 11 aus, viel gefrickel (Habe section Rot eingefärbt, um zu sehen ob es sich auswirkt). Morgen hab ich mehr Zeit, melde mich nochmal.
Gruß
Fred
Moin moin,
nachdem ich vor ca. einem Jahr schon mal mit "display:flex;" getestet und aufgegeben hatte, habe ich mich vor 4 Wochen wieder daran gesetzt. Nachdem debakel mit dem IE und den bescheiden umgesetzten Standarts, die man mit css Hacks glattbügeln muß, habe ich jetzt für mich entschieden "display:flex;" wieder auf's Eis zu legen. Vielleicht ist der neue Browser Edge von M$ ja in der Lage dies umzusetzen, aber wie lange dauert's dann noch bis der IE ausgestorben ist, hier im Office habe ich noch den IE8 (haha, leider kein Witz).
Wenn dieses Template überall funktioniert gehe ich das Thema wieder an. Bis dahin setze ich weiterhin float ein, siehe: http://neu.gwfb.de/start/
Gruß
Fred
Hallo,
wie du deine Seite erstellst ist natürlich deine Entscheidung. Deiner Logik vermag ich aber nicht zu folgen.
Warum auf die Vorteile von Flexbox verzichten nur weil sich Wünsche nicht umsetzen lassen, für die Flexbox gar nicht gedacht ist? Für einen Sticky Footer gibt es im CSS noch keine allgemein anwendbare Lösung, es muss also in jedem Fall "getrickst" werden.
Wenn dieses Template überall funktioniert gehe ich das Thema wieder an.
Wenn Flexbox entsprechend eingesetzt wird funktioniert es doch. Und das CSS-Anweisungen in einigen Browsern nicht wie gewünscht funktionieren passiert doch immer wieder, das war früher viel schlimmer.
Gruss
MrMurphy
Hallo MrMurphy,
Deiner Logik vermag ich aber nicht zu folgen.
Bei dem Frust bleibt die Logik auf der Strecke ;-)
Warum auf die Vorteile von Flexbox verzichten nur weil sich Wünsche nicht umsetzen lassen, für die Flexbox gar nicht gedacht ist?
Auf der Suche nach Sticky Footer bin ich ja erst auf Flexbox gekommen.
Und das CSS-Anweisungen in einigen Browsern nicht wie gewünscht funktionieren passiert doch immer wieder, das war früher viel schlimmer.
Ich weiß, ich weiß...
Gruss
Fred
Jetzt ist erstmal Pfingsten, allen ein schönes Wochenende.