IE6: Overflow:visible + background

[elektrowolf]

Hi!

Folgendes Beispiel:
HTML:

    <div id="container">
      <div id="item">
        Blablubb
      </div>
      Lorem ipsum, dolor sit amet, consectues, bla diba dum dum dum will gum gum.
    </div>

CSS:

      #container {
        background:red;
        overflow:visible;
        width:200px;
        height:400px;
      }
      
      #item {
        width:250px;
        background:green;
      }

Im Firefox ragt der grüne Hintergrund (richtig) aus dem roten hervor, im IE6 wird der rote Hintergrund (nicht der Inhalt) vergrößert (falsch). Gibts irgendeinen Fix für dieses Problem?

Grüße, eWolf

 

[neuroleptika]

Das ist der Expanding Box Bug (IE5-6).
overflow:visible; hilft da leider nicht (visible ist der default-Wert).
Float für #item würde helfen. Allerdings darf das Elternelement dann kein Layout haben
(Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung).
Width müßte also ein weiteres Element übernehmen:

[COLOR="#8b0000"][B]<div id="alles">[/B][/COLOR]
 <div id="container">
      <div id="item">
        Blablubb
      </div>
      Lorem ipsum, dolor sit amet, consectues, bla diba dum dum dum will gum gum.
    </div> 
[COLOR="DarkRed"][B]</div>[/B][/COLOR]

css:

#alles {
[COLOR="DarkRed"][B]width: 200px;[/B][/COLOR]
}

 #container {
background:red;
[COLOR="DarkRed"][B]       /* width:200px;  entfernen*/
       /* height:400px; entfernen*/[/B][/COLOR]
      }

#item {
width:250px;
background:green;
}

* html #item {
[COLOR="#8b0000"][B]float: left;[/B][/COLOR]
}

Brauchst du height für #item wirklich?
oder war das nur zur Veranschaulichung?

Ansonsten height: 400px; und faux columns für #alles (Grafik: 200px, red)