kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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;
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Flowsen

    Verfasst am 8. März 2011 um 14:18 Uhr.

    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! ;)

    • Jonas Hellwig

      Verfasst am 8. März 2011 um 15:07 Uhr.

      @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.

  2. Ratze

    Verfasst am 28. März 2011 um 8:48 Uhr.

    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?

  3. noslon

    Verfasst am 14. April 2011 um 16:19 Uhr.

    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;
    }

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.