[probleme] une image qui ce place mal sous IE

salut, voila j ai mon image qui ce place mal sous IE :

http://www.roxor-tournois.fr/tad/index.php

j ai mi en .php car j ai des div dans une include pour les 2 menus

le code css :

body
{
width: 1000px;
height: 100%;
margin: auto;
background: #FFFFFF;
font-size: 10px;
font-family: Verdana;
background-color: black;
}


#header
{
   width: 1000px;
   height: 235px;
   background-image: url("images/index_01.gif");
 }
 
/*menu gauche*/
 
 #menu_principal

{
   width: 205px; 
   float: left;
   background-repeat: repeat-y;
}

.menu_milieu
{
 background-image : url("images/index_11.gif");
 width: 205px;
}

.menu_principal_haut

{
   background-image: url("images/index_02.gif");
   height: 28px ;
   width: 205px;
}


.menu_team
{
 background-image : url("images/index_03.gif");
 width: 205px;
 height: 30px;
}

.menu_login
{
 background-image : url("images/index_04.gif");
 width: 205px;
 height: 31px;
}

.menu_stats

{
 background-image : url("images/index_05.gif");
 width: 205px;
 height: 33px;
}
.menu_fin1

{
 background-image : url("images/index_06.gif");
 width: 205px;
 height: 58px;
}
#menu_fin2

{
 background-image : url("images/index_07.gif");
 width: 205px;
 height: 44px;
 background-repeat: repeat-y;
}

/* milieu haut gauche */
#milieu_left

{
 width: 271px;
 float: left;
 background-repeat: repeat-y;
 font-size: 13px;
 font-family: Verdana;
 
 
}

.milieu_last_news_haut
{
 background-image : url("images/index_08.gif");
 width: 271px;
 height: 29px;
}

.milieu_last_news_middle
{
 background-image : url("images/index_09.gif");
 width: 271px;
 height: 125px;
 
}

.milieu_last_news_bas

{
 background-image : url("images/index_10.gif");
 width: 271px;
 height: 16px;
}

/*milieu haut droite*/

#milieu_right

{
 width: 270px;
 float: left;
 background-repeat: repeat-y;
 font-size: 13px;
 font-family: Verdana;
 float: left;
 
}

.milieu_last_wars_haut
{
 background-image : url("images/index_12.gif");
 width: 270px;
 height: 29px;
}

.milieu_last_wars_middle
{
 background-image : url("images/index_09.gif");
 width: 270px;
 height: 125px;
 
}

.milieu_last_wars_bas

{
 background-image : url("images/index_10.gif");
 width: 270px;
 height: 16px;
}

/*milieu */

#milieu
{
 width: 541px;
 float: left;
 background-repeat: repeat-y;
}

.milieu_haut
{
 background-image : url("images/index_13.gif");
 width: 541px;
 height: 30px;
}

.milieu_continue

{
 background-image : url("images/index_14.gif");
 width: 541px;
}

/* menu droit*/
#menu_principal_droit

{
   width: 254px; 
   float: right;
   background-repeat: repeat-y;
}

.menu_membres_blanc
{
   background-image: url("images/index_18.gif");
   width: 254px;
}

.menu_membres_haut_droit

{
   background-image: url("images/index_15.gif");
   height: 36px ;
   width: 254px;
}

.menu_membres_photo
{
   background-image: url("images/index_16.gif");
   height: 201px ;
   width: 254px;
}

.menu_sponsor_droit
{
 background-image : url("images/index_17.gif");
 width: 254px;
 height: 38px;
}

.menu_partenaire_droit
{
 background-image : url("images/index_19.gif");
 width: 254px;
 height: 46px;
}

.menu_server_droit

{
 background-image : url("images/index_20.gif");
 width: 254px;
 height: 39px;
}

.menu_server_continue_droit

{
 background-image : url("images/index_21.gif");
 width: 254px;
}

.menu_server_bas_droit

{
 background-image : url("images/index_22.gif");
 width: 254px;
 height: 36px;
}

.menu_fin1_droit

{
 background-image : url("images/index_23.gif");
 width: 254px;
 height: 56px;
}

#menu_fin2_droit

{
 background-image : url("images/index_24.gif");
 width: 254px;
 height: 44px;

}

/* bas */

#footer

{
   width: 1000px;
   height: 20px;
   background-image: url("images/index_26.gif");
   float: left;
   
}


/* footer */

#footer

{
   width: 1000px;
   height: 37px;
   background-image: url("images/index_25.gif");
   float: left;
   
}

body {
background-image: url("images/index_26.gif");
background-position:center;
background-repeat:repeat-y;
}

Modifié par gunnerkiller (29 Aug 2005 - 17:37)

Il y a beaucoup de <div> dans ta page (j'en ai compté 35).

On dirait un tableau, mais avec des <div>

Les titres de menus en background-image seulement, c'est pas très accessible.

Ça ne règle pas ton problème, mais il fallait que je te le dise.
S'il n'y avait pas seulement des <div> dans ta page, on s'y retrouverait mieux.

Un titre => <h1> à <h6>
Un paragraphe => <p>
etc.

Arggh !

XHTML 1.1 strict, ça n'existe pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Un peu de lecture :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

Stephan a écrit :
Arggh !

XHTML 1.1 strict, ça n'existe pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Un peu de lecture :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

:-° erreur de frappe ^^

sinon pour mon probleme sous IE comment faire ?

sinon pour les div oui il en a beaucoup mais bon j ai trouver que cette solution sinon sa marché vraiment pas
ps: desoler pour la frayeur ^^
Modifié par gunnerkiller (29 Aug 2005 - 18:46)

salut,
dans ta class

.milieu_last_news_middle
{
 background-image : url("images/index_09.gif");
 width: 271px;
 height: 125px;
 
}

271+271 = 542 et pas 541 comme le reste de tes elements centraux, ce px supplementaire fait descendre ton elements de droite jusqu'a ce qu'il trouve suffisament de place (sous IE) pour se positionner.
a plus

gunnerkiller a écrit :

:-° erreur de frappe ^^

Ah non ! La DTD est fausse point à la ligne.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/[#red][b]xhtml11[/b][/#]/DTD/[#red][b]xhtml11[/b][/#].dtd">

Ça c'est la DTD XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Pour ton problème, Laurent Denis t'as donné une partie de la réponse :

Laurent Denis a écrit :

- CSS avec un double float gauche-droite qui te complique la vie, et multiplie les prétextes à bug d'IE. Un simple float uniquement sur le contenu et un menu laissé en flux te donneront le même résultat beaucoup plus facilement.

http://forum.alsacreations.com/topic.php?fid=4&tid=5187#p45275

Je te conseille fortement de revoir ton positionnement.

En gros, tu as besoin d'une mise en page trois colonnes :

#gauche { 
   float: left; 
   width: value; 
}
#droite { 
   float: right; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>
<hr />

Et pour la partie centrale :

div.centregauche { 
   float: left; 
   width: 50%; 
}
div.centredroite { 
}
hr { 
   clear: both; 
   padding: 0; 
   margin: 0; 
   display: none; 
}

<div id="centre">
 <div class="centregauche"></div>
 <div class="centredroite"></div>
 <hr />
 <div></div>
</div>

Tu ajoutes entête et pied de page puis ça roule.

Tu peux aussi envisager la variante suivante :

#gauche { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: value; 
}
#droite { 
   position: absolute; 
   top: 0; 
   right: 0; 
   width: value; 
}
#centre { 
   margin-right: value; /* largeur de la colonne droite */
   margin-left: value; /* largeur de la colonne gauche */
}

Et les possibilités suivantes dans le (X)HTML

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>

<div id="gauche"></div>
<div id="centre"></div>
<div id="droite"></div>

<div id="droite"></div>
<div id="gauche"></div>
<div id="centre"></div>

<div id="droite"></div>
<div id="centre"></div>
<div id="gauche"></div>

<div id="centre"></div>
<div id="gauche"></div>
<div id="droite"></div>

<div id="centre"></div>
<div id="droite"></div>
<div id="gauche"></div>

Ça te permet d'avoir plus de contrôle sur l'ordre de présentation.

Voilà. Mais j'insiste, faut revoir le positionnement global de ta page, sinon t'as pas fini avec les problèmes de positionnement.
Modifié par Stephan (29 Aug 2005 - 19:52)

À la lumière des explications que je viens de te donner, tu devrais en déduire au moins ceci :

#milieu
{
width: 541px;
margin-right: 254px;
margin-left: 271px;
background-repeat: repeat-y;
}

stephan je vais revoir avec tout ce que tu as dis.

thx gcyrillus