IE6, Position absolue, Largeur 100

Question

Un autre problème avec IE6 C'est mon code :

HTML :

<div class="a">
    <div class="b">
        <div class="c">
            <span style="display:block; background:yellow; height: 170px; width:100%;"></span>
            <div class="d">
Hello World!            </div>
        </div>
    </div>
</div>

CSS :

.a{
    background: black;
    float: right;
    height: 200px;
    margin: 0 2px;
    width: 200px;
}

.b{
    padding: 15px 10px;
}

.c{
    position: relative;
}

.d{
    background-color: green;
    bottom: 0;
    color: white;
    opacity: 0.85;
    position: absolute;
    left: 0;
    width: 100%;
    zoom: 1;
}

.e{
    font-weight: bold;
    padding: 7px;
}

( démo en direct sur jsfiddle.net ).

Vérifiez-le dans les navigateurs modernes et IE6. Vous voyez quelque chose comme ça :

Comment y remédier ?

Answer 1

Essayez ceci :

HTML :

<div class="a">

            <span style="display:block; background:yellow; height: 170px; width:100%;"></span>
            <div class="d">
Hello World!            </div>

</div>

CSS :

.a{
    border: 1px solid black;
    border-width: 15px 10px;
    height: 170px;
    margin: 0 2px;
    width: 180px;
    position: relative;
    float: right;
}
.d{
    background-color: white;
    bottom: 0;
    color: black;
    opacity: 0.85;
    position: absolute;
    left: 0;
    width: 100%;
}

.e{
    font-weight: bold;
    padding: 7px;
}