[RESOLU] Probmème casse tête avec un flottant

Apres avoir bien commencé mon site j'ai, il y a peu, décidé de rajouter un système de commentaires en php pour les news. Jusque là rien à voir avec le css. Sauf que je voulais que les commentaires d'une news s'affichent apres un clic sur la meme page dans un block. Ainsi j'ai utilisé un script js que j'ai facilement trouvé qui jouait sur la propriété display du div des commentaires (avant clic > display:none; après clic > display:block;). Sur IE je n'ai constaté aucun problème, tout s'affiche comme je le souhaite. En revanche sur Mozilla un flottan situé après le div des commentaires se décale vers le haut lorsque le div est affiché après le clic. Lorsqu'il est affiché dès le départ ce pb ne se rencontre pas et lorsque le div redisparait le flottant en question ne revient pas à sa place. Le problème ne semble pas non plus venir du formulaire à l'intérieur de ce div. Pour mieux comprendre voici un lien d'une page illustrant mon pb (le flottant en question est encadré dans une bordure blanche). http://lfasm1.free.fr/exemple.htm
Voici mon fichier css :

body { margin: 0 auto; background: url('../images/bg.gif'); font-family: verdana; font-size: 11px; }
a { color: #4D5987; text-decoration: none; font-style: normal; font-size: 10px; }
a:hover { text-decoration: underline; }

#banniere { width: 692px; height: 170px; background: url('../images/banniere.jpg') no-repeat; }
#ligne { width: 692px; height: 6px; background: url('../images/bg_ligne.gif') repeat-x; text-align: right; }
#ligne img { float: right; }
#corps_haut { width: 692px; height: 87px; background: url('../images/bg_corps_haut.jpg') no-repeat top; }
#corps_haut img.titre { margin: 40px 0 0 205px; padding: 0; }
#corps_haut img.menu { margin: 40px 0 0 20px; padding: 0; }
#corps { width: 692px; min-height: 310px; background: url('../images/bg_corps.jpg') repeat-y; }
#corps_bas { width: 692px; height: 87px; background: url('../images/bg_corps_bas.jpg') no-repeat bottom; }
#bas_gauche { width: 128px; height: 25px; background: url('../images/bg_bas_gauche.gif') no-repeat; }
#bas { width: 692px; height: 69px; background: url('../images/bg_bas.jpg') no-repeat right; }
#bas_droite { padding-bottom: 25px; width: 692px; height: 18px; background: url('../images/bg_bas_droite.gif') no-repeat right top; }

#contenu { margin-left: 180px; margin-top: -308px; width: 460px; text-align: center; }
#texte { margin: auto; padding: 0 5px 0 5px; width: 360px; border-left: 1px #4D5987 dashed; border-right: 1px #4D5987 dashed; text-align: left; color: #4D5987; line-height: 15px; }
#texte hr { margin-left: 10px; margin-right: 10px; height: 1px; background: transparent; border-top: 1px #884141 dashed; border-bottom: none; vertical-align: bottom;  }
#texte h4 { margin: 0 5px 0 5px; padding: 0 0 2px 0; font-size: 11px; line-height: 11px; border-bottom: 1px #ccc solid; color: #884141; }
#texte h5 { margin: 0 3px 0 5px; padding: 0; font-size: 11px; font-weight: normal; font-style: italic; line-height: 11px; float: right; color: #884141; }
#texte h6 { margin: 0 10px 12px 5px; padding: 0; font-size: 11px; font-weight: normal; text-align: right; color: #884141; }
#texte p { margin: 0 5px 0 5px; padding: 0; font-weight: normal; color: #4D5987; }
#texte span { font-weight: bold; }
#texte .com { margin: 0 12px 10px 12px; padding: 0 3px 3px 3px; border: 1px solid #ccc; display: none; }
#texte .options { font-size: 10px; font-weight: normal; float: right; color: #884141; }
#pre { margin: auto; padding: 0 5px 0 5px; width: 360px; border-left: 1px #4D5987 dashed; border-right: 1px #4D5987 dashed; text-align: left; color: #4D5987; }
#pre p { margin: 0; padding: 5px; width: 190px; border-right: 1px #884141 dashed; }
#pre #log { margin-top: 10px; width: 150px; float: right; text-align: center; }
#cadre_b { margin: auto; padding: 7px 17px 0 20px; width: 370px; height: 29px; background: url('../images/cadre_b.gif') no-repeat; text-align: left; color: #884141;  }
#cadre_b a { color: #4D5987; text-decoration: none; font-style: normal; font-size: 10px; }
#cadre_b a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; width: 113px; height: 310px; list-style: none; font: 11px Verdana, sans-serif; }
ul li { padding: 0 0 5px 0; }
ul a { width: 113px; height: 27px; text-decoration: none; display: block; } 
ul a img { display: none; border: none; }
ul a.accueil { background: url('../images/accueil.gif') no-repeat; }
ul a.taff { background: url('../images/taff.gif') no-repeat; } 
ul a.soirees { background: url('../images/soirees.gif') no-repeat; } 
ul a.bp { background: url('../images/bp.gif') no-repeat; } 
ul a.sorties { background: url('../images/sorties.gif') no-repeat; } 
ul a.articles { background: url('../images/articles.gif') no-repeat; } 
ul a.galerie { background: url('../images/galerie.gif') no-repeat; } 
ul a.liens { background: url('../images/liens.gif') no-repeat; } 
ul a:hover { background: #E7E7EB; text-decoration: none; }
ul a:hover img { display: block; }
ul a span { display: none; }
ul a span img { margin-bottom: 5px; margin-top: 5px; }
ul a:hover span { padding-left: 10px; width: 110px; display: block; position: absolute; top: 545px; left: 0; font: 10px Verdana, sans-serif; color: #4D5987; text-align: center; }

form { margin: 0; padding: 0; }
form.membres { margin: 0; padding: 0; text-align: center; }
input { width: 120px; background: #ddd; border: 1px #884141 solid; font: 11px Verdana, sans-serif; color: #4D5987; }
input.login { margin: 0; padding: 2px 5px 0 5px; width: 82px; height: 17px; background: url('../images/login.gif') no-repeat fixed; border: none; font: 11px Verdana, sans-serif; color: #4D5987; font-weight: bold; }
html>head:first-child+body input.login { background: url('../images/login.gif') no-repeat; }
input.pass { margin-top: 2px; padding: 2px 5px 0 5px; width: 82px; height: 17px; background: url('../images/pass.gif') no-repeat fixed; border: none; font: 11px Verdana, sans-serif; color: #4D5987; font-weight: bold; }
html>head:first-child+body input.pass { background: url('../images/pass.gif') no-repeat; }
input.val { margin-top: 2px; padding: 0; width: 30px; height: 16px; background: url('../images/val.gif') no-repeat; border: none; }
textarea { width: 250px; background: #ddd; border: 1px #884141 solid; font: 11px Verdana, sans-serif; color: #4D5987; overflow: auto; }

Je ne suis pas un pro en css et suis parfaitement conscient que je code mon css/html un peu comme un barbare. Mais mon principal soucis est que le site s'affiche correctement sur IE et sur Mozilla.
Votre aide me sera précieuse.
A plus tard
Modifié par jumpy (20 May 2005 - 23:03)

bonsoir jumpy,

si tu clique ici,

tu trouveras ceci

18- Un peu de politesse !
La politesse élémentaire est d'usage sur ce Forum (Bonjour, Merci d'avoir répondu à ma question, ...) et sera appréciée par les modérateurs (et autres membres). Nous ne sommes pas dans un fast-food ici, où l'on commande, on consomme et on s'eclipse. Les nouveaux inscrits qui le souhaitent peuvent se présenter dans un sujet du Bar du forum. De même, il est courtois d'être poli et patient avec les nouveaux membres peu expérimentés.

et pleins d'autre choses bien utiles

A lire donc

Bonjour jumpy et bienvenue à toi sur le forum Alsacréations

Ce que Phillipe essait de te dire est tout simplement qu'il manque un petit « Bonjour » au début de ton post. Rien de plus.

Mille excuses
C'est vrai qu'après relecture (et refroidissement de mon cerveau) mon post était un peu cru je m'en excuse je crois que je me suis plus concentré sur mon problème que sur ma politesse dans ce post. En fait je crois que le temps que j'ai mis a cherché une issue à mon problème et a faire des recherches sur les forums m'a un peu énervé et c'était la moindre des choses que de dire bonjour.
Ainsi bonjour à tous et merci d'avance pour votre aide.
J'irai très rapidement me présenter sur le forum approprié.
Merci pour votre accueil, ce forum m'a l'air très agréable et je vais faire de mon mieux pour aider sa communauté.

Rebonjour,
Je pense que mon problème est trop difficile à résoudre puisque vous ne connaissez rien du tout a mon codage html ni au css. Ainsi je vous propose le code html de la partie qui selon moi doit coincer :

			<div id="com1" class="com">
			<span class="options" style="line-height: 20px;"><a href="#">commenter</a> | <a href="javascript:;" onClick="MM_showHideLayers('com1','','hide')">fermer</a></span><strong style="color: #884141; line-height: 20px;">Commentaires</strong><br/>
			<em style="float: right;">13/05/05 à 19h30</em><span>&nbsp;jumpy</span><br/>» blablabla<br/>
			<em style="float: right;">13/05/05 à 19h30</em><span>&nbsp;jumpy</span><br/>» testestestestestestestestestestestestest testestestestestestestest testestestestestestest<br/>
			<form action="" method="post" style="text-align: center;">
			<strong>Commentaire :</strong><br/>
			<textarea name="texte" rows="4" style="background: none; border-color: #999;"></textarea>
			<input type="submit" value="Envoyer" style="width: 80px; background: none; border-color: #999;" />
			</form>
			</div><hr/>
			<br/><h5 style="border: 1px solid #fff;">le 14/02/2005</h5><h4>Du nouveau sur le site !</h4><span class="options"><a href="#">éditer</a> | <a href="javascript:;" onClick="MM_showHideLayers('com2','','show')">commentaires</a> [2]</span>

Le block qui coince c'est le h5 en bas du code (avec la date dedans) qui se décale vers le haut au premier affichage du div class="com".
Voilà j'espère que vous pourrez me donner un coup de pouce parce que à ce jour je ne sais meme pas si mon problème vient réellement du css (mon intuition me dit que oui vu la différence entre IE et firefox)...
Modifié par jumpy (20 May 2005 - 18:14)

Bonsoir !
J'ai enfin trouvé d'où le problème venait : c'est le <hr/> juste avant le <h5> qui faisait buggé mon code sous firefox. En effet lorsque j'enlève cette <hr/> et la remplace par un div de hauteur 1px avec une bordure comme je le souhaite tout marche parfaitement.
Ainsi je m'excuse d'avoir posté puisque j'avais les moyens de me débrouiller tout seul. Seulement ca a mis lun certain temps .
Je met de suite le [RESOLU]
A bientot tout le monde

Salut Jumpy !!!

On dirait que tu codes avec dreamweaver toi aussi. Je vois qu'il te met également des majuscules sur les attributs.

on[#red]C[#black]lick

Si tu veux être définitivement tranquille, Voici la soluce

Je suis très content de la trouvaille. C'est pour ça que j'en fais profiter


Par contre, ton principe d'affichage de bloc est très interressant. Je cherchais justement une solution la semaine dernière que je n'ai tjr pas trouvé.

Je voulais afficher les commentaires pour chaque photo cliqué dans une gallerie. lien



Tu crois que tu pourrais m'aiguiller???
Modifié par chooky (21 May 2005 - 14:53)