[Résolu] Footer : Problème de Marge négative IE7

Bonsoir à tous.

J'ai à nouveau un soucis sur IE7.

En gros je remonte mon footer en utilisant les marges négatives (margin-bottom ou margin-top).
Dans IE7 l'image de background est coupé du coup par la div.

La solution qui fonctionne est de mettre la DIV BAS en position relative mais dans ce cas la ce n'est pas très propre et surtout les liens ne sont pas cliquables ...

Un exemple sera plus parlant et compréhensible
Ps : C'est encore en cours de Dév, donc ne faites pas attention au balises hx et le reste

Quelqu'un peut-il jeter un oeil ? Merci

CSS :

#global {
background-image: url(interne/background.jpg);
background-repeat:no-repeat;
background-position: 50% 0px;
}
#page {width:950px;margin:auto;}
/******* CONTENT *******/
#content {width:950px;}
/******* LEFT *******/
#left {
margin-top:5px;
float: left;
width: 658px;
color:#000000;
margin-left:30px;
margin-bottom:-100px;
}
/******* HAUT *******/
#haut {
height:62px;
width:658px;
background-image:url(interne/left-haut.png);
background-repeat:no-repeat;
}
/******* MILIEU *******/
#milieu {
width:658px;
min-height: 420px;
height:auto !important;
background-image:url(interne/left-milieu2.png);
background-repeat:repeat-y;
padding-top:40px;
float:left;
}
/******* BAS *******/
#bas {
height:194px;
width:732px;
margin-left:-73px;
background-image:url(interne/left-bas.png);
background-repeat:no-repeat;
float:left;
}
/******* RIGHT *******/
#right {
float: right;
margin-right:30px;
width: 215px;
}
/******* FOOTER *******/
#footer {
clear: both;
background-image:url(interne/foot.png);
background-position:0 125px;
background-repeat:repeat-x;
}
#foot {
width:950px;
margin:auto;
height:164px;
background-image: url(interne/footer.png);
background-repeat:no-repeat;
}
/******* FOOT1 *******/
.foot1 {
padding-top:30px;
height: 80px;
margin-left:-110px;
}
/******* FOOT2 *******/
.foot2 {
padding-top:50px;
margin-left:-200px;
height:20px;padding-bottom:20px;
}
.foot2 ul { margin:auto; width:647px;}
.foot2 li {float:left;}
/******* PAIEMENT *******/
.paiement {
height: 23px;
width:250px;
float:left;
margin-left:350px;
}
.paiement li {display:inline;padding-left:5px;}
/******* LINKS *******/
.links {
float:left;
text-align:center;
width:950px;
margin-top:30px;
}
.links li {display:inline;}

HTML :

<div id="content">

<div id="left">

<div id="haut"></div>

<div id="milieu"></div><!--MILIEU-->

<div id="bas"></div><!--BAS-->

</div><!--LEFT-->

<div id="right"></div><!--RIGHT-->

</div><!--CONTENT-->


</div><!--PAGE-->


<div id="footer">
<div id="foot">

<div class="foot1"></div>

<div class="foot2"></div>

</div><!--FOOT-->
</div><!--FOOTER-->

</div><!--GLOBAL-->

Modifié par yank (10 Jun 2010 - 22:57)

Résolu :

DIV BAS en position relative + DIV FOOT 1 en relative + z-index.

Merci quand même ...