Autor |
Nachricht |
Kai.S
Threadersteller
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht:
|
Verfasst Do 30.08.2012 20:15
Titel HTML + CSS: Komischer Rand im BODY - Bug? |
|
|
Hey Leute,
ich bastel grad an einer neuen Seite und hab einen total merkwürdigen Fehler, den ich beim besten Willen nicht nachvollziehen kann
Egal welche Seite man aufruft, z.B.:
http://wordpress.synektar.de
http://wordpress.synektar.de/leistungen/
ganz unten ist immer ein Abstand zum Content, in dem die Hintergrundgrafik vom <body> zu sehen ist.
Kann mir jemand sagen, wie ich den weg bekomme?
Vielen Dank!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 30.08.2012 21:55
Titel
|
|
|
Der Grund ist ein häufig gemachter Fehler mit Clearfix: Das generierte Element hat zwar height: 0;, aber der Punkt ist trotzdem da und hängt als overflow heraus, und zwar aus allen Vorfahren bis hoch zu body und html. Und korrekterweise lässt er sich auch erscrollen, und genau das erzeugt den Freiraum unterhalb des html-Elementes.
Abhilfe schafft ein zusätzliches overflow: hidden; für die Regel für .clearfix:after - das sägt alles weg, was aus dem betreffenden Pseudoelement mit der Höhe Null heraushängt, so dass es den gewünschten Effekt bekommt.
font-size: 0; kannst Du natürlich auch noch dazugeben, aber das ist mehr aus "Volles Programm"-Gründen, denn bei Browsern mit eingestellter Mindestschriftgröße nützt es natürlich nix.
|
|
|
|
|
Anzeige
|
|
|
Kai.S
Threadersteller
Dabei seit: 20.12.2005
Ort: München
Alter: 41
Geschlecht:
|
Verfasst Do 30.08.2012 22:00
Titel
|
|
|
fett Mann! Vielen Dank,
da hab ich wohl nen veralteten clearfix Code erwischt!
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 30.08.2012 22:17
Titel
|
|
|
Es gibt sogar noch eine neuere, stark verkürzte Variante: http://nicolasgallagher.com/micro-clearfix-hack/
Wobei sie de facto keinen Vorteil bringt, außer einige Zeilen kürzer zu sein.
Interessant ist zwar display: table; (statt block) für :before, um unerwünschte collapsing margins zu verhindern (z.B. ein Element mit margin-top lässt sein Elternelement runterrutschen), aber mit dem Clearen hat das natürlich nichts zu tun, denn das passiert per :after und da macht block oder table keinen Unterschied.
Zuletzt bearbeitet von heiko_rs am Do 30.08.2012 22:18, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
HTML/CSS Problem mit <html><body> komischer Abstand unten
body soll 100% aber 20px rand
html/css - ie und body background
<html> größer als <body>?
HTML / CSS: Raster über gesamten Body Hintergrund
body {padding} und body{height:100%} möglich
|
|