[résolu] Nouveau problème d'alignement avec image

Bonjour !

J'ai un soucis concernant l'alignement d'une image : j'ai du incure l'image du tobbogan dans une div qui contient du texte pour que le site ressemble à quelque chose : en effet, même si j'attribue un float: left à cette image, la div "texte" refuse de se placer à gauche de l'espace vide.

J'ai donc du "ruser" pour placer le tobbogan à l'endroit désiré : en bordure du fond blanc. J'ai utilisé un margin négatif. Malheureusement, sous IE, la côté gauche de l'image ne s'affiche pas, et se cache sous les limites gauches de la DIV dans laquelle j'ai inclu cete image. L'idée est de trouver une parade à ce problème, mais pour le moment je ne vois pas de solutions.

Voici la page comportant le tobbogan : http://inconcevable.net/

DIV en question : image et texte

#corps1 {
background: url(images/fond.png) top left;
padding: 0 0 0 22px;
}

#menu1 {
padding: 0;
margin: 0 0 0 0;
float: left;
width: 150px;

}

img {
padding: 0px;
margin: 0px;
}



#image {
background: url(images/tobogan.png) no-repeat top left;
float: left;
height: 203px;
width: 203px;
margin: 0 0 0 -21px;
padding: 0;

}

#texte {
float: left;
width: 525px;
margin: 0 0 0 20px;
padding-right: 20px;
background-color: #FFF;
background: url(images/ombredroite.png) top right repeat-y;


}



#menu a {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
color: #f7c542;
line-height: 20px;
margin: 0;
padding: 0;

}

#menu a:hover {
color: #c00000;
background-color: #000;
background: url(images/menu1.png) left no-repeat;
}






.spacer {
  clear: both;
}




#ombre {
float: right;
width: 23px;

background: url(images/ombredroite.png) top right ;
margin: 0;
padding: 0;

}

#contmenu {

margin: 0px;
padding: 0px;
clear : both;
}

#ok {
clear: both;
}

#ombrehaut {
width: 565px;
height: 25px;
background: url(images/ombrehaut.png) no-repeat top right;
background-color: #cc1100;

margin: 0;


}


#ombrebas {
width: 565px;
height: 44px;

background: url(images/ombrebas.png) no-repeat top right;
background-color: #FFF;
clear: both;
margin: 0;
background-color: #cc1100;
padding : 0;

}
/* texte ---------------------------------------- */
#texte p {
padding: 0px;
margin: 0px;


text-indent: 10px;
}

#texte p:first-letter {
font-weight: bold;
font-size: 2em;
color: #c00000;
}

#menu {
margin: 0;
padding: 0;
font-weight: bold;
list-style: none;

}

/* header / footer ------------------------------ */
body {
font-family: arial, verdana, sans;
font-size: 0.8em;
background-color: #ede9d5;
}


#conteneur { /*pour centrer le tout*/
width: 777px;
margin: 0;
padding: 0;
position: absolute;
left: 50%;
margin-left: -388.5px;

}

#header {
background: url(images/banniere.jpg);
margin: 0;
padding: 0;
height: 161px;
}



#footer {
background: url(images/bas.png) no-repeat top;
height: 35px;

clear: both;
}

#footer1 {
font-size: 70%;
text-align: center;
}

J'espère que vous pourrez m'aider à trouver la parade
Modifié par Nitram (31 Mar 2006 - 22:25)

J'ai pas forcement assez de connaissance pour te trouver une solution rapidement mais hier j'avais un problème similaire.

En à peut près une petite demie heure j'ai trouver d'où venait le problème en appliquant des bordures de couleur differentes pour chacun de balise HTML qui etaient utilisée.

Il y a des chances pour que IE place les bords d'un <div> ou plusieur de façon incorect.

De mon coté j'ai penser à un truc... au lieu d'utiliser une marge négative de 21px, pourquoi n'essais tu pas d'utiliser un positionnement relative de 21px à gauche?

Merci percherie !
J'ai pu contourner le problème en cours grâce au mode de postionnement relatif, je ne m'étais jamas vraiment penché sur ce mode. Tout fonctionne parfaitement, maintenant.