Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. noslon
    schrieb am 14.04.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;
    }

    Antworten
  2. Ratze
    schrieb am 28.03.2011 um 08: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?

    Antworten
  3. Flowsen
    schrieb am 08.03.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! ;)

    Antworten
    • Jonas Hellwig
      schrieb am 08.03.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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →