Pbm decalage entre 2 div sous firefox

Hé oui je continue dans ma quête de compatibilité en IE et Mozilla ;]

j'ai un souci entre mon div menu gauche et mon div central contenant lui même une photo et 2 autres div (qui pourraient tout aussi bien être des p).

Voici le probleme :


Voici en temps normal sous IE ce que cela doit donner :


J'ai essayé pas mal de bidouilles mais le pbm c que Firefox ne tient pas compte du div contenant mes 2 autres div du contenu central, il agit comme si la photo et les 2 div suivants n'etaient pas dans le meme div ??? pas tres clair peut etre !?

merci d'avance pour vos avis
vxdav

Modifié par vxdav (10 Jun 2005 - 13:48)

Voici le code HTML :

<div id="menu-gauche"><span class="text-menugauche">Vietnam</span> 
    <li><a href="#">Baie Halong</a></li>
    <li><a href="#">Cao Bang</a></li>
    <li><a href="#">Hanoi</a></li>
    <li><a href="#">Région de l'Est</a></li>
<br>
<br>
	<li><a href="#">Plongée sous marine</a></li>
  </div>
  <div id="photo-centre">
  Plage et cocotier<br><br>
  <a href="#"><<< Photo Précédente</a> | <a href="#">Photo Suivante >>></a>
    <img src="/illus-photo/test.jpg" alt="photo Baie Halong - plage et cocotier"> 
  <p id="commentaire-photo">commentaire photo si existe, sinon ne rien afficher : La culture Viêtnamienne est riche et forte de la diversité de ses 54 ethnies différentes. Dans ces rubriques, nous vous offrons quelques éléments de l'histoire de ce pays, de ses fêtes et religions, et nous vous proposons de découvrir l'Art Viêtnamien. Vous pourrez aussi y apprécier la diversité culturelle des ethnies du Viêtnam</p>
  <p id="copyright-photo">&copy; <a href="#">davidb</a></p>
  </div>

voici le code css :

#menu-gauche {
	float: left;
	width: 160px;
	height : auto;
	padding-top: 30px;
}

#menu-gauche a {
	margin: 0 2px;
	color: #666666;
	text-decoration: none;
}

#menu-gauche a:hover {
	text-decoration: underline;
}

#menu-gauche a:active {
	text-decoration: underline;
}


#photo-centre {
	left : 220px;
	width: 100%;
	padding-top: 33px;
	text-align: center;
}

#commentaire-photo {
	width: 480px;
	text-align: justify;
}

#copyright-photo {
	width: 100%;
}

Modifié par Igor (10 Jun 2005 - 13:53)

Bonjour ;
il ne s'agit pas d'un problème de "compatibilité", mais d'interprétation du code que tu leurs donnes, avec diverses priorités, selon un navigateur ou l'autre.
J'ai testé un peu ton code, mais ne voispas bien ce que tu veux faire : il semble qu'un lien vers un rendu "Internet Explorer" ne soit pas passé...
Toujours est-il, deux choses déjà : si tu mets "width: 100%;", l'élément va vouloir prendre 100% de la largeur de ta page : il passe en-dessous des autres éléments, sous iE, et prend 100% de ce qu'il reste, pour Firefox / Mozilla semble-t-il, si j'ai bien suivi ce que tu veux. un "clear:both" contenteraa les deux de la même façon. Ensuite, ton paragraphe prend la place qu'il lui reste, après la photo, et ensuite sous ton menu (qui est moins "haut"), car ilprend une largeur de 480px (que tu lui indiques) à partir de la marge.
Rajoute "border: 1px solid black;" à tes div et paragraphes, pour voir comment ils se comportent.

code corrigé et commenté :
La css :

#menu-gauche {
float: left;
width: 25%;/*utiliser des pourcentages ou des em plutôt que des pixels*/
/*height : auto; = smeble intuile*/
padding-top: 30px;
border: 1px solid black;/*à enlever après avoir visulaiser les boîtes*/
}

#menu-gauche a {
margin: 0 2px;
color: #666666;
text-decoration: none;
}

#menu-gauche a:hover {
text-decoration: underline;
}

#menu-gauche a:active {
text-decoration: underline;
}


#photo-centre {
/*left : 220px; inutile*/
/*width: 100%; vaut mieux pas : ça te fait tout reglisser en-dessous*/
width: 73%;/* utiliser ce qu'il reste, moins un tit quelque chose,pour les ajustements de marges*/
float: right;
padding-top: 33px;
text-align: center;
border: 1px solid black;
}

#commentaire-photo {
/*width: 480px; plus utile*/
text-align: justify;
border: 1px solid black;
/*float: left; idem, puisque dans le container*/
}

#copyright-photo {
width: 100%;
border: 1px solid black;
}

La page avec une modif du placement de fin de "div" :

<div id="menu-gauche"><span class="text-menugauche">Vietnam</span> <!--c'est un titre ? utilise les balises appropriées : h1, h2, h3... -->
<ul><!-- indicateur de liste -->
<li><a href="#">Baie Halong</a></li>
<li><a href="#">Cao Bang</a></li>
<li><a href="#">Hanoi</a></li>
<li><a href="#">Région de l'Est</a></li>
<br><!-- vraiment utile ? -->
<br>
<li><a href="#">Plongée sous marine</a></li>
</ul><!-- fin d'indicateur -->
</div>
<div id="photo-centre">
Plage et cocotier<br><br><!--c'est un titre ? utilise les balises appropriées : h1, h2, h3... et tu n'auras plus besoin des "br" ; de plus, ton texte est sans aucune balise... -->
<a href="#"><<< Photo Précédente</a> | <a href="#">Photo Suivante >>></a>
<img src="/illus-photo/test.jpg" alt="photo Baie Halong - plage et cocotier">
<p id="commentaire-photo">commentaire photo si existe, sinon ne rien afficher : La culture Viêtnamienne est riche et forte de la diversité de ses 54 ethnies différentes. Dans ces rubriques, nous vous offrons quelques éléments de l'histoire de ce pays, de ses fêtes et religions, et nous vous proposons de découvrir l'Art Viêtnamien. Vous pourrez aussi y apprécier la diversité culturelle des ethnies du Viêtnam</p>
</div><!-- fermer le container ici, pour que le copyright prenne toute la largeur -->
<p id="copyright-photo">&copy; <a href="#">davidb</a></p>

Tu n'as plus qu'à enlever les caractères d'échapement qui te gênent, contrôler les alignements de texte selon les blocs, et faire les modif que tu préfères...
Bon courage.
Edit > J'oubliais, le rendu est identique pour FF et iE...
Modifié par Macpom (10 Jun 2005 - 15:20)

Ouah les gars tout ça rien que pour moi, de la balle !

je fais toutes les modifs et reviens par ici pour vous tenir au courant. Merci encore

vxdav