Tipp zum HTML5-<footer>-Element im Firefox/Opera
Bei einem aktuellen HTML5-Projekt fiel mir auf, dass sowohl im Firefox- als auch im Opera-Browser das <footer>
-Element nicht auf mein angewandtes CSS-Styling reagierte. Trotz korrekt angegebener Breite und neuster Browser-Generationen brach der Footer komplett aus dem Layout heraus und ließ sich überhaupt nicht mit CSS ansprechen. Sobald ich den <footer>
in ein <div>
umwandelte und eine ID vergab funktionierte alles wie gewohnt.
Das Problem war glücklicherweise schnell identifiziert und leicht behoben. Damit Ihr in Zukunft sofort wisst warum dieses Verhalten auftreten kann erkläre ich Euch kurz woran es liegt.
Kein optimaler HTML5-Support in Firefox und Opera
Zu meiner großen Überraschung lag es daran, dass einige HTML5-Element in Firefox und Opera noch nicht vollständig unterstützt und somit fehlinterpretiert werden. Die Liste aller Browser-Engines und der jeweiligen HTML5-Tag-Unterstützung habe ich auf Wikipedia gefunden.
Das neue <footer>
-Tag wird demnach nicht als Block-Element sondern als Inline-Element interpretiert und dargestellt. Das gleiche Problem wirkt sich auch auf andere HTML5-Elemente aus.
Alles was Ihr tun müsst um das Verhalten zu korrigieren ist im CSS-Code diesem Elemente die Eigenschaft display:block
zuzuweisen. Anschließend reagiert der <footer>
wieder wie gewünscht. In den beiden Webkit-Browsern ist diese Zeile Code dann natürlich überflüssig.
footer {
display:block;
}
footer mit display:block funktioniert, nicht aber wenn eine breite vorhanden. ein div dagegen bringt das gewünschte resultat. hab ich was übersehen?
footer {
display: block;
width: 960px;
height: 200px;
margin: 0 auto;
background: orange;
}
Ich habe in meinem Blog einige HTML 5 Tags auf display: block gesetzt.
Damit kommt ich im moment ganz gut zurecht.
article, aside, figure, figcaption, footer, header, hgroup, nav, section {display:block;}
Hast du schon ein Blockelement in einen a Element gepackt und getestet wie die Browser darauf reagieren?
Arbeitest du schon „aktiv“ damit oder ist das mehr Spielwiese bzw. auch Projektabhängig?
Wenn ich da an die Zielgruppen meiner Kunden denke, ist HTML5 und CSS3 ein verschwommener, kleiner dunkler Fleck am Ende eines langen Projekts… Amen! ;)
@Flowsen: Das Redesign dieses Blogs wird aktuell komplett in HTML5 geschrieben. Allerdings habe ich hier natürlich eine optimale Zielgruppe dafür. Bei Kundenprojekten muss die Zielgruppe beobachtet werden. Hier verwende ich eher noch “normales” XHTML.
CSS3 setze ich bei meinem eigenen Blog sowie allen Kundenprojekten massiv ein – natürlich immer mit einem Fallback für ältere Browser.