nicht angemeldet dieselross
marctrix
dieselross
dieselross
marctrix
dieselross
Auge
Matthias Apsel
Rolf b
dieselross
Obiges ist in der Entwicklung. Funktioniert auch so weit ganz gut, bis auf… Tja unser lieber Freund Internet-Exploder macht wieder 'mal Probleme. Da ich an einem Mac sitze, kann ich die Gründe dafür mit Bordmitteln nicht weiter eingrenzen.
Die Elemente "header", "main" und "footer" sind jeweils als div ausgeführt, damit ältere Explorer (die ja mit dem modernen Markup nichts anfangen können) die Elemente richtig platzieren können. Tun sie aber offenbar trotzdem nicht. Der "footer" rutscht beim IE immer direkt unter den "header", als ob der "main"-Block gar nicht vorhanden wäre. Was mach' ich hier falsch?
P. s.: Dass die Blöcke als Klassen und nicht als IDs angesprochen werden, wie es eigentlich richtig wäre, liegt an einer Absprache mit einem Programmierer, der hier später noch eingreift und mich gebeten hat, möglichst keine IDs zu vergeben, damit nichts mit seinen IDs kollidiert.
Rolf b
Hej dieselross,
Obiges ist in der Entwicklung. Funktioniert auch so weit ganz gut, bis auf… Tja unser lieber Freund Internet-Exploder macht wieder 'mal Probleme.
Alte Software kann nie neue Sachen. das ist normal.
Da ich an einem Mac sitze, kann ich die Gründe dafür mit Bordmitteln nicht weiter eingrenzen.
Dafür empfehle ich eine virtuelle Maschine – ohne Testen kommt nurn Murks raus.
Die Elemente "header", "main" und "footer" sind jeweils als div ausgeführt, damit ältere Explorer (die ja mit dem modernen Markup nichts anfangen können) die Elemente richtig platzieren können.
Können sie, wenn du Ihnen mitteilst, dass das Block-Elemente sind. Das sind dann aber schon sehr alte Browser…
header, main, footer { display: block;}
Ich empfehle aber hier auf bestehendes zurückzugreifen. Es gibt ja noch mehr Angaben, die Sinn machen. Warum das Rad neu erfinden?
Tun sie aber offenbar trotzdem nicht. Der "footer" rutscht beim IE immer direkt unter den "header", als ob der "main"-Block gar nicht vorhanden wäre. Was mach' ich hier falsch?
Keine Ahnung. Woher auch? Ich kenne deine Seite ja nicht… 😉
P. s.: Dass die Blöcke als Klassen und nicht als IDs angesprochen werden, wie es eigentlich richtig wäre, liegt an einer Absprache mit einem Programmierer, der hier später noch eingreift und mich gebeten hat, möglichst keine IDs zu vergeben, damit nichts mit seinen IDs kollidiert.
Warum sollten IDs richtig sein? Besser wären role-Attribute, noch besser die korrekten Elemente (siehe oben).
Marc
Keine Ahnung. Woher auch? Ich kenne deine Seite ja nicht… 😉
Hmmm... Ich hatte unter "problematische Seite" einen Link eingefügt. Ich dachte, das müsste zu der Seite führen. – Test – Tut es auch. 😉
Das "main" Element muss ein flex-Element sein, um den "footer" ans Seitenende zu schieben. Wie gesagt, funktioniert ja auch in allen anderen Browsern.
Nachtrag: Dass ich keine "herkömmliche" Sticky-Footer-Methode verwende, liegt daran, dass ich die Höhe des Footers für schmalere Viewports nicht jedes Mal neu berechnen möchte. Wozu auch? Gibt ja flex.
Hej dieselross,
Keine Ahnung. Woher auch? Ich kenne deine Seite ja nicht… 😉
Hmmm... Ich hatte unter "problematische Seite" einen Link eingefügt.
Ups… 😉
Das "main" Element muss ein flex-Element sein, um den "footer" ans Seitenende zu schieben. Wie gesagt, funktioniert ja auch in allen anderen Browsern.
Sorry, aber ich stehe immer noch auf dem Schlauch. Bin auch gleich erst mal unterwegs. - Ich dachte erst, du würdest die Elemente mittels order neu anordnen - aber die stehen schon so wie sie sollen - und der footer sollte - auch im IE – unter dem Element mit der Klasse main erscheinen. Aber wie gesagt: die ARIA-Rolle nicht vergessen anzugeben…
Für das, wovon ich glaube, dass du es erreichen möchtest, musst du IMHO nichts tun. Aber ich fürchte ich verstehe dich falsch…
Marc
Ich habe jetzt eine konditionale "crappy.css" eingefügt, die lediglich die Elemente .header, .main uns .footer auf "display: block setzt. Das hilft schon 'mal bis IE9 (dann stickt der footer eben nicht) aber die IE10 und 11 ignorieren den conditional comment vollständig, verstehen aber die flex-Eigenschaft des umgebenden ".page"-elementes aufgrund eines bugs nicht (habe lange recherchiert und bin dann doch über mehrere Querverweise fündig geworden : Siehe hier).
Hallo
… die IE10 und 11 ignorieren den conditional comment vollständig …
Das liegt daran, dass CC mit dem IE10 abgeschafft wurden.
Tschö, Auge
Hallo dieselross,
von welchen IE sprechen wir hier?
Bis demnächst
Matthias
IE 10 und 11. Habe aber inzwischen die Info gefunden, dass das ein bekannter Bug des IE ist (wieder einmal). Ärgerlicherweise lässt er sich nicht einmal mehr mit einem conditional comment abfangen.
Hallo
Deine Beispielseite zeigt bereits (und zwar vollkommen browserunabhängig) das "Hauptproblem" des Sticky Footer:
Er ist schlicht überflüssig.
Fertige Websites haben in der Regel so viel Inhalt das gescrollt werden muss. Wenn einige Unterseiten zu wenig Inhalt haben damit der Footer nicht mindestens am unteren Fensterrand ist sind das meist solche, die wenig besucht werden und es entsprechend niemanden stört, wenn der Footer nicht mindestens am unteren Fensterrand klebt.
Zu deinem Problem:
Dafür gibt es keine praktikable Lösung. Der IE verhält sich zu eigensinnig. Jede Anpassung für den IE führt zu größeren Problemen.
Von daher solltest du für den Sticky Footer einfach die Flexbox-Standardlösung verwenden, mit der der Footer auch im IE unterhalb des Hauptinhalts bleibt und die Seite somit sauber dargestellt wird.
Gruss
MrMurphy
Naja. Ganz so schlimm ist es hoffentlich nicht.
Ein Problem des IE ist, dass er flex-basis ohne Einheit nicht verdaut. Und ein flex:1; scheint sowas hervorzubringen. Ich konnte den Footer nach unten verdrängen, in dem ich der .main Klasse ein flex-basis:auto gegeben habe.
Jetzt sind noch einige Elemente zu hoch. Warum DAS so ist, habe ich noch nicht ganz herausgefunden, ich werde aber auch von deiner Flexeritis arg überfahren. Ich bezweifle, dass Du SO viele display:flex Bereiche brauchst. Die solltest Du erstmal auf das nötige Minimum reduzieren.
Ansonsten würde ich Dir noch diesen Text ans Herz legen wollen, sofern Du ihn noch nicht kennst. Vielleicht findest Du darin noch den einen oder anderen Trick.
Sticky Feet werden hier auch noch angesprochen.
HTH
Rolf
Hallo
Sticky Feet werden hier auch noch angesprochen.
Die Lösung kannte ich noch nicht, sie funktioniert. Danke.
Gruss
MrMurphy
DAS hat geholfen. Danke sehr. Flex ist ein Geschenk und wenn Grid erst 'mal vollumfänglich nutzbar wird, brechen gute Zeiten an.
Tja unser lieber Freund Internet-Exploder macht wieder 'mal Probleme. Da ich an einem Mac sitze, kann ich die Gründe dafür mit Bordmitteln nicht weiter eingrenzen.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Danke schön. Werde ich gleich testen.
