Problème de <div> affichage IE/Firefox

Résolu
10de3 Messages postés 22 Date d'inscription   Statut Membre Dernière intervention   -  
 Frederic -
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=cardiologues_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
A voir également:

10 réponses

Réponse 1 / 10
10de3 Messages postés 22 Date d'inscription   Statut Membre Dernière intervention   3
 
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/
2
Réponse 2 / 10
Strat Messages postés 61 Date d'inscription   Statut Membre Dernière intervention   1
 
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.
1
Réponse 3 / 10
SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   1
 
oulah (désolé pour le multi-massage, mais...)
Tu as tout changé?

parce que maintenant même sous FF, c'est le bronx...
1
Réponse 4 / 10
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
tu ne pouvais me faire plus d'honneur que de confirmer mes dires avec un tel article !

merci mon cher !!!
-;o)
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
10de3 Messages postés 22 Date d'inscription   Statut Membre Dernière intervention   3
 
pas de b SleanX

et oui, je ne suis pas le premier à dire que tu es notre star à tous dalida, tu connais la chanson !!
1
Réponse 6 / 10
SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   1
 
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... ;) )
0
Réponse 7 / 10
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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…)
0
Frederic
 
Merci Dalida!

3 heures que je galère avec le même problème... et hop! en 3 secondes.

Merci Docteur
0
Réponse 8 / 10
10de3 Messages postés 22 Date d'inscription   Statut Membre Dernière intervention   3
 
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
0
SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   1
 
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...
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922 > SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention  
 
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 !!!
0
Réponse 9 / 10
SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   1
 
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
0
Réponse 10 / 10
SleanX Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   1
 
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;
?
0

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses