Rechercher : dans
Par :

Problème de <div> affichage IE/Firefox

Dernière réponse le 7 nov 2007 à 23:28:15 10de3, le 7 nov 2007 à 21:41:20 
 Signaler ce message aux modérateurs

Bonjour,
Premier post sur le forum de ccm, et pourtant il m'a déjà beaucoup servi, donc tout d'abord merci !



Voila, comme je le dis dans l'objet, j'ai un problème d'affichage entre IE et Firefox... c tj galère, et pour une fois, c'est IE qui affiche ce que je veux !!
Le problème est d'afficher un div dans un autre div. Avant de vous expliquer, les preuves parlent plus : merci de faire un tour sur la page en question ici:

http://etudesjuniorisep.ovh.org/cardio_pmc/index.php?lien=ca­rdiologues_pmc
Le site est en construction, le login est "visiteur", le mot de passe idem : "visiteur"


Sous IE pas de pb. Mais avec Firefox la taille du div que j'ai nommé "corps" ne s'ajuste pas à son contenu.

Voila comment je l'ai construit : plutôt que de faire un tableau dans <div id="corps">, j'ai créé dans ce corps un <div id="coordonnees_cardiologue" > dans lequel j'ai défini des <span class=""> pour définir les couleurs de fond.

Voici le code contenu dans <div id="corps"> :

<h1>Les coordonnées des médecins</h1>


     <div id="coordonnees_cardiologue">
     
     <span class="coordonnees_cardiologue_photo">
          <img  src="images/cardiologue_JPB.png" > </span>
     <span class="coordonnees_cardiologue_nom">
     Dr  </span>
     <span class="coordonnees_cardiologue_telephone">
     Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>
<br>

     <span class="coordonnees_cardiologue_photo">
          <img  src="images/cardiologue_AK.png" > </span>
     <span class="coordonnees_cardiologue_nom">
     Dr </span>
     <span class="coordonnees_cardiologue_telephone">
     Secrétaire . . . . . . . . . . . . : 00.00.00.00.00<br>Fax . . . . . . . . . . . . . . . . . . : 00.00.00.00.00 </span>

     </div>



Et voici la partie du css en question :
/* le corps de la page */
#corps
{
   width: 580px;
   margin-left: 180px;
   margin-bottom: 20px;
   padding-top:5px;
   padding-bottom:25px;
   padding-left:20px;
   padding-right:20px;

   background-color: #EAECF5;
   background-image: url("../images/pied_de_page.png");
   background-repeat: no-repeat;
   background-position : bottom left;
}

/* le "talbeau" de coordonnées*/
#coordonnees_cardiologue
{
   width: 450px;
}
.coordonnees_cardiologue_photo
{
   width: 100px;
   height: 75px;
   margin-top: 20px;
   float:left;
}
.coordonnees_cardiologue_nom
{
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

   width: 300px;
   height: 20px;
   padding-top:5px;
   padding-left:5px;
   padding-right:5px;
   margin-top: 20px;
   float:left;
   
   background-color: #8EDC88;
}
.coordonnees_cardiologue_telephone
{
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   width: 300px;
   height: 45px;
   padding-top:5px;
   padding-left:5px;
   padding-right:5px;
   float:left;
   
   background-color: #0694D2;
}



Ma question est simple : comment remédier à ce problème (pour ceux qui ne s'en souviennent plus, c'est le <div id="corps"> qui est plus court que son contenu) ?
Je ne suis qu'un petit débutant, donc s'il ne faut pas du tout s'y prendre comme ça, je ne vous en voudrais pas de me diriger vers un lien qui pourrais tout m'expliquer.

Un grand merci pour votre aide
Configuration: Windows XP
Firefox 2.0.0.9

Meilleures réponses pour « Problème de
affichage IE/Firefox » dans :
Afficher les images et les animations Flash dans le navigateur VoirQuand vous allez sur un site internet, vous n'avez plus d'images affichées ; elles sont remplacées par un petit rectangle avec un carré rouge ou un triangle bleu (par exemple). 1 - Vérifier d'abord les paramètres de votre navigateur : Pour...
[Firefox] Désactiver/Effacer les suggestions de la awesome bar VoirIl est possible de désactiver la "barre d'adresse intelligente" de Firefox 3. Pour cela : Dans la barre d'adresse, tapez about:config et validez. Dans le champ filtre, tapez browser.urlbar.maxRichResults : Cliquez sur...

1

Strat, le 7 nov 2007 à 21:45:00

J'ai pas tout regardé, mais tu peux essayer de bidouiller avec des instructions conditionelles css, dans ton css. C'est pas joli, mais ca peut faire l'affaire.

Répondre à Strat

2

SleanX, le 7 nov 2007 à 21:48:16

Salut,

Désolé, je crois que j'ai pas bien compris ton problème, c'est quel div qui est de la mauvaise taille? Parce-que pour moi tout est normal, sur mon Firefox...


(juste, petit conseil perso, la couleur du div ou y'a les coordonnées, ça sortirait mieux en bleu clair, juste un petit peu plus clair que le bleu que tu as en banner... ;) )

Répondre à SleanX

3

Dalida, le 7 nov 2007 à 21:50:24

Salut,

c'est le flottement qui mets le bronx.
ajoute un '<hr />' en bas du '<div>' conteneur.

et en css tu lui appliques :

hr
{
clear:left;
visibility:hidden;
}


ça devrait rentrer dans l'ordre (des médecins ?!).

(-> je sors…)

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

4

10de3, le 7 nov 2007 à 22:34:57

Pour strat :
Effectivement, je pourrais m'en sortir comme ça, mais moi qui essaie de faire un site simple mais "proprement", autant retourner à mon dreamweaver dans ce cas ! Cependant, merci pour ta reflexion, car je me rappelle qu'un ami qui code pas mal m'a dit qu'il faisait deux feuilles css et il met juste une condition (pas dans le css tout partout..) pour appeler la bonne feuille de style suivant le navigateur du visiteur.

Pour SleanX:
C'est quoi ta version de firefox ? bizarre bizarre...
Merci pour le conseil, effectivement c pas mal je peaufinerai à la fin !

Pour Dalida:
je teste et je te tiens au courant

Répondre à 10de3

5

SleanX, le 7 nov 2007 à 22:38:13

C'est la 2.0.0.9, la dernière, il me semble... Peut-être que j'ai mal compris ton problème, aussi... Mais tout parraît correct...

Répondre à SleanX

6

Dalida, le 7 nov 2007 à 22:40:16

Regarde bien, c'est l'habillage bleu derrière les infos qui n'est pas à la même hauteur.
si tu n'as pas IE Tab pour FF je te le conseille, comme ça tu as les deux versions dans deux onglets de FF, pratique pour comparer !!!

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

7

SleanX, le 7 nov 2007 à 22:45:41

Hum...^^

Quand j'essaie avec IE, y'a tout qui se p*te la g**...^^ Avec FF, tout est correctement alligné, mais dans IE, la première est bonne, mais les autres sont plus hautes et à droite, sauf la 2ème qui est trop haute, mais au milieu.... :S

Répondre à SleanX

8

SleanX, le 7 nov 2007 à 22:48:04

Ah, je me rends compte maintenant que le cadre du fond est effectivement mal cadré...^^

Et si tu essaies de simplement changer la hauter de ton div? en ajoutant une ligne

height: 700px; 
?

Répondre à SleanX

9

SleanX, le 7 nov 2007 à 22:56:42

Oulah (désolé pour le multi-massage, mais...)
Tu as tout changé?

parce que maintenant même sous FF, c'est le bronx...

Répondre à SleanX

10

10de3, le 7 nov 2007 à 23:19:02

Dalida, tu avais bien raison... ce n'est pas que je doutais..mais j'ai eu un peu de mal à le mettre en place !
La solution est là
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec­-les-css/
je ne sais pas si j'ai le droit mais je met l'article pour éviter aux suivant de passer deux heures sur ce problème

Clearfix

L’horreur absolu quand vous réaliser votre design, ce sont les interactions entre float et clear. Et selon votre design, vous pourrez rencontrer deux problèmes assez gênants.

Le premier problème est qu’un élément en flottant à gauche ou à droite ne redimensionne pas son parent. Un exemple simple :

 1.
      <style>
   2.
          .parent {
   3.
              border: 1px solid #000;
   4.
              padding:5px;
   5.
          }
   6.
          .flottant {
   7.
              float: left;
   8.
              width: 150px;
   9.
              border:1px solid #F00;
  10.
          }
  11.
      </style>
  12.
       
  13.
      <div class="parent">
  14.
         <div class="flottant">Cette colonne ne redimensionne pas correctement le DIV qui la contient.</div>
  15.
         Ce texte est le seul à redimensionner le DIV qui le contient.
  16.
      </div>

Dans cet exemple, le flottant dépasse du cadre du parent. Pas très esthétique… Heureusement, le simple ajout d’une classe CSS au parent peut arranger ça.

   1.
      <style>
   2.
         .parent {
   3.
            border: 1px solid #000;
   4.
            padding:5px;
   5.
         }
   6.
       
   7.
         .flottant {
   8.
            float: left;
   9.
            width: 150px;
  10.
            border:1px solid #F00;
  11.
         }
  12.
       
  13.
      .clearfix:after {
  14.
          content: ".";
  15.
          display: block;
  16.
          height: 0;
  17.
          clear: both;
  18.
          visibility: hidden;
  19.
      }
  20.
       
  21.
      .clearfix {display: inline-block;}
  22.
       
  23.
      /* Hides from IE-mac */
  24.
      * html .clearfix {height: 1%;}
  25.
      .clearfix {display: block;}
  26.
      /* End hide from IE-mac */
  27.
      </style>
  28.
       
  29.
      <div class="parent clearfix">
  30.
         <div class="flottant">Avec le clearfix, cette colonne redimensionne bien le DIV qui la contient.</div>
  31.
         Ce texte n’est plus le seul à redimenssionner le DIV parent mais il peut toujours le faire si il est plus grand que la colonne.
  32.
      </div>



je rappelle l'adresse du site pour ne pas voler la vedette à Sévrerin l'auteur :
http://smashingcoding.com/2007/11/05/partir-du-bon-pied-avec-les-css/

Répondre à 10de3

11

Dalida, le 7 nov 2007 à 23:25:44

Tu ne pouvais me faire plus d'honneur que de confirmer mes dires avec un tel article !

merci mon cher !!!
-;o)

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

Répondre à Dalida

12

 10de3, le 7 nov 2007 à 23:28:15

Pas de b SleanX

et oui, je ne suis pas le premier à dire que tu es notre star à tous dalida, tu connais la chanson !!

Répondre à 10de3