Grosd probleme de compatibilité IE [Résolu]

Question

prelude

24 Nov 2008 à 13:01

Salut à tous,

Voilà, je viens de finir plus ou oins mon site en XHMTL CSS. Il fonctionne parfaitement sur firefox et safari (je suis un utilisateur mac Smiley lol

), mais aujourd'ui, je viens de la tester sur IE, et là: CATASTROPHE!!!! mes balises "div" sont toutes décalées tout en bas a droite de l'écran.
Est ce que quelqu'un peut me dire si quelque chose ne va pas avec mon code?
Ce serait super cool:

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Design-pao</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design-pao_design-1.css" />
   </head>
   <body>
      <div id="en_tete">	
      		<p>
			</p>		

      </div>

      <div id="menu">
			<p><a href="index.html">ACCUEIL</a><br />
			<br />
			<a href="logos.html">IDENTITÉS</a><br />
			<a href="print_charte.html">PRINT/CHARTES</a><br />
			<a href="web.html">WEB</a><br />
			<a href="campagnes.html">CAMPAGNES</a><br />
			<br />
			<a href="videos.html">VIDÉOS</a><br />
			<br />
			<a href="extras.html">EXTRA(S)</a><br />
			<a href="PP.html">PROJET PERSO</a><br />
			<br />
			<a href="profil.html">PROFIL</a><br />
			<a href="contact.html">CONTACT</a><br />
			<br />
			<a href="liens.html">LIENS</a><br />
			</p><br />
			
			
      </div>
      
	  <div id="corps_accueil">
	  		<p>
	  		
	  		</p>
			
			
      </div>
      
      <div id="pied_de_page">
      		<p>©2008 - TOUS DROITS RÉSERVÉS - GUY PAOLAGGI - DESIGN-PAO.COM
	  		</p>
			
			
      </div>
   
   </body>
</html>

CSS:


body
{
	background-image: url("images/bodyBG.jpg");
	background-repeat: no-repeat;
	background-color: #000000;
	background-attachment: fixed;
	
	width: 800px;
	
	margin-left: 300px;
	margin-top: 50px;
	margin-bottom: 20px;
	
	padding: 0px;
	
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
	font-size: 10px;
}
#en_tete
{
	background-image: url("images/enteteBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
  	width: 700px;
  	height: 120px;
  	
   	margin-top: 100px;
   	margin-bottom: 0px;
   	margin-left: 400;
   	margin-right: auto;
}
#menu
{
   	float: left;
   	position:relative;
   	
  	width: 120px;
  	height: 2000px;
  	
   	background-color: white;
   	
   	margin: 0px;
   	margin-left: auto;
   	margin-right: auto;
   	margin-top: auto;
}
#menu p
{
   	padding-top: 30px;
   	padding-left: 15px;
   	padding-bottom: 50px;
}
#menu a
{
   	text-decoration: none;
   	color: #838282;
}
#menu a:hover
{
    color: white;
    background-color: red;
}
#corps_accueil
{
	background-image: url("images/corpsBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	position: absolute;
	
	width: 580px;
	height: 2000px;
	
	padding: 0px;
	margin: 0px;
   	margin-left: 120px;
   	margin-right: auto;
   	margin-top: auto;
   	margin-bottom: 0px;
   
}
#corps_accueil p
{
   	padding-top: 30px;
   	padding-left: 90px;
   	padding-bottom: 50px;
}
#corps_accueil a
{
   	text-decoration: none;
   	color: #838282;
   	
   	position: absolute;
   	margin: 0px;
}
#corps_accueil a:hover
{
    color: white;
    background-color: red;
}
#corps_accueil p .titre
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: #b0abad;
}
#corps_accueil p .titre1
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: red;
}
#corps_accueil p .titre2
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 15px;
   	color: #847e80;
}
#corps_accueil p .switch
{
	padding-left: 130px;
   	font-size: 8px;
}

#corps_logos
{
	background-image: url("images/corpsBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	position: absolute;
	
	width: 580px;
	height: 2000px;
	
	padding: 0px;
	margin: 0px;
   	margin-left: 120px;
   	margin-right: auto;
   	margin-top: auto;
   	margin-bottom: 0px;
   


}
#corps_logos p
{
   	padding-top: 30px;
   	padding-left: 90px;
   	padding-bottom: 50px;
}
#corps_logos a
{
   	text-decoration: none;
   	color: #838282;
}
#corps_logos a:hover
{
    color: white;
    background-color: red;
}
#corps_logos p .titre
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: #b0abad;
}
#corps_logos p .titre1
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: red;
}
#corps_logos p .titre2
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 15px;
   	color: #847e80;
}
#corps_logos p .switch
{
	padding-left: 130px;
   	font-size: 8px;
}

#corps_print_charte
{
	background-image: url("images/corpsBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	position: absolute;
	
	width: 580px;
	height: 2000px;
	
	padding: 0px;
	margin: 0px;
   	margin-left: 120px;
   	margin-right: auto;
   	margin-top: auto;
   	margin-bottom: 0px;
   
}
#corps_print_charte p
{
   	padding-top: 30px;
   	padding-left: 90px;
   	padding-bottom: 50px;
}
#corps_print_charte a
{
   	text-decoration: none;
   	color: red;
   	
}
#corps_print_charte a:hover
{
    color: white;
    background-color: red;
}
#corps_print_charte p .titre
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: #b0abad;
}
#corps_print_charte p .titre1
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 20px;
   	color: red;
}
#corps_print_charte p .titre2
{
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
   	font-size: 15px;
   	color: #847e80;
}
#corps_print_charte p .switch
{
	padding-left: 30px;
   	font-size: 15px;
   	color: #838282;
}
#corps_print_charte p .logo
{
	font-size: 10px;
}


#pied_de_page
{
	float: left;
	
   	width: 700px;
	height: 50px;
	
   	margin-bottom: 50px;
   	
   	background-color: white;
}
#pied_de_page p
{
   	text-align: center;
}

/* code popups*/

[code]
Modifié par prelude (25 Nov 2008 - 15:04)

Julien Royer

24 Nov 2008 à 14:49

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Quant à ton problème, il faut être très patient pour essayer de le résoudre vu la quantité de code. Smiley cligne

Il serait préférable d'isoler la partie qui ne fonctionne pas sous IE ou au moins de fournir un exemple en ligne.

Bonne continuation Smiley smile

prelude

24 Nov 2008 à 15:38

oups

désolé, je m'en occupe...
Par contre, je ne sais pas quoi isoler étant donné que je ne sais pas d'où vient le problème. ce que je peux faire, comme tu me l'as conseillé, c'est de fournir un lien, donc voilà:

www.design-pao.com

Bien sûr, à utiliser avec explorer pour voir le résultat du bug.

ok

Je cours éditer mon dernier message pour remédier à mon manque de courtoisie Smiley sweatdrop

(quel vilain je suis Smiley rolleyes

)

J'espère que vous pourrez m'aider

Smiley decu

heeeeelp!

Marie-Aude

25 Nov 2008 à 00:24

"A priori" et sans être allée regarder dans le code, ce genre de problème vient souvent avec une erreur dans les dimensionnements des boites (div).
Avec un pixel de différence, cela peut envoyer toute une zone "à droite"

ghost

25 Nov 2008 à 02:17

Salut,

Vite fait:
de dimensionner <body> ce n'est jamais bien bon...
ton positionnement en absolute du bloc corps_accueil me parait douteux...
Bonne continuation. Smiley cligne

prelude

25 Nov 2008 à 02:31

je vais tester ces deux trucs, je vous reviens pour vous informer...

merci beaucoup!!!!!! Smiley biggrin

prelude

25 Nov 2008 à 06:12

re salut,
bon ok,
Smiley murf

Alors j'ai essayé:

- de supprimer le dimensionnement <body>
- de supprimer le positionnement "absolute" pour le bloc corps_accueil
- de modifier le positionnement de "absolute" en "relative" (ça décale mon bloc légèrement vers le bas, du coup ça fait un espace entre l'entête du site et le corps_accueil)
- j'ai tenté de modifier les px pour le dimensionnement de l'ensemble des <div>

rien n'y fait... Smiley decu

Est ce que vous voyez autre chose?
Est ce que que je dois tout refaire? Smiley eek

J'y ai passé tellement de temps (comme tous les gens qui monte un site j'imagine ) Smiley lol

Inutile de vous dire que si qq1 arrive à trouver ce qui ne va pas....he's gonna be my saver!!!!!!!!!!!!!!!!!

Merci déjà et merci d'avance
Smiley smile

prelude

25 Nov 2008 à 06:56

Bon, je viens d'essayer d'écrire un nouveau CSS "plus propre" en suivant vos conseil
donc le voici:

CSS


body
{
	background-image: url("images/bodyBG.jpg");
	background-repeat: no-repeat;
	background-color: #000000;
	background-attachment: fixed;
	
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
	font-size: 10px;
	
	margin-left: 200px;
	margin-top: 100px;
}

#en_tete
{
	background-image: url("images/enteteBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	width: 700px;
  	height: 120px;
}

#menu
{
   	float: left;
   	position:relative;
   	
  	width: 120px;
  	height: 2000px;
  	
  	background-color: white;
}
#menu a
{
   	text-decoration: none;
   	color: #838282;
   	
   	padding-left: 15px;
}
#menu a:hover
{
    color: white;
    background-color: red;
}

#corps_accueil
{
	float: right;
	
	background-image: url("images/corpsBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	width: 580px;
	height: 2000px;
	
	position: absolute;
	margin-left: 120px;
}

#pied_de_page
{
  	background-color: white;
	
   	width: 700px;
	height: 50px;
	
	margin-top: 2000px;
}

avec ce code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Design-pao</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design-pao_design-2.css" />
   </head>
   <body>
      <div id="en_tete">	
      		<p>
			</p>		

      </div>

      <div id="menu">
      		<br />
      		<br />
      		<br />
			<a href="index.html">ACCUEIL</a><br />
			<br />
			<a href="logos.html">IDENTITÉS</a><br />
			<a href="print_charte.html">PRINT/CHARTES</a><br />
			<a href="web.html">WEB</a><br />
			<a href="campagnes.html">CAMPAGNES</a><br />
			<br />
			<a href="videos.html">VIDÉOS</a><br />
			<br />
			<a href="extras.html">EXTRA(S)</a><br />
			<a href="PP.html">PROJET PERSO</a><br />
			<br />
			<a href="profil.html">PROFIL</a><br />
			<a href="contact.html">CONTACT</a><br />
			<br />
			<a href="liens.html">LIENS</a><br />
			<br />
			
			
      </div>
      
	  <div id="corps_accueil">
	  		<p>
	  		
	  		</p>
			
			
      </div>
      
      <div id="pied_de_page">
      		<p>©2008 - TOUS DROITS RÉSERVÉS - GUY PAOLAGGI - DESIGN-PAO.COM
	  		</p>
			
			
      </div>
   
   </body>
</html>

Encore une fois, ça fonctionne très bien sur les FIREFOX ET SAFARI mais voila le resultat sur IE 6 :

http://design-pao.com/labo/

Smiley crazy

Je ne sais plus quoi faire... à part haïr encore plus IE et microsoft....mais ça c'est trop facile, il me faut la solution Smiley fache

Que c'est beau le courage Smiley hum

Que faire les gars, que faire?
Modifié par prelude (25 Nov 2008 - 07:05)

prelude

25 Nov 2008 à 07:15

Les gaaaaaars, je viens de trouver!!!!!!!
D'après ce que j'ai compris, c'était une combinaison de tout ce que vous m'avez dit avec en plus l'attribut "float: left" quelque chose comme ça!!!

Bref, pour ceux que ça intéresse, voici le code qui fonctionne sur cet e...... de IE6


body
{
	background-image: url("images/bodyBG.jpg");
	background-repeat: no-repeat;
	background-color: #000000;
	background-attachment: fixed;
	
	font-family: "Letter Gothic Std", "Orator Std", "Andale Mono";
	font-size: 10px;
	
	margin-left: 200px;
	margin-top: 100px;
}

#en_tete
{
	background-image: url("images/enteteBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	width: 700px;
  	height: 120px;
}

#menu
{
   	float: left;
   	position: relative;
   	
  	width: 120px;
  	height: 2000px;
  	
  	background-color: white;
}
#menu a
{
   	text-decoration: none;
   	color: #838282;
   	
   	padding-left: 15px;
}
#menu a:hover
{
    color: white;
    background-color: red;
}

#corps_accueil
{
	float: left;
	
	background-image: url("images/corpsBG.jpg");
	background-repeat: no-repeat;
	background-color: white;
	
	width: 580px;
	height: 2000px;
	
	position: relative;
}

#pied_de_page
{
  	background-color: white;
	
   	width: 700px;
	height: 50px;
	
	margin-top: 2000px;
}

et


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Design-pao</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design-pao_design-2.css" />
   </head>
   <body>
      <div id="en_tete">	
      		<p>
			</p>		

      </div>

      <div id="menu">
      		<br />
      		<br />
      		<br />
			<a href="index.html">ACCUEIL</a><br />
			<br />
			<a href="logos.html">IDENTITÉS</a><br />
			<a href="print_charte.html">PRINT/CHARTES</a><br />
			<a href="web.html">WEB</a><br />
			<a href="campagnes.html">CAMPAGNES</a><br />
			<br />
			<a href="videos.html">VIDÉOS</a><br />
			<br />
			<a href="extras.html">EXTRA(S)</a><br />
			<a href="PP.html">PROJET PERSO</a><br />
			<br />
			<a href="profil.html">PROFIL</a><br />
			<a href="contact.html">CONTACT</a><br />
			<br />
			<a href="liens.html">LIENS</a><br />
			<br />
			
			
      </div>
      
	  <div id="corps_accueil">
	  		<p>
	  		
	  		</p>
			
			
      </div>
      
      <div id="pied_de_page">
      		<p>©2008 - TOUS DROITS RÉSERVÉS - GUY PAOLAGGI - DESIGN-PAO.COM
	  		</p>
			
			
      </div>
   
   </body>
</html>

Merci mille fois de m'avoir bien orienté!!!!!
vous êtes au top

non non, je ne suis pas fou!!! Smiley biggol

Julien Royer

25 Nov 2008 à 12:10

prelude a écrit :
Les gaaaaaars, je viens de trouver!!!!!!!

Bien joué !

Merci d'avoir respecté les règles et d'avoir cherché par toi-même plutôt que d'attendre une solution toute faite. Smiley smile

Un dernier point : est-ce que tu considères que ce sujet est [Résolu] ?

prelude

25 Nov 2008 à 15:03

ah oui c'est vrai!
voila!

Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

Grosd probleme de compatibilité IE [Résolu]