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

Résolu
BtK -  
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   -
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

  • 1
  • 2
  1. s.spark Messages postés 2528 Statut Contributeur 618
     
    Salut,

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

    Pourquoi utiliser des iframs ? Quelle est l'intérêt ?
    0
  2. 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 !
    0
    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.
      0
    2. s.spark Messages postés 2528 Statut Contributeur 618
       
      Je n'ai pas IE6 désolé, je ne vois rien sous IE7.
      0
  4. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    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 !
    0

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

    Posez votre question
  6. 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 ^^.
    0
  7. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    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é !
    0
  8. 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.
    0
  9. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    ç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 !
    0
  10. s.spark Messages postés 2528 Statut Contributeur 618
     
    Je crois que perd plus de temps à dire que tu amélioreras le site plutôt que de le faire.
    0
  11. 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>
    0
    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.
      0
  12. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    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.
    0
  13. 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"
    />
    0
    1. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
       
      ça peut être une problème de poids (priorité)
      essaie avec le code ci-dessous, c'est bourrin mais bon !…
      0
      1. BtK > Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention  
         
        Au point ou en est mon code XD je teste, merci :)
        0
  14. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    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;">
    0
  15. 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 ?
    0
  16. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    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;"
    />
[...]
    0
  18. 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 :)
    0
  19. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Bonjour,

    Une piste haslayout peut-être ?

    --
    0
  20. 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 :)
    0
  21. BtK
     
    Toutefois, si quelqu'un a une solution plus simple ou plus orthodoxe, je suis preneur !
    0
  • 1
  • 2

Discussions similaires

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

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

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

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

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

4 réponses