Donner de la hauteur aux DIVs positionnés de façon absolue dans IE6

Question

Il est presque 2010 et j'ai toujours affaire à des bogues IE6. soupir. Donc, voici un nouveau (pour moi) que j'ai de la difficulté à trouver une réponse via google. Je crée un DIV avec une ombre intérieure. Le div doit être flexible en largeur et en hauteur. Pour accomplir ceci, je donne à la DIV une image de fond de l'ombre intérieure. Ensuite, j'ajoute 3 divs supplémentaires absolument positionnés à l'intérieur des 3 autres coins (en haut à droite, en bas à droite, en bas à gauche) et je leur donne chaque hauteur pour qu'ils se chevauchent.

Cela fonctionne très bien dans tous les navigateurs sauf (sans surprise) IE6. Dans IE6, les divs absolument positionnés n'ont pas de hauteur. J'ai essayé d'utiliser le zoom: 1 pour déclencher la mise en page, mais cela ne l'a pas fait. Quelqu'un connait une solution à cela?

<div class="rounded" style=" 
    width: 80%; 
    max-width: 950px; 
    margin: 10%; 
    height: auto; 
    background: url('images/bgnd-shadowbox-dark.gif'); 
    position: relative; 
"> 

    <div class="rounded" style=" 
     width: 50%; 
     height: 75%; 
     position: absolute; 
     top: 0px; 
     right: 0px; 
     background: yellow url('images/bgnd-shadowbox-dark.gif') top right; 
     "> 
    </div> 
    <div class="rounded" style=" 
     width: 60%; 
     height: 30%; 
     position: absolute; 
     bottom: 0px; 
     right: 0px; 
     background: orange url('images/bgnd-shadowbox-dark.gif') bottom right; 
     "> 
    </div> 
    <div class="rounded" style=" 
     width: 50%; 
     height: 25%; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     background: red url('images/bgnd-shadowbox-dark.gif') bottom left; 
     "> 
    </div> 


    <div style=" 
      position: relative; 
      border: 3px solid green; 
      margin: 3em; 
      "> 

     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 
     <p>hello world</p> 

    </div> 
</div> 

MISE À JOUR: Pour clarifier la question (puisque je pense que la question du coin est un hareng rouge): Comment peut-on avoir un intérieur relativement positionné DIV position absolue div et ont que DIV imbriqué adhèrent à un attribut de hauteur de pourcentage dans IE6?

MISE À JOUR 2: Plus d'infos: Si le conteneur div reçoit une hauteur explicite, cela fonctionne. Le problème est lorsque vous voulez que la hauteur du conteneur div soit basée sur la hauteur de div relativement positionnée. Il semble que IE6 ne peut tout simplement pas comprendre cela.

Answer 1

Peut-être que je manque quelque chose sur la construction de votre image, mais pourquoi ne pas simplement utiliser le positionnement sur les 3 coins.

.corners .right-top {top: 0px; right: 0px;} 
.corners .bottom-top {bottom: 0px; right: 0px;} 
.corners .bottom-left {bottom: 0px; left: 0px;} 

Answer 2

cela a fonctionné pour moi, j'ai eu un & nbsp à l'intérieur du div vide. dans le css j'ai utilisé les éléments suivants

*height:1px; 
*padding:2px 0px; 
*line-height:4px; 

'*' dit son seul reconnu par IE6 la hauteur div est 4px.