[résolu]Gros problèmes sous les différentes versions d'IE

Bonjour,

on m'a recommendé ce forum car j'ai un problème que je ne sais résoudre seule...
J'avais dans l'idée de me faire un petit site pour commencer tout ce qui est HTML et CSS, mais depuis plusieurs semaines je stagne sur un problème... Quand je regarde mon résultat sous firefox, c'est impécable, mais lorsque je le regarde sous les différentes versions d'internet explorer, RIEN ne va! L'arrière plan, la couleur de fond, le menu, les marges... ils ont tous un problème!
J'ai beau relire mes codes je ne vois absolument pas d'où ca peut venir...
Alors je m'adresse à vous qui vous y connaissez surement plus que moi (c'est pas dur ) ou à vous qui aurez peut-être l'oeil pour trouver d'où viennent ces erreus, en espérant qu'ainsi je pourrais enfin continuer mon projet.

En fait, sous Opera et Firefox cela donne :
http://i18.tinypic.com/2moe2qs.png

Sous internet explorer 5.5 :
http://i13.tinypic.com/2s867tx.png

Et sous interbet explorer 6 :
http://i15.tinypic.com/4e1j049.png

J'ai cherché un peu partout dans mes codes je n'y comprend rien, je ne comprends déjà pas pourquoi mon image de fond n'est pas prise en compte...
J'ai vérifié la largeur de mon image par rapport à la largeur de mon conteneur, j'ai regardé les margin et les padding j'y ai même changé les données pour voir si cela changeait quelque chose, mais rien... J'ai vérifié que je donnais les mêmes noms aux blocs de CSS et aux blocs d'HTML correspondants... Je ne trouve rien... J'ai déjà cherché sur quelques topics où on y parlait des problèmes sous ie, mais je n'y ai rien trouvé qui puisse m'aider.
Si quelqu'un a une idée d'où peut venir l'erreur, ce serait sympa qu'il me le dise ainsi je pourrais vérifier et peut-être même régler le problème.


Ps : ceci est mon premier message sur le forum et je ne suis pas sure d'où placer mon topic... Je l'ai donc mis ici pour ne pas le placer à un endroit mal adapté.

<modération>Merci d'éviter les images trop larges qui déforment le forum.
N'hésite pas à remettre tes images en utilisant l'option "Générer un aperçu" dans "Joindre une image".</modération>

<edit> Pardon, les images étaient beaucoup trop grandes, quand je les ai vues ainsi, je voulais diminuer leur taille mais je viens de me mettre sous linux et je ne suis pas encore habituée aux programmes et je n'avais jusque maintenant pas encore ouvert l'éditeur d'images... </edit>
Modifié par sk0rp1x (20 Feb 2007 - 16:43)

Bonjour,

Les images sont jolies, mais peu pratique pour accéder au code HTML-CSS en question

Une page test en ligne, svp.

En fait je n'ai pas encore ouvert d'hébergement, pour l'instant je n'ai encore travaillé qu'en local.

Voilà pour ce qu'il en est du CSS :

body
	{
	background: #222222;
	color: #FFFFFF;
	margin: 0 auto;
	padding: 0;
	}

div#banniere
	{
	background: #000000 url(images/banniere.jpg);
	color: #FFFFFF;
	height: 154px;
	margin: 30px 0 0 0;
	margin: auto;
	padding: 0;
	width: 760px;
        }
	
#menu
	{
	float: center;
	list-style-type: none; 
	margin: 0 auto;
	padding: 0;
	width: 28.7em;
	}

#menu a
	{
	background: #000000;
	display: block;
	float: center; 
	font-size: 18px;
	font-style: Verdana;
	padding: 0;
	text-align: center;
	text-decoration: none;
	width: 6.1em;
	color: #DDDDDD;
	}

#menu a:hover
	{
	background: #FFAA33;
	color: #000000;
	}


#menu li
	{
	border: 2px solid #FFAA33;
	float: left;
	}
	
div#corps
	{
	background: url(./images/fond.jpg) center top repeat-y;
	color: #222222;
	margin: 0;
	margin: auto;
	padding: 0;
	width: 760px;
	}

div#pied_de_page
	{
	background: #FF9933 url(images/pieddepage.jpg) center bottom no-repeat;
	color: #000000;
	font-size: .9em;
	font-style: italic;
	height: 1.8em;
	line-height: 1.7em;
	margin: 0;
	margin: auto;
	padding: 0;
	text-align: right;
	width: 760px;
	}

p
	{
	margin: 30px 165px 0 165px;
	padding: 0 0 15px 0;
	}

h1
	{
	background: #000000;
	color: #FF9933;
	font-size: 30px; 
	margin: 0 155px;
	padding: 0;
	text-align: center;
	}

h2
	{
	color: #FF9500;
	font-size: 28px;
	font-style: italic;
	font-weight: bold;
	margin: 0 155px;
	padding: 10px 0 0 0;
	text-align: left;
	}

h3
	{
	color: #FF9000;
	font-size: 20px;
	margin: 0 155px;
	padding: 10px 5px 0 5px;
	text-decoration: underline;
        }

#corps ul
	{
	font-size: 18px;
	margin: 0 170px;
	padding: 0;
	text-align: left;
	}

#corps li
	{
	list-style-image: url(images/deco.jpg) center left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-indent: 20px;
	}

#corps li li
	{
	list-style-image: url(images/deco.jpg) center left;
	list-style-type: none;
	margin: 0 -150px;
	padding: 0;
	text-indent: 20px;
	}

#corps ul li a
	{
	color: #FF8000;
	}

#corps ul li ul li a
	{
	color: #222222;
	}

#banniere img
	{
	border: none;
	margin: 0 auto;
	padding: 0;
	}

#pied_de_page p#copyright
	{
	margin: 0 10px 0 0;
	padding: 0;
	}

Et voilà pour le HTML :

&#65279;<!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>sk0rp1x ; présentation</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <link rel="stylesheet" media="screen" type="text/css" title="Design" href="csstest1.css" />
  </head>
  <body>
  <div id="conteneur">
	<div id="banniere">
	</div>
    <div id="menu">
      <ul id="menu">
        <li><a href="# "> Accueil </a></li>
        <li><a href="# "> Blog </a></li>
        <li><a href="# "> Présentation </a></li>
        <li><a href="# "> Cours </a></li>
      </ul> 
    </div>
    <div id="corps">
	  <h2>
	    Présentation
	  </h2>
	  <h3>
	    #1
	  </h3>
	  <p align="left">
		Bienvenue sur sk0rp1x;
		<br />
		<br />
		Qu'est-ce donc sk0rp1x ? 
		<br />
		Disons tout simplement que sk0rp1x est mon pseudo sur le net et du coup, mon adresse porte le même nom.
		<br />
		Que pouvez-vous trouver ici ?
		<br />
		Ah ben ça... Un tas de choses à vrai dire... Plus sérieusement, disons qu'il y aura une partie "blog" qui sera, comme son nom l'indique, de type "blog" (vous voyez ce que je veux dire non ? Articles, etc... Ca vous dit bien quelque chose non ?). 
		<br />
		Il y aura aussi une partie "résumés" ou "cours" (je suis encore en train de réfléchir à "comment est-ce-que je vais tout organiser" à l'heure actuelle) où je mettrai à disposition de tous, mes résumés, mes synthèses, les résumés des autres personnes qui me les auront gentiment prètés, etc... Bien entendu, ils concerneront les cours de 1ère année à l'Isic.
		<br />
		La partie "accueil" quand à elle, sera comme qui dirait, un menu géant, avec en plus une barre de recherche et une sous catégorie que l'on pourrait appeler "contact".
		<br />
		Et enfin il y a la dernière partie, "présentation", à travers laquelle vous lisez ces lignes.
		<br />
		<br />
		Bonne visite.
      </p>
	  <p style="text-align: right">
	  sk0rp1x
	  </p>
    </div>
    <div id="pied_de_page">
        <p id="copyright">sk0rp1x © 2007</p>
    </div>	
  </div>	
  </body>
</html>

Voilà voilà !

Héhé, bon j'ai tout recommencé (en ayant fait une copie de sauvegarde bien sûr) et j'ai regardé point par point toute ma CSS (merci à mon ange SolykZ ).
Mon problème a directement commencé lorsque j'ai mis l'image de fond... Je ne voyais vraiment pas d'où pouvait venir le problème, alors j'ai ouvert mon dossier images et là j'ai remarqué un truc étrange...
Pour toutes les images, on voyait leur apperçu, sauf pour celle de fond, on voyait la banale icone jpg.
Enfin soit j'ai simplement réenregistré l'image et c'était fait... Ah tant de tracas et de tirages de cheveux pour si peux !!!
En tout cas merci à tous ceux qui se sont penchés sur mon cas !