xhtml 1.0 problème dès l'affichage d'une image

[RRusty]

Bonjour, je débute en xhtml/CSS et je rencontre un petit problème :

Dès que j'affiche une image entre mes deux balises <div></div> le comportement du navigateur est bizarre.

Sous ie tout s'affiche niquel, le texte & les images.
Sous firefox, assez aléatoirement (rafraichissez si ce n'est pas le cas), le cadre contenant l'image se remplit de la couleur de fond (j'ai mis bleu expres pour que l'on comprenne bien), et rien ne s'affiche.

http://rr-world.net/~rr/new/index.php

css : http://rr-world.net/~rr/new/w3c.css ca se passe la :

Code : Tout sélectionner

div#MainBoxMain{
	width:625px;
	overflow:hidden;
	background-color:red;
}
#MainBoxMain #MainBox-left {
	float:left;
	margin-top: 0px;
	margin-bottom:0px;
	overflow:hidden;
	background-image: url('images/16.jpg');
	background-position: left;
	background-repeat: repeat-y;
	background-color:white;
}

#MainBoxMain #MainBox-right {
	float:left;
	margin-top: 0px;
	margin-bottom:0px;
	overflow:hidden;
	background-image: url('images/17.jpg');
	background-position: right;
	background-repeat: repeat-y;
}

#MainBoxMain #MainBox-mid{
	margin-top: 0px;
	margin-bottom:0px;
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	float:left;
	width:605px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:24px;
	color: #333333;
}

Et le truc bizarre, c'est que si dans le navigateur on clique n'importe quel lien et que l'on revient sur ma page avec le bouton précédent, tout s'affiche normalement.

Il ya surement pas mal de trucs pas très propres dans mon code, alors soyez indulgents

Merci

[calimo]

Arf, la prochaine fois mets encore plus de divs C'est vraiment nécessaire qu'il y en ait autant ?

Ça le fait aussi dans les dernières versions de développement ?
Edit : ça marche bien dans Deer Park...

[RRusty]

Le design est à la base prévu pour de l'html 4.01 avec plein de tables partout. Sans être bien compliqué, il est quand chargé au niveau de la découpe.

Je me suis lancé dans la convertion en xhtlml strict, donc oué ca me fait beaucoup de <div>. Je débute et je ne vois pas d'autre méthode.

Pour revenir à mon problème, penses tu vraiment que ca soit un bug de firefox ? car pour etre honnete, ca m'embete beaucoup, je préfererai qu'on me dise que j'ai fais une erreur. Pour toi le fait qu'il passe bien sous Deer Park "prouve" que le bug vient de firefox ?

[calimo]

Le design est à la base prévu pour de l'html 4.01 avec plein de tables partout. Sans être bien compliqué, il est quand chargé au niveau de la découpe.

Je me suis lancé dans la convertion en xhtlml strict, donc oué ca me fait beaucoup de <div>. Je débute et je ne vois pas d'autre méthode.

Le problème, c'est que concevoir une mise en page en CSS ça ne se fait pas comme une mise en page en tableaux... tu n'as pas besoin de découper tes images comme ça !

Par exemple pour le "header" tu n'as besoin que d'un seul div (et encore, tu ferais mieux d'utiliser correctement la sémantique HTML, pour le titre de la page c'est h1, pas div )

Pour revenir à mon problème, penses tu vraiment que ca soit un bug de firefox ? car pour etre honnete, ca m'embete beaucoup, je préfererai qu'on me dise que j'ai fais une erreur. Pour toi le fait qu'il passe bien sous Deer Park "prouve" que le bug vient de firefox ?

Oui. Tu peux essayer de simplifier (comprendre : de supprimer un maximum de blocs) si tu veux comprendre de quoi ça vient exactement. Supprime les blocs un à un, les gros d'abord, jusqu'à ce que le bug disparaisse, puis cible un peu plus... Je suis totalement incapbale de dire exactement de quoi vient le problème, parce qu'il n'y a visiblement rien d'anormal, #MainBoxMain devrait se trouver à l'arrière...

Cependant, j'avoue peiner à comprendre le but ultime de

Code : Tout sélectionner

<div id="MainBoxMain">
								  <div id="MainBox-left">
										<div id="MainBox-right">

											<div id="MainBox-mid">

...

Code : Tout sélectionner

											</div>

										</div>
								  </div>
								</div>

Pourquoi tous ces div ? Pourquoi pas un seul div ? Pourquoi pas aucun div du tout ? Tu as du texte, et il n'est même pas dans un paragraphe (<p>)...

PS : je pense que tu y gagnerais à (ré)apprendre le HTML avec sa sémantique... être valide c'est très bien, d'ailleurs je te félicite , mais mettre un sens sur chaque chose c'est encore mieux

[RRusty]

Merci pour ces conseils.
Je vais essayer de nettoyer tout ca