nicht angemeldet
Wenn ich nachfolgendes HTML im Browser betrachte (Opera und Firefox sind sich in der Darstellung einig), beginnt die Seite oben mit einem weißen Rand (laut Firefly 21px), darunter beginnt das Bild - 256px hoch - wie bestellt, übermalt mit den Überschriften. Unter dem Bild dann »Text«. Entkommentiere ich die border-Angabe, rutscht das Bild und der Text die 21px hoch, heißt, das Bild beginnt ganz oben auf der Seite (so wie es auch sein soll), die Überschriften bleiben, wo sie sind (ok, sie werden 1px nach unten rechts verschoben - der Rahmen nimmt ja jetzt auch Platz weg - aber abgesehen davon bleiben sie, wo sie sind) - nur leider habe ich dann den Rahmen, den ich nicht will.
Kann mir hier einer erklären, warum?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<style>
body { margin: 0px; }
.top {
background-image:url("bild.png"); height: 256px;
/* border: 1px dashed silver; */
}
</style>
<div class="top"><h1 style="text-size:100px">Hauptüberschrift</h1><p style="text-size=50px">Unterüberschrift</p></div>
<div class="middle">Text</div>
PS: Mich interessieren keine Work Arounds, ich habe bereits herausgefunden, dass ein h1 { margin: 0px; padding: 21px 0px; } das Problem löst, aber ich raff's net. Warum?
PPS: Ja, ich weiß, dass das ein Tagsoup und kein HTML ist, das ist eine extrem runter gestrippte Version der Ursprungsdatei, die das Problem gerade eben noch reproduziert.
Matthias Apsel
Gunnar Bittersmann
Der Martin