Darstellungsauffälligkeiten

[srob]

Hallo!

Ein kleines Projekt, an dem ich gerade arbeite, bereitet mir nach dem Durchformatieren mit CSS einiges Kopfzerbrechen; dabei habe ich im wesentlichen eine Darstellungsauffälligkeit zu kurieren:

Im Dokument reihen sich einige divs aneinander an ->

<div id="boxmenu">blahblah</div>

<div id="boxmain">
    <div id="maincontent">
      <h1><span>Titel 1</span></h1>
    </div>
  </div>

<div id="boxbottom">blahblah</div>

Das span innerhalb des h1 ist unsichtbar, um das Hintergrundbild des h1 anzuzeigen. h1 hat einen Abstand von 20px zum oberen Rand von maincontent. Nun möchten die gecko-basierten Browser, mit denen ich teste (Mozilla 1.2, Netscape 7, FireFox 0.9.1), mich gerne damit ärgern, daß sie die Hintergrundfarbe des divs maincontent bis zum Beginn des h1 nicht auf dem Bildschirm darstellen (siehe http://www.plaidter-geschichtsverein.de/test_ie.html -> fetter weißer Balken unterhalb des Menüs)[1]. Inzwischen habe ich soviel herumexperimentiert, daß ich langsam den Wald vor lauter Bäumen nicht mehr sehe... Das Gecko-Problem läßt sich beseitigen, wenn das betroffene div ein border besitzt http://www.plaidter-geschichtsverein.de/test_moz.html; dann allerdings flutscht im IE das h1 nach links und oben - sprich: die margins des h1 interessieren den IE dann nicht mehr!

Ich habe auch - nur so zum Spaß - mit overflow experimentiert; wenn ich maincontent ein overflow:hidden verpasse, dann ist auch ohne border im FireFox alles in Ordnung, die anderen Geckos scheren sich nicht darum... Bei overflow:auto stimmen Abstände und Hintergrund in allen Browsern, allerdings zeigen die Geckos dann das div maincontent mit Scrollbars. Was ist da los? Bin ich selber schuld? In jedem Fall bin ich ratlos und möchte keine komplexe Gecko-Sonderlödung einbauen. Was würdet Ihr machen?

hth Robert

[1] Für gewöhnlich erledige ich derartige Fälle (sofern ich keinen Fehler bei mir vermute) mit folgender Hypothese: Der Anwender des Browsers x dokumentiert durch seine Nutzung von x, daß er die Seite in einer von Ihrer eigentlichen Form abweichenden Weise zu sehen wünscht - und bekommt damit, was er verlangt. Da mir die kosmetische Störung im vorliegenden Fall als zu schwerwiegend erscheint, soll diesmal ein anderer Weg eingeschlagen werden.

[Cheatah]

Hi,

Nun möchten die gecko-basierten Browser, mit denen ich teste (Mozilla 1.2, Netscape 7, FireFox 0.9.1), mich gerne damit ärgern, daß sie die Hintergrundfarbe des divs maincontent bis zum Beginn des h1 nicht auf dem Bildschirm darstellen

informiere Dich über Collapsing Margins.

Das Gecko-Problem läßt sich beseitigen, wenn das betroffene div ein border besitzt

Richtig.

dann allerdings flutscht im IE das h1 nach links und oben - sprich: die margins des h1 interessieren den IE dann nicht mehr!

Das kann ich hier (IE 5.0, Win 2000) nicht bestätigen.

Cheatah

[srob]

Aye!

informiere Dich über Collapsing Margins.

Aha - die Dinge wollen einen Namen haben! Wundersamerweise bin ich vorher nie darüber gestolpert... Ich habe eine interessante Untersuchung zu dem Thema im Blog von Andy Budd gefunden http://www.andybudd.com/archives/2003/11/no_margin_for_error/ - auch wenn keiner der genannten Ansätze allein das Problem in allen von mir betrachteten Browsern löst. Die Kombination mehrerer Ansätze (position auf relative;floaten nach links;Abstand zum linken Rand nicht via margin sondern mit left) bringt mir ubiquitäre Heilung:

#maincontent h1{ position:relative;left:234px;float:left;height:36px;margin:20px 0px 0px 0px; }

Das folgende Element wird dann ge-clear-t. So gehts - wo käme ich nur hin, wenn ich nicht mit größter Servilität Deinen Imperativen folgte:) Vielen Dank! Jetzt muß ich es nur noch für die Seite umsetzen...

Das kann ich hier (IE 5.0, Win 2000) nicht bestätigen.

Im 5er bei mir auch nicht, bei 6.0 schon.

hth Robert

[Cheatah]

Hi,

Aha - die Dinge wollen einen Namen haben!

das hat schon Michael Ende gezeigt :-)

Wundersamerweise bin ich vorher nie darüber gestolpert...

Collapsing Margins sind bei den meisten Anwendungen von CSS ein verhältnismäßig seltenes Phänomen, bzw. wenn sie auftreten, liefern sie "quasi zufällig" exakt das, was man erwartet hätte. Ich bin auch erst recht spät darauf gestoßen.

Ich habe eine interessante Untersuchung zu dem Thema im Blog von Andy Budd gefunden

Danke für den Link.

ubiquitäre Heilung:

Und danke für die Erweiterung meines passiven Wortschatzes :-)

wo käme ich nur hin, wenn ich nicht mit größter Servilität Deinen Imperativen folgte:)

Hehe, Du würdest meine Peitschen spüren: einsilbige Antworten und RTFMs ;-)

Im 5er bei mir auch nicht, bei 6.0 schon.

Microsoft hat zwischen den Versionen nur die Bug-Schaufel angesetzt.

Cheatah