[ résolu ] Décalage de DIV entre FF et IE

Bonjour à tous,

j'ai un décalage récurent sous IE alors que tout va bien sous FF et Safari et je ne vois pas d'où ça vient.


A.

Le code HTML est le suivant

<!--- milieu1 -->
<div id="milieu1">

<!-- M1haut -->
<div id="M1haut"></div>
<!-- fin de M1haut -->

<!-- M1milieu -->
<div id="M1milieu">
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
  <tr>
    <td><h1>INTITUTLÉ</h1></td>
  </tr>
  <tr>
    <td><h2>Heures pr&eacute;vues /00,00 $</h2></td>
  </tr>
  <tr>
    <td><img src="design/Layout/Tableau/MenuMilieu/Barre_temps_vert.png" width="11" height="9" /></td>
  </tr>
  <tr>
    <td><img src="design/Layout/Tableau/MenuMilieu/Barre_argent_jaune.png" width="9" height="9" /></td>
  </tr>
  <tr>
    <td><h2 align="right">Heures consomm&eacute;es / 00,00 $</h2></td>
  </tr>
</table>
</div>
<!-- fin de M1milieu -->

<!-- BAS -->
<div id="M1bas"></div>
<!-- fin de BAS -->

</div>
<!-- fin de milieu1 -->

et les CSS

#milieu1 {
width:780px;
margin:auto;
padding:0;
}

#M1haut {
position:relative;
float:left !important;
width:780px;
height:10px;
background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_HAUT.jpg) no-repeat;
background-position:bottom left;
}

#M1milieu {
float:left;
width:780px;
margin:0;
padding:0;
background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_MILIEU.jpg) repeat-y;
background-position:top;
}

#M1bas {
float:left;
margin:0;
padding:0;
width:780px;
height:13px;
background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_BAS.jpg) no-repeat;
background-position:top left;
}

Merci de votre aide et une bonne journée à tous,
Modifié par Fugugirl (21 Nov 2006 - 13:54)

Personne n'a une petite idée ??? Je désespère, j'ai essayé plein de trucs mais je ne trouve pas....

Yop !

Heu déjà tu as bien tout ton html dans une balise body ? Avec pour CSS pour le body ?
body {
margin: 0px;
padding: 0px;
text-align:center;
}


pourquoi mettre tes éléments en float left ? Laisse les dans le flux ça ne sert à rien ! Essaye comme ça :

#milieu1 {

width:780px;

margin-left: auto;
margin-right: auto;
text-align:left;

padding:0;

}



#M1haut {

width:780px;

height:10px;

background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_HAUT.jpg) no-repeat;

background-position:bottom left;

}



#M1milieu {


width:780px;

background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_MILIEU.jpg) repeat-y;

background-position:top;

}



#M1bas {

width:780px;

height:13px;

background:url(design/Layout/Tableau/MenuMilieu/miniTabduree_BAS.jpg) no-repeat;

background-position:top left;

}

Modifié par bout-de-papier (21 Nov 2006 - 11:10)

Je cours essayer

Je te tiens au courant.

Merci.

Aurélia.

Alors ta solution est bonne et j'en ai une autre aussi.

En fait mes commentaires font buguer IE... mais tu as raison je n'ai pas de raison de mettre mes éléments en float... a piori sans les float et avec commentaires ça passe, et sans commentaires et avec float ça passe.

Merci de ton aide

Bonne journée,
Aurélia.

Mais de rien ma p'tite dame !

Et merci de me conforter dans mon idée que je suis génial !

Par contre mes chaussures rétrécissent de jour en jour...