Bug div en position absolute qui disparait avec IE7

Aug 26, 2009 10:22 · 161 words · 1 minute read Bug IE7 CSS Design HTML

Vous avez un problème avec une div en position:absolute qui disparait sous IE7, j’ai probablement la solution pour vous :

Voici le code orignal HTML :

    ...
    <div id="content">contenu de la page</div>
    <div id="top">contenu en haut</div>
    <div id="footer">contenu du footer</div>
    ...

Voici le CSS :

#content {
    clear:none;
    float:right;
    width:824px;
}
#top {
    margin-left:470px;
    position:absolute;
    top:196px;
    width:517px;
}
#footer {
    clear:both;
    padding:20px 10px 10px;
    width:980px;
}

Ici c’est le div top qui pose soucis, c’est le seul a avoir un positionnement absolu sur la page. Le problème est qu’Internet Explorer 7 n’aime pas avoir un div positionné en absolu à coté d’un élément ayant une propriété float. Il suffit simplement d’intercaler une div vide entre les deux pour le problème soit résolu, je n’ai pas trouvé de solution plus propre pour résoudre le problème.

Voici la solution pour le cas évoqué plus haut :

    ...
    <div id="content">contenu de la page</div>
    <div id="bugIE7"></div>
    <div id="top">contenu en haut</div>
    <div id="footer">contenu du footer</div>
    ...