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

Résolu
BtK -  
Dalida Messages postés 6728 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 !
A voir également:

21 réponses

  • 1
  • 2
Réponse 1 / 21
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
Salut,

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

Pourquoi utiliser des iframs ? Quelle est l'intérêt ?
0
Réponse 2 / 21
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
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
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
Je n'ai pas IE6 désolé, je ne vois rien sous IE7.
0
Réponse 3 / 21
BtK
 
OK, merci quand même :-)
0
Réponse 4 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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

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

Posez votre question
Réponse 5 / 21
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
Réponse 6 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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
Réponse 7 / 21
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
Réponse 8 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
ç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
Réponse 9 / 21
s.spark Messages postés 2485 Date d'inscription   Statut Contributeur Dernière intervention   618
 
Je crois que perd plus de temps à dire que tu amélioreras le site plutôt que de le faire.
0
Réponse 10 / 21
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
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
Réponse 11 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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
Réponse 12 / 21
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
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
ça peut être une problème de poids (priorité)
essaie avec le code ci-dessous, c'est bourrin mais bon !…
0
BtK > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
Au point ou en est mon code XD je teste, merci :)
0
Réponse 13 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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
Réponse 14 / 21
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
Réponse 15 / 21
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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
Réponse 16 / 21
BtK
 
Voila, mais ça ne change rien ...
0
Réponse 17 / 21
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
Réponse 18 / 21
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
Bonjour,

Une piste haslayout peut-être ?

--
0
Réponse 19 / 21
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
Réponse 20 / 21
BtK
 
Toutefois, si quelqu'un a une solution plus simple ou plus orthodoxe, je suis preneur !
0

Discussions similaires

Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
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
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses
Problème d'affichage/bugs graphiques sur Chrome sur Android
Narell -
Narell -

4 réponses