IE nervt!

Samstag, 21. Mai 2016

Nachdem ich bereits verraten habe, dass ich an meinem "Plan B" für meine Homepage bastel, wird es langsam etwas konkreter.

Ich habe mich komplett durch Peter Müllers Einstieg in CSS gelesen - leider sind auch in der zweiten Auflage noch einige Fehler drin. Trotzdem kann ich es empfehlen, da es durch die lehrbuchartige Aufmachung einen wirklich gelungenen Einstieg vermittelt. Alle Beispiel-Dateien gibt es zum Runterladen, so dass man sich lästige Tipparbeit spart und dennoch sofort ausprobieren und loslegen kann.

Die Umsetzung meiner Idee wollte ich nun mittels Flexboxen realisieren, die mittlerweile von allen gängigen Browsern unterstützt werden. Ganz Gallien? Nein, ein von... Ja, klar. Alle meint natürlich nach wie vor: Alle, außer dem Internet-Explorer, bzw. Edge. Redmond möchte uns also weiterhin an den Rand des Wahnsinns treiben.

Position? Absolut relativ!

Ich erspare euch hier langatmige Ausschweifungen (hoffe ich), Ende vom Lied ist jedenfalls, dass es für den IE kein Flexbox-Design gibt, sondern das altbewährte Positionieren herhalten muss:

<div id="wrapper">
  <div id="inhalt"> </div>
  <div id="loch"> </div>
 </div>

Der Wrapper wird als Babysitter für Inhalt und Loch festgenagelt, welche anschließend links und rechts in die Ecke gestellt werden:

#wrapper {display: block; position: relative; 
           width: 80%; margin: 5px auto;}
 #inhalt {display: block; position: absolute; top: 0; left:0; 
          width: 70%; margin-right: 28%;}
 #loch {display: block; position: absolute; top: 0; right:0; 
        width: 27%;}

Die Inhalts-Box ist mit einem margin-right versehen, das genügend Platz schafft, damit es sich die Loch-Box daneben schön gemütlich machen kann. Deshalb ist auch noch ein bisschen Luft zwischen den beiden. Display-block ist hier nötig, um die (eigentliche) Flex-Formatierung zu überschreiben.

Danach gabs die nächsten Probleme; schließlich soll der Wrapper nicht zwingend über die ganze Breite gehen (width: 80%) und schön zentriert sein (auto-margin). Mit letzterem hat selbst der Edge noch Probleme. Am Ende hab ich dann doch noch eine Lösung gefunden. Aber wie gesagt: Das war ein weiter, weiter, weiter Weg!

Conditional Comments

Leider hat M$ aufgehört, die geniale Lösung der "conditional comments" zu unterstützen! Einfach ein eigenes css für den IE getippt ("Bitte den Zwiebelrostbraten, aber ohne Zwiebeln!") und jeweils im head-Bereich der html-Seiten so eingebunden, dass nur und nur und ausschließlich der IE was damit anfangen kann:

<!--[if IE ]>
  <link href="ie.css" rel="stylesheet">
 <![endif]-->

IE acht und neun sind damit ver-extra-wurschtelt. Beim IE9 klappt sogar die mobile Version, nur der IE8 kann mit @media nichts anfangen. Dort also nur die Desktop-Version - damit kann ich leben. Ich würde mich echt freuen, wenn M$ die "conditional comments" wieder einführen würde. Auf meiner verzweifelten Suche nach einer Lösung für mein Problem bin ich nämlich vor allem auf eines gestoßen: Auf andere verzweifelte Menschen, die nach Lösungen für IE-/Edge-Probleme suchen...

Btw. gehts nur mir so oder ist das wirklich purer Sadismus, dass der IE mit wirklich guten Entwicklertools ausgestattet wurde, sowie der Möglichkeit, auf alte Browseransichten zurückzusetzen? Ich mein: Anstatt dem IE beizubringen, ordentlich zu arbeiten, wurde ein Erste-Hilfe-Kasten mitgeliefert. Ist schon etwas ... eigenartig, oder? ;) Aber das nur am Rande bemerkt.

Doppel-Null-Lösung für IE10+11

Irgendwann hab ich eine Lösung gefunden. Aber dann funktionierte die mobile Version nicht. Also dort solange rumgepfriemelt, bis es gepasst hat. Was wiederum die Desktop-Version zerschossen hat. Boah, der is soo zickig! Jedenfalls - um jetzt wirklich mal zum Punkt zu kommen - mit dieser MediaQueries-Lösung kommen beide Versionen zurecht:

@media screen and (min-width:768px\0){
 /*alles fürs große Design*/
 }
@media screen\0 and (max-width:767px){
 /*alles fürs kleine Design*/
 }

Valide ist das CSS damit leider nicht mehr. Die Wahl bleibt zwischen invalidem CSS oder invalidem IE. Sozusagen.

Ich wollte hier einfach mal meinen Frust loslassen - wenn ihr ebenfalls IE-geplagt seit, erzählt mir davon. Das befreit, echt!

Wer sich aber einfach nur wundert, warum der zweite div "loch" heißt, und warum ich überhaupt divs nehme, statt mains und navs und hinz und kunz (sorry, der musste raus *g*) - tja, das ist eine andere Geschichte.

nach oben

Ich freue mich auf deinen Kommentar!

Kommentare werden erst nach Freischaltung sichtbar.

Frame nachladen (neues Fenster)