✔ [IE6] Blockelemente untereinander: Lücke trotz margin: 0px

[Chosi]

Hallo zusammen,

ich habe gerade ein kleines CSS Problem, bei dem ich einfach nicht weiterkomme.
Eigentlich geht es nur darum, zwei Blockelemente untereinander zu platzieren. Genauer geht es um ein Bild mit Rahmen und ein Div mit Hintergrundgrafik.
Diese sollen ohne lückenlos unterainander dargestellt werden. margin: 0px

FF, IE8, Safari und Opera tun dies auch, im IE6 klafft jedoch eine Lücke zwischen den Elementen, die ich einfach nicht wegbekomme.

[...]
<div id="content_border">
  <img alt="2" height="321" src="/images/splash/2.png?1240680904" width="849" />
  <div id="shadow_head"></div>
[...]
</div>
[...]

[...]
div#content_border
{
  width: 875px;

  margin: auto;
  border: 0px;
  padding: 11px 11px 0px 11px;

  background-image: url(/images/head_border.gif);
  background-repeat: no-repeat;
  
  line-height: 0px;
}

div#content_border img
{
  margin: 0px;
  border: 13px solid #FFF;
  padding: 0px;
}

div#shadow_head
{
  display: block;
  
  width: 875px;
  height: 8px;
  
  margin: 0px;
  border: 0px;
  padding: 0px;
  
  background-image: url(/images/shadow_head.png);
  background-repeat: no-repeat;
}
[...]

Hat jemand eine Idee, woran das liegen könnte? Habe gleiches Phänomen auch noch ein weiteres mal auf der Seite mit zwei Divs.

Danke & Gruß

 

[Maik]

Hi,

der IE6 sieht grundsätzlich in Elementen einen Platzhalter für Text vor, dessen Zeilenhöhe sich an der globalen Schriftgröße orientiert, und die in deiner Seite höher ausfallen dürfte, als die height:8px-Deklaration für #shadow_head, was die Lücke zum nachfolgenden Blockelement zur Folge hat, visuell hervorgehoben durch das nicht zu wiederholende Hintergrundbild.

Lösung in diesem Fall:

div#shadow_head
{
  display: block;
 
  width: 875px;
  height: 8px;
 
  margin: 0px;
  border: 0px;
  padding: 0px;
 
  background-image: url(/images/shadow_head.png);
  background-repeat: no-repeat;

  overflow: hidden;
}

... damit dürfte sich dann auch das Phänomen aus der anderen Seite vertreiben lassen

mfg Maik

 

[Chosi]

Hi Maik,

hat leider nicht funktioniert. Hatte anfänglich auch eine ähnliche Vermutung und hatte daher im Vorfeld schon versucht, font-size und line-height im entsprechenden Element auf 0px zu setzen... Auch ohne Erfolg ...

 

[Maik]

Hi,

seltsam, bei mir führt der Vorschlag zum erwünschten Ergebnis, dass die festgelegte Blockhöhe vom IE6 korrekt interpretiert wird, und hat in der Vergangenheit anderen Usern mit demselben Problem auch weitergeholfen.

Gibt es denn die Seite irgendwo in vollem Umfang zu begutachten?

mfg Maik

 

[Maik]

Dann bleibt in deinem gezeigten Quellcodeauszug nur noch das Grafikelement innerhalb von #content_border als Fehlerquelle übrig, wo der IE6 fälschlicherweise die "Whitespaces" (Zeilenumbrüche, Tab-Einrückungen) vor und hinter dem <img>-Tag interpretiert.

In diesem Fall hilft es, das Inline-Element mit "Block-Level-Charakteristika" auszustatten:

div#content_border img
{
  margin: 0px;
  border: 13px solid #FFF;
  padding: 0px;
  display: block;
}

mfg Maik

 

[Chosi]

Klasse, so funktioniert's

Besten Dank!