Problème d'affichage sous IE, URGENT (délais)

Résolu
BtK -  
Bonjour,

Toutes les balises CSS du site que je dois rendre opérationnel pour demain soir ne sont pas reconnues par IE et je ne trouve pas de solution ...

Ainsi, la valeur "bottom" du CSS n'est pas prise en compte et l'Iframe n'a pas la bonne hauteur ...

De plus un espace (vertical) se glisse entre les images sous IE ...

Pourtant sous Firefox tout est nickel !

Voici le CSS:

<!--
.box {
position : absolute;
bottom : 24px;
left : 24px;
top : 240px;
}
.page {
position : absolute;
bottom : 24px;
right : 24px;
top : 240px;
}
-->

et le (X)HTML de l'en-tête pour les images (mappées):

<center>

<IMG
src="pix/headerlogo.png"
alt=""
border="0"
width="800"
margin="0"
padding="0"
usemap="#mons"
/>

<map
name="mons">

<area
shape="poly"
coords="70,87,186,81,187,105,71,110"
href="https://www.mons.be/"
target="_blank"
alt=""
/>

</map>

<IMG
src="pix/buttonsbar.png"
alt=""
border="0"
width="800"
usemap="#menu"
/>

<map
name="menu">

<area
shape="poly"
coords="0,0,150,0,125,25,0,25"
href="news.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="150,0,250,0,225,25,125,25"
href="events.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="250,0,350,0,325,25,225,25"
href="projets.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="350,0,450,0,425,25,325,25"
href="pv.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="450,0,550,0,525,25,425,25"
href="ccj.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="550,0,650,0,625,25,525,25"
href="contact.php"
target="page"
alt=""
/>

<area
shape="poly"
coords="650,0,800,0,800,25,625,25"
href="#"
target="_self"
alt=""
/>

</map>

<IMG
src="pix/intermenu.png"
alt=""
border="0"
width="800"
/>

</center>

Enfin, voici la page posant problème:

http://www.ccjmons.be/index3.php

Il s'agit d'un site pour une institution communale officielle (Conseil Communal des Jeunes de Mons) et j'ai vraiment besoin d'aide ! D'avance, Merci beaucoup !

21 réponses

Résumé de la discussion

Problème principal : les styles CSS ne sont pas interprétés sous IE, l’affichage de l’iframe est décalé et l’espace entre les images apparaît alors que Firefox les affiche correctement. Des solutions évoquées incluent la suppression des bordures et marges via CSS de reset, le placement prioritaire des règles en ligne et l’emploi éventuel de hacks IE via des conditions. Des messages pointent aussi vers une cause structurelle : des iframes et des inclusions de documents HTML distincts dans une même page, ce qui brouille le comportement CSS sous IE. En pratique, les échanges conseillent d’éviter les structures imbriquées lourdes et de tester les CSS sur IE et Firefox pour identifier les différences et orienter les corrections.

Bobot (l’IA à votre service)
  1. s.spark Contributeur
    Salut,

    Essais de donner une hauteur à tes blocs, height: 65%;.

    Pourquoi utiliser des iframs ? Quelle est l'intérêt ?
    1. BtK
      Merci ^^

      J'avais abandonné cette solution avant de fixer le haut des boites et n'avais pas pensé à y revenir ...

      Il reste le problème des espaces entre les images :s mais merci !
      1. BtK
        Edit: l'Iframe c'est pour gagner du temps ^^ j'ai du concevoir ce site en quelque heures à peines et j'ai récupéré un vieu code que j'avais déjà. Je les remplacerai plus tard par des includes.
      2. s.spark Contributeur
        Je n'ai pas IE6 désolé, je ne vois rien sous IE7.
    3. Dalida Contributeur
      salut,

      effectivement sous IE6, y a soucis…

      je ne comprends rien au code source.
      il y a bien des '<iframe>' pour 'news.php' et la news box mais tu as inclus un deuxième document html (avec DTD, head et tout la toutime) dans le premier document html…

      ça fait un peu désordre tout de même !
      2. BtK
        Lol oui je sais c'est la faute aux Iframes ... C'est brouillon mais c'est correct (j'ai un autre site qui fonctionne comme cela et qui marche très bien). Normalement le problème vient de la partie du code que j'ai cité, même si je ne vois pas du tout de ou ... Je ne pense pas que le problème vienne du fait qu'il y ait plusieurs html, body, head, etc, j'ai déjà testé en les retirant de la page appelée ... La seule différence est que le CSS de ces pages ne fonctionne plus ^^.
        1. Dalida Contributeur
          si tu le dis…

          as-tu remarqué que tes règles de style (citées plus haut) sont redéfinies dans le deuxième '<head>' ? 
             <!--
   .box {                                                                                               
   position : absolute;                                                                                 
   bottom : 24px;
   left : 50%;
   width : 226px;
   margin-left : -400px;
   top : 240px;
    }                                                                                                   
   .page {                                                                                              
   position : absolute;                                                                                 
   bottom : 24px;
   right : 50%;
   width : 550px;
   margin-right : -400px;
   top : 240px;
  -->

          et en théorie c'est le dernier défini qui est appliqué !
          1. BtK
            Oui je sais ... Mais c'est le même fichier qui est appelé deux fois ^^ Je sais c'est pas orthodoxe ni catholique mais je n'ai pas le temps pour le moment de remettre ça en ordre, ça ira mieux lorsque j'aurais mis des includes.
            1. Dalida Contributeur
              ça c'est sûr mais tu as écrit "Normalement le problème vient de la partie du code que j'ai cité, même si je ne vois pas du tout de ou".
              et si tu regardes ce screen shot de ta page inspectée par FireBug tu verra que le code cité est appliqué puis écrasé par l'autre.
              je cherche par rapport à ce que tu nous as donné, je ne te dis pas de refaire la page !
              1. s.spark Contributeur
                Je crois que perd plus de temps à dire que tu amélioreras le site plutôt que de le faire.
                1. BtK
                  Ha oui d'accords je vois ce que tu veux dire ^^ Mais s.scap a trouvé la solution pour le CSS des bloc Iframe (valeur height en %). Le seul problème qu'il reste est l'espace entre les images et celles-ci ne sont pas gérées par le CSS. Quand je dis que le problème est dans le code cité, je parle de cette partie:

                  <center>

                  <IMG
                  src="pix/headerlogo.png"
                  alt=""
                  border="0"
                  width="800"
                  margin="0"
                  padding="0"
                  usemap="#mons"
                  />

                  <map
                  name="mons">

                  <area
                  shape="poly"
                  coords="70,87,186,81,187,105,71,110"
                  href="https://www.mons.be/"
                  target="_blank"
                  alt=""
                  />

                  </map>

                  <IMG
                  src="pix/buttonsbar.png"
                  alt=""
                  border="0"
                  width="800"
                  usemap="#menu"
                  />

                  <map
                  name="menu">

                  <area
                  shape="poly"
                  coords="0,0,150,0,125,25,0,25"
                  href="news.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="150,0,250,0,225,25,125,25"
                  href="events.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="250,0,350,0,325,25,225,25"
                  href="projets.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="350,0,450,0,425,25,325,25"
                  href="pv.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="450,0,550,0,525,25,425,25"
                  href="ccj.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="550,0,650,0,625,25,525,25"
                  href="contact.php"
                  target="page"
                  alt=""
                  />

                  <area
                  shape="poly"
                  coords="650,0,800,0,800,25,625,25"
                  href="#"
                  target="_self"
                  alt=""
                  />

                  </map>

                  <IMG
                  src="pix/intermenu.png"
                  alt=""
                  border="0"
                  width="800"
                  />

                  </center>
                  1. BtK
                    s.spark ... desole :$ heu oui sûrement mais je ne maîtrise pas du tout le PHP et même une bête include ça me fera beaucoup de chipotage ... De toute façon le problème n'est as là ^^. Mais merci d'essayer de m'aider :-)

                    Mathieu, je débute aussi en CSS et n'y avais pas pensé, je teste merci. Le problème se situe autour de la barre de menu. Il faut regarder avec Firefox aussi pour voir la différence.
                2. Dalida Contributeur
                  je ne vois pas d'espace entre les images, mais bon !
                  sous IE6 je ne vois que bannière/menu.

                  bref.
                  as-tu pensé à faire sauter bordure et marges/espacement aussi dans la css ? 
                  img
{
border-style:none;
margin:0;
padding:0;
}

                  il faudrait sans doute ajouter du poids aux règles.

                  et dis moi quelles images que je les scrute avec Firebug.
                  1. BtK
                    Non désolé ça ne change rien ...

                    Maintenant je l'ai peut-être mal fait ...

                    <STYLE
                    type="text/css">

                    <!--
                    .box {
                    position : absolute;
                    left : 24px;
                    top : 240px;
                    }
                    .page {
                    position : absolute;
                    right : 24px;
                    top : 240px;
                    }
                    img {
                    border-style:none;
                    margin:0;
                    padding:0;
                    }
                    -->
                    </STYLE>

                    et les images sont devenues du type

                    <IMG
                    src="pix/headerlogo.png"
                    class="img"
                    alt=""
                    border="0"
                    width="800"
                    margin="0"
                    padding="0"
                    usemap="#mons"
                    />
                    1. Dalida Contributeur
                      ça peut être une problème de poids (priorité)
                      essaie avec le code ci-dessous, c'est bourrin mais bon !…
                    2. BtK
                      @DalidaAu point ou en est mon code XD je teste, merci :)
                  2. Dalida Contributeur
                    ah oui !
                    j'avais pas fais gaffe, je préfère avec l'espacement…

                    pour la css, embarque là dans la balise, comme ça elle est prioritaire sur tout !!!
                    au passage tu peux le coller dans les autres balises, on va ratisser très large !!! 
                      <DIV
    align="center"  style="margin:0; padding:0;">

    <center  style="margin:0; padding:0;">

  <IMG
    src="pix/headerlogo.png"
    alt=""                                                                                              
    border="0"                                                                                          
    width="800"
    margin="0"
    padding="0"
    usemap="#mons"
    style="border-style:none; margin:0; padding:0;"
    />

  <map
    name="mons"  style="margin:0; padding:0;">
                    1. BtK
                      Voilà c'est fait, le problème est toujours là ... =s

                      N'est-il pas possible d'utiliser un padding négatif ? En utilisant un commentaire <!--[if IE]> pour éviter de manger les bords sous Firefox ...

                      Ca pourrait marcher ?
                      1. Dalida Contributeur
                        je n'en sais rien mais complexifier encore ton code c'est suicidaire…
                        essaie de faire sauter la balise '<center>' ce sera toujours ça de moins. 
                        <DIV
    align="center"  style="margin:0; padding:0; text-align:center;">

  <IMG
    src="pix/headerlogo.png"
    alt=""                                                                                              
    border="0"                                                                                          
    width="800"
    margin="0"
    padding="0"
    usemap="#mons"
    style="border-style:none; margin:0; padding:0;"
    />
[...]
                        2. BtK
                          Je pense aussi ^^ mais il faut payer 1€ par Paypal, je n'ai aucun autre moyen de paiement que cash (suis mineur) donc ça ne marche pas ...

                          Merci quand même :)
                          2. BtK
                            Waa un truc très compliqué ou ya beaucoup à lire :p lol merci ^^ Donc j'avais raison je dois partir dans les hack CSS et commentaire <!--[if IE]> ^^

                            Je pense que ça devrais marcher, merci bien :)
                            1. BtK
                              Toutefois, si quelqu'un a une solution plus simple ou plus orthodoxe, je suis preneur !
                              • 1
                              • 2

                              Discussions similaires

                              league of legend impossible d'initialiser le dispositif d'affichage
                              pascontent

                              5 réponses
                              Facebook ne s'affiche plus correctement.
                              Twibault

                              36 réponses
                              Les images n'apparaissent pas Messenger
                              Ricky

                              4 réponses
                              Prélèvement inconnu APPLE.COM/BILL ORIGINE IRL
                              leon274

                              1 réponse
                              Bug d'affichage sur ma Freebox Revolution
                              BourrinOman83

                              4 réponses