Probleme de positionnement texte (h2) et images dans I.E.

Bonjour,

Une petite recherche dans les FAQ ne m'a pas apporté de réponse, alors je vous soumets mon probleme :
Dans les pages de mon site, je souhaite que le texte encadre les images qui illustrent le propos.
Le texte est constitué de balises h2 (pour les titres) et de texte dans des balises p.
Sous firefox, pas de probleme. Par contre sous Explorer (Grrrr!), les balises h2 viennent se placer sous la photo, au lieu de se positionner à coté.
Je ne sais pas si ce que je dis est très clair... alors plutot qu'une grande explication, voici l'adresse où j'ai temporairement stocké la page :

http://www.ramenetascience.org/

Avec mozilla/firefox, vous verrez la mise en page que je souhaite, avec I.E., vous verrez mon probleme...
Si quelqu'un y voit une solution... merci d'avance !

Pour plus d'infos : mon fichier css (voir la fin, à partir de #contenu):

body {
	margin:0;
	margin-top: 10px;
	text-align: center; /* pour corriger le bug de centrage IE */
}

* {
  font-family : "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}

#page {
	background-image: url("images/fond_rts.png");
	background-position:  0% 0%;
	background-repeat: no-repeat;
	height:600px;
	width:800px;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
}

#slogan {
	width:400px;
	position:relative;
	left:315px;
	top:41px;
	color:white;
	font-weight:bold;
	font-size : 22px;
}

#menu {
	position:relative;
	left:7px;
	top:115px;
	text-align : left;
	font-size : 1em;/*16px;*/
	color:#ffcc00;
}

#menu ul {
	margin-left:20px;
	padding-left:15px;
	padding-top:0px;
}

#menu li {
	list-style-type: circle ;
	padding-bottom:4.5px;
	/*padding-left:15px;*/
	margin-left:0px;
}

#menu li a {
  color:#0033cc;
  text-decoration:none;
}

#menu li a:hover {
  color:red;
}

#contenu {
	position:relative;
	text-align:left;
	background:#ffffff;
	left:236px;
	top:-150px;
}

#contenu p.chapo {
	font-style:italic;
	width:550px;
	color:#000000;
	margin-left:15px;
	font-size:12px;
}

p.chapo img {
	float:right;
	margin-top:10px;
	margin-left:10px;
}

.lettrine {
float: left; 
font-weight: bold;
font-size : 16px;
line-height: 0.9em;
margin-left : 10px;
}

#contenu h2 {
	color: #8b8b8b;
	width:430px;
	padding-left: 40px;
	background-position:  0% 0%;
	background-repeat: no-repeat;
	font: bold 1em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	background-image: url("images/atome.gif");
	border-bottom: 2px solid #ff6600;
}

Modifié par zeltron (17 Mar 2006 - 13:29)

Bonjour,

merci de placer les différents codes dans des balises [ code] ... [ /code] comme indiqué dans l'Aide, en éditant ton 1er message. Cela rend le code beaucoup plus lisible pour tout le monde.
De plus, à moins que le code PHP ne soit nécessaire, mieux vaut indiquer le résultat qu'il donne que sa construction. Le mélange PHP/HTML/CSS est assez indigeste à la relecture , mais j'ai survolé ton sujet donc il est peut-être nécessaire ici, ne tient pas compte de ma remarque dans ce cas

Petite note sans rapport: l'italique est assez difficile à lire quand il concerne des paragraphes entiers sur le web parce que chaque caractère est composé de trop peu de pixels (contrairement au papier). Enfin c'est autant une question de goût que de technique hein

Voila, mon post est corrigé... c'est vrai que c'est plus lisible. J'ai viré le php, de toute façon, c'est vrai qu'avec la source de la page, on a tous les éléments utiles.

Je pense qu'il doit y avoir une propriété pour les balises h2 qui permettent de les placer comme je veux, mais j'ai beau chercher et tout triturer dans tous les sens, je ne m'en sors pas. Entre autres, j'ai essayé de mettre un "clear:none" sur l'image et sur la balise h2, mais ça n'a rien changé, de fermer le paragraphe (<p>) après la deuxieme balise h2.. toujours rien, alors si quelqu'un a une autre idée...