[resolu] Différence d'affichage explorer firefox

Question

Vinz

14 May 2005 à 16:31

Salut tout le monde,

J'avais laissé ce problême tombé il y a quelques temps, mais maintenant il va falloir que je le résolve Smiley lol

Je vous expose d'abord mon problême :

Voici et le code css :

.cadre_ensemble
{ FLOAT:left; BORDER:solid #0066FF 1px; WIDTH:100%; }

.monoblocs_variante_image_1
{ FLOAT:left; BORDER:solid #000000 0px; WIDTH:155px; }
.monoblocs_variante_image_2
{ FLOAT:left; BORDER:solid #000000 0px; WIDTH:155px; }
.monoblocs_variante_texte
{ FLOAT:left; MARGIN-LEFT:10px; MARGIN-RIGHT:10px; WIDTH:175px; }

.image_monoblocs_150_150
{ WIDTH:150px; HEIGHT:150px; BORDER-WIDTH:0px; }

Puis le code html (les deux classes cadre ensemble ont également le même code c'est du copié, collé) :

<!-- DEBUT Nouvelle ensemble-->
<div class="cadre_ensemble">

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-fr.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

<div class="monoblocs_variante_texte">
<p>
<img src="image_index/drapeau_fr.jpg" class="drapeau_19_10" alt="Allemand" /> Hippo Tonic<br /><br />
<span class="rouge_t12">Recherche : 0</span><br />
<span class="vert_t12">Echange : 0</span><br /><br />
Spécificité : Pas de lunette
</p>
</div>

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-all.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

</div>

<br />
<br />

<!-- DEBUT Nouvelle ensemble-->
<div class="cadre_ensemble">

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-fr.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

<div class="monoblocs_variante_texte">
<p>
<img src="image_index/drapeau_fr.jpg" class="drapeau_19_10" alt="Allemand" /> Hippo Tonic<br /><br />
<span class="rouge_t12">Recherche : 0</span><br />
<span class="vert_t12">Echange : 0</span><br /><br />
Spécificité : Pas de lunette
</p>
</div>

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-all.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

</div>

<br />
<br />

Le problême est que sous IE les BR sont parfaitement interprêté entre mes différents div "cadre_ensemble". Mais sous firexfox je peux mettre autant de br que je veux les blocs restent pertinament collés l'un en dessou de l'autre sans le moindre petit espace !
J'ai pensé à mettre un margin-bottom à mes ensemble mais le problême est que ce problême influe ensuite sur l'affiche de ma ligne hr et d'une image qui se trouvent en dessou. Elles se retrouvent également l'une en dessou de l'autre sans le moindre espace.

Merci de me mettre sur la piste, si je supprime tout ces div eh bien le positionnement redevient normal sous firefox (ligne en dessou et image).
Rien a déclaré du coté de IE...

Merci beaucoup Smiley smile

Vincent
Modifié par Vinz (15 May 2005 - 10:40)

gilles6975

14 May 2005 à 17:39

Je ne sais pas si tu as pensé à utiliser la propriété clear : both pour sortir du flux courant et en commencer un autre. Notamment sortir du flux "cadre ensemble". En effet si tu avais un ecran assez large ces 2 blocs se mettraient l'un a coté de l'autre et non l'un en desous de l'autre.

Une petite recherche sur la propriété clear sur ce forum (ou en recherchant flux dans les tutoriels) devrait t'en dire plus.

Vinz

14 May 2005 à 19:00

J'ai malheureusement déjà cherché dans les clear mais je n'ai rien trouvé de convainquant.

Je met un autre script, c'est juste la suite qui montre que tout se colle et je ne comprend pas pourquoi :

<!-- DEBUT contenu ensemble -->
<div class="cadre_ensemble">

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-fr.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

<div class="monoblocs_variante_texte">
<p>
<img src="image_index/drapeau_fr.jpg" class="drapeau_19_10" alt="Allemand" /> Hippo Tonic<br /><br />
<span class="rouge_t12">Recherche : 0</span><br />
<span class="vert_t12">Echange : 0</span><br /><br />
Spécificité : Pas de lunette
</p>
</div>

<div class="monoblocs_variante_image_1">
<img src="monoblocs/image_monoblocs/la-bande-des-hippos/hippo-tonic-all.jpg" class="image_monoblocs_150_150" alt="Hippo Tonic" />
<p><span class="noir_t11">Variante Francaise</p>
</div>

</div>

<br />
<br />

<!-- MENU RAPIDE DE LA PAGE -->

<div class="encadrement_bleu">
<a name="variantes"></a>
<p>
<a href="?page=la_bande_des_hippos#informations">Informations</a> | 
<a href="?page=la_bande_des_hippos#figurines">Figurines</a> | 
<a href="?page=la_bande_des_hippos#variantes">Variantes</a> | 
<a href="?page=la_bande_des_hippos#images">Images</a>
</p>
</div>

<br />
<br />

<!-- UNE IMAGE -->

<p>
<br /><img src="monoblocs/image_monoblocs/la-bande-des-hippos/bpz-recto-fr.jpg" class="bpz_monoblocs" alt="" />
<br />La Bande des Hippos - 1992 - France | <span class="rouge_t12">Recherche : 0</span> | <span class="vert_t12">Echange : 0</span>
</p>

Donc comme vous pouvez le voir je met bien 2 br a chaque foi entre chaque block mais tout se colle boudiou Smiley cligne

Le css, toujours comme avant avec les lignes du menu rapide et de l'image (les deux utilisés plus haut sans problême donc non impliqués dans le probleme).

/* premier ensemble */
.cadre_ensemble
{ FLOAT:left; /* ou clear:both donne rien */ BORDER:solid #0066FF 1px; WIDTH:500px; }

.monoblocs_variante_image_1
{ FLOAT:left; BORDER:solid #000000 0px; WIDTH:155px; }
.monoblocs_variante_image_2
{ FLOAT:left; BORDER:solid #000000 0px; WIDTH:155px; }
.monoblocs_variante_texte
{ FLOAT:left; MARGIN-LEFT:10px; MARGIN-RIGHT:10px; WIDTH:155px; }

.image_monoblocs_150_150
{ WIDTH:150px; HEIGHT:150px; BORDER-WIDTH:0px; }

/* encadrement du menu rapide */
.encadrement_bleu
{ FLOAT:left; BORDER-TOP:solid #0066FF 2px; BORDER-BOTTOM:solid #0066FF 2px; WIDTH:100%; }

Si quelqu'un aurai une autre idée, sinon je vais devoir passer par des tableaux je crois bien... Smiley ohwell

Mici

doomer

14 May 2005 à 19:26

Peux tu mettre un lien pour voir ce que ela donne car j'ai la flemme de faire des coper coller et de creer des pages web Smiley cligne

Merci

Vinz

14 May 2005 à 19:34

Vala le lien exact (c'est en bas de la page), vous pourrez voir ce que je veux (IE) et le chti problême sour FF.
Merci Smiley smile

http://www.oeufs-kinder-surprise.com/kinder-surprise/?page=la_bande_des_hippos

doomer

14 May 2005 à 19:58

Que veux tu exactement car je me perd dans tes sources et quand je regarde sous IE et Firefox je vois le même rendu !

gilles6975

14 May 2005 à 20:01

Euh je ne voudrais pas être lourd (mais non mais non)
Dans ton CSS je crée :

.clearboth{
clear:both;}

dans le XHTML je mets à la place des 2 <br />

<div class="clearboth"><br /></div>

et les espaces se font naturellement .........

Peut être n'as tu pas utilisé cette propriété comme moi !

Je n'arrive pas a mettre une capture mais je peux te le mettre sur un serveur si tu veux !

EDITION : je m'excuse c'est un peu sec Smiley biggol

Modifié par gilles6975 (14 May 2005 - 20:09)

doomer

14 May 2005 à 20:03

Tu pourrais même mettre :


<br class="clearboth" />

Vinz

14 May 2005 à 20:10

Nikel ce class clearboth, je ne savais pas que ca se faisait, je n'y avait meme pas songer un instant Smiley lol

Ca vous arrive de vous retrouver dans cette situation et d'utiliser ce clear comme cela régulierement?
(ps : j'avais utilisé le clear sur la class "ensemble" c'est pour cela que ca ne marchait pas)

Encore merci Smiley smile

gilles6975

14 May 2005 à 20:16

Bah la seule facon de sortir d'un flux c'est de dire je veux sortir du flux donc je met clear et apres je lui dit comment je veux en sortir both, right, etc...

Sinon je n'ai pas compris pourquoi tu mets des flottants ici ! Si quelqu'un possede l'ecran Apple géant (certes c'est rare) il va voir 2 images l'une a coté de l'autre et non l'une au dessus de l'autre ! A moins que ta div conteneur soit de largeur fixe (j'ai pas vérifié).

Désolé d'avoir était un peu sec mais comme tu avais dans ta réponse renvoyé un "les clear j'ai essayé ca marche pas" j'ai eu un peu l'impression que tu ne te foulais pas trop. Peut être aurait il fallu dire : "j'ai essayé les clear mais je n'y arrive pas comment faites vous ?"

Sans rancune au plaisir de pouvoir t'aider de nouveau.

Maintenant reste a éditer ton premier post et a mettre le tague [Résolu] dans le titre.

Vinz

15 May 2005 à 10:41

Je ne l'ai pas pris mal du tout, ne t'inquiete pas Smiley cligne

Pour les float, ma largeur de colone est effectivement fixe !

Vincent

Sujet clos