Problème lors de l'affichage de div sous IE7

Résolu
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008 - 22 août 2008 à 17:54
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008 - 8 sept. 2008 à 15:59
Bonjour,

Le problème a déjà été évoqué mais malgré la lecture des postes et tutos sur internet, je ne suis pas parvenu a résoudre le problème:

J'ai une fonction qui me permet d'ouvrir et de fermer des divs. Je l'utilise pour hiérarchiser un menu (contenant des liens).
Cela fonctionne très bien sous Firefox mais sous Ie, la div s'ouvre mais le contenu de la div ne s'affiche pas...

L'ouverture est obtenue par un changement de class css

Voici le lien vers le site: http://archersermont.e3b.org

et les codes utilisés:

le CSS
.cachediv {
    position:relative;
    display: none;
    width:0px;
    height:0px;
    left:25px;
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bordDiv{
    position:relative;
    display:block;
    left:20px;
    color:#0000FF;
    text-align: center;
    border-width: 0px;
    z-index : 1;
}

Le JS
function DivStatus( nom )
        {
            if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {
                    Pdiv = document.getElementById( nom );
                    PcH = true;
                 }
            else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {
                    Pdiv = document.all[ nom ];
                    PcH = true;
                }
            else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {
                    Pdiv = document.layers[ nom ];
                    PcH = true;
                }
            else
                {
                    PcH = false;
                }
            if ( PcH )
                {
                    if(Pdiv.className=='cachediv')
                        Pdiv.className = 'bordDiv';
                    else
                        Pdiv.className = 'cachediv';
                }
        }

et un exemple de html:
    [javascript:; Vie de la compagnie]

   

        [./index.php?localisation=travaux évènements]

        concours

   

Je pense que la faute est au javascript mais je ne connais pas assez pour en être certain.
Si quelqu'un a une idée.

Merci d'avance.

15 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 août 2008 à 08:41
et pourant, en ne modifiant que cela
sur ce que tu nous donnes.... ben ça baigne !


<style>
.cachediv {
position:relative;
display: none;
width:0px;
height:0px;
left:25px;
color:#000000;
text-align: center;
border-width: 0px;
}
.bordDiv{
position:relative;
display:block;
left:20px;
color:#0000FF;
text-align: center;
border-width: 0px;
z-index : 1;
}
</style>
<script>
function DivStatus( nom )
{ if ( document.getElementById && document.getElementById( nom ) )
{ Pdiv = document.getElementById( nom );
PcH = true;
}
else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
{ Pdiv = document.all[ nom ];
PcH = true;
}
else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
{ Pdiv = document.layers[ nom ];
PcH = true;
}
else
{ PcH = false; }
if ( PcH )
{ if(Pdiv.className=='cachediv')
Pdiv.className = 'bordDiv';
else
Pdiv.className = 'cachediv';
}
}
</script>
[javascript:void(DivStatus('vie')); Vie de la compagnie]




[./index.php?localisation=travaux évènements]

concours






donc... tu appliques pas tout à fait comme il faut ?
on n'a pas tout ?



@+
3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 août 2008 à 10:33
quelques explications...

  [; Vie de la compagnie]

que se passe-til ( valda ) ?
on exécute la fonction DivStatus; puis on affiche la page dans le href
; déjà ça doit pas lui plaire.
# à la limite, mais ça rechargerait la page, donc remettrait le div comme à l'origine
il faudrait mettre un return false à la fin du onclick

perso je n'aime pas trop ajouter un évênement là où il y
a quelque chose de prévu pour.... pourquoi un onclick
dans une balsise M'écrire], <!--
3
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
2 sept. 2008 à 07:28
et alors ?
si on ajoute un css ( parce que le tien, on ne l'a pas )

le div "administratif" est bien modifié en conséquence...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
         <style>
            .cachediv       {    background-color:red;    }
            .bordDiv        {    background-color:blue;    }
         </style>
        <meta name="robots" content="follow,index" />
        <meta name="Identifier-URL" content="http://archersermont.e3b.org/" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
            function DivStatus( nom )
            {   if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {   Pdiv = document.getElementById( nom );
                    PcH = true;
                }
                else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {   Pdiv = document.all[ nom ];
                    PcH = true;
                }
                else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {   Pdiv = document.layers[ nom ];
                    PcH = true;
                }
                else
                {  PcH = false; }
                if ( PcH )
                {   if(    Pdiv.className=='cachediv')
                        {    Pdiv.className = 'bordDiv';    }
                    else
                        Pdiv.className = 'cachediv';
                }
            }
        </script>
    </head>
   
       

           

                [./index.php?localisation=acceuil accueil]

                [javascript:void(DivStatus('vie')); Vie de la compagnie]

               

                    [./index.php?localisation=travaux évènements]

                    concours

                    photos

                    forum

               

                [javascript:void(DivStatus(' administratif ')); administratif]

               

                    [./index.php?localisation =tarifs horaires et tarifs]

                    [./index.php?localisation=bureau bureau]

                   
class="cachediv">
                        [./administration.php administration]

                        [index.php?localisation=profile modifier son profile]

                        [index.php?localisation=info Recherche d'informations]

                   

               

           

       
  
   
</html>

bien entendu pas le div "gestion" inclucs, puisqu'il a lui aussi sa class.
si tu veux le cacher en même temps, _ fais le explicitement _ enlêve sa class
_enlêve la balise div

Cordialement   Bul  [mon Site] [M'écrire], <!--
3
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
22 août 2008 à 18:17
Salut,

Essai ça :

            if ( PcH )
                {
                    if(Pdiv.className= ='cachediv')
                        Pdiv. style. className = 'bordDiv';
                    else
                        Pdiv.style.className = 'cachediv';
                }

a++

Si la réponse vous convient, pensez : Réponse acceptée !
0

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

Posez votre question
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
22 août 2008 à 21:08
Bonjour,

Cela ne fonctionne pas. Je ne pense pas que le className soit une propriété du style car cela empêche le fonctionnement du script sous firefox (en fait il ne se passe rien du tout.).

Merci quand même pour la réponse et pour l'idée :D
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
22 août 2008 à 22:23
bonjour
essayer de cette facon

function DivStatus( nom )
        {
           Pdiv = document.getElementById( nom );
                 
          if(Pdiv.className=='cachediv')
        
}


           Pdiv.className = 'bordDiv';
             else
            Pdiv.className = 'cachediv';
         }
        }


      au niveau de la compatibilite tu balayra au moin  97% des internaute a moins d'avoir une tres vieille version de netscape incompatible avec beaucoup de script au cause de la balise <layer> pour IE ca fait depuis au moins la version 5.5 quil supporte (
document.getElementById)
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
23 août 2008 à 14:27
bonjour,
sur le lien, comme souvent, j'ai eu du mal à voir quoi que ce soit !
mais j'ai regardé un ch'tiot peu ce qui est posté ici,
et perso, déjà je ferais :

    [javascript:void(DivStatus( 'vie' )); Vie de la compagnie]

( avec FF, ça pose aussi des problèmes sinon )

Cordialement        Bul   [mon Site]  [M'écrire], <!--
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
27 août 2008 à 15:41
Bonjour,

Je m'excuse pour le délai de réponse mais  je n'ai pas un accès internet permanent.

Merci pour vos réponses, mais le problème reste le même. (Kazma, tu as mis des accolades fermantes en trop)
[auteur/BULTEZ/51635.aspx bultez]: l'application de ce que tu propose n'as pas changé grand chose, d'ou ma question, le problème etait le onclick ou le contenu de ma balise href? (ou bien est-ce simplement plus proche de la norme?)

pour bien voir le problème, il se trouve au niveau du second et troisième bouton a gauche.

Si quelqu'un a une autre idée.
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
29 août 2008 à 16:20
Bonjour,

bultez:
1) Merci pour l'explication. en effet, il parait logique de ne déclencher qu'un seul évènement... et surtout d'utiliser celui qui est prévu! j'avoue que je n'avais pas réfléchie e cette façon a la question.
2) En effet, lorsque j'essaye le script seul, cela fonctionne correctement. mais lorsque je l'applique au site, (remplacement des deux classes css et application de la "règle" éxpliquée ci dessus) le problème reste le même. donc je dois m'y prendre mal mais je ne vois pas ou ... la div est la seul possédant un z-index donc elle devrais se trouver sur le dessus(il me semble) et lorsque j'essaie de selectionner la zone, le surlignage indique qu'il y a quelquechose mais impossible de les voirs ni de cliquer dessus.

Il ne me semble pas avoir omis quelque chose d'important lors de la rédaction de mon message originel mais pourtant cela doit être le cas ... mais quoi!

je n'ai peut être pas préciser que le code js était dans le fichier index.php qui appèle un fichier border.php (dans lequel se trouve le menu et la partie déroulante) et que le css est dans un fichier .css a part. Mais je ne pense pas que cela joue.

au besoin, si cela peut t'aider et que tu as le temps, je peux t'envoyer les fichiers concernés (tu aurais une vue d'ensemble et verrais peut être une erreur qui ne m'a pas sauter aux yeux...).

Cordialement.
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 août 2008 à 16:40
et l'adresse du site ?    peut-être qu'en y regardant....
parce que ce sont les pages générées qu'il faut voir ! pas le php ...
mais le plus simple ( enfin, le miuex pour nous ), fait un extrait de la page générée
       qui ne fonctionne pas. le nécessaire et pas plus.
CordialementBul[mon Site][M'écrire], <!--
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
1 sept. 2008 à 16:05
Bonjour,

voici l'extrait de la page générée. j'ai laissé volontairement certaines des balises de l'entête car je ne sais pas exactement a quoi elles correspondent.
je note également que le css dont il est question contient les classes tels que tu les as proposés dans ton message.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <link href="./css/habillage.css" rel="stylesheet" type="text/css" />
        <meta name="robots" content="follow,index" />
        <meta name="Identifier-URL" content="http://archersermont.e3b.org/" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <script type="text/javascript">
            /*
            * Montre / Cache un div
            */
            function DivStatus( nom )
            {
                if ( document.getElementById && document.getElementById( nom ) ) // Pour les navigateurs récents
                {
                    Pdiv = document.getElementById( nom );
                    PcH = true;
                }
                else if ( document.all && document.all[ nom ] ) // Pour les veilles versions
                {
                    Pdiv = document.all[ nom ];
                    PcH = true;
                }
                else if ( document.layers && document.layers[ nom ] ) // Pour les très veilles versions
                {
                    Pdiv = document.layers[ nom ];
                    PcH = true;
                }
                else
                {
                    PcH = false;
                }
                if ( PcH )
                {
                    if(Pdiv.className=='cachediv')
                        Pdiv.className = 'bordDiv';
                    else
                        Pdiv.className = 'cachediv';
                }
            }
        </script>
    </head>
   
       

           

                [./index.php?localisation=acceuil accueil]

                [javascript:void(DivStatus('vie')); Vie de la compagnie]

               

                    [./index.php?localisation=travaux évènements]

                    concours

                    photos

                    forum

               

                [javascript:void(DivStatus('administratif')); administratif]

               

                    [./index.php?localisation=tarifs horaires et tarifs]

                    [./index.php?localisation=bureau bureau]

                   

                        [./administration.php administration]

                        [index.php?localisation=profile modifier son profile]

                        [index.php?localisation=info Recherche d'informations]

                   

               

           

       
   
   
</html>

je ne vois pas de problème mais c'est pour cela que je demande de l'aide ^^

merci.

Cordialement.
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
3 sept. 2008 à 15:26
Bonjour,

ainsi, le problème doit provenir du css ...
je donne donc les différentes classes utilisée dans cette partie du code...
(c'est vrais que sans, cela fonctionne très bien ...)

En ce qui concerne la seconde div (la div gestion) elle est sensée être affichée dans le cas ou l'utilisateur est connecté et n'as donc pas d'influence ici.

.border{
    background-color: #0000FF;
    position:absolute;
    left:0px;
    top:0px;
    width:150px;
    height:100%;
}
.bibi{
    background-color: #0000FF;
    position:absolute;
    left:0px;
    top:150px;
    width:150px;
}
.bord{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:15px;
    background-image: url(../images/bouton-lien.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.cachediv {
    position:relative;
    display: none;
    width:0px;
    height:0px;
    left:25px;
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bordDiv{
    position:relative;
    display:block;
    left:20px;
    color:#0000FF;
    text-align: center;
    border-width: 0px;
    z-index : 1;
}
.bord2{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:20px;
    background-image: url(../images/bouton-lien2.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bord3{
    position:relative;
    display: block;
    width:100px;
    height:40px;
    left:15px;
    background-image: url(../images/bouton-lien3.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}
.bord4{
    position:relative;
    display: block;
    width:100px;
    height:30px;
    left:0px;
    background-image: url(../images/bouton-lien4.png);
    color:#000000;
    text-align: center;
    border-width: 0px;
}

le problème viendrais donc de l'une des classes d'affichage des liens?

Cordialement
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 15:57
je me cite :
pas le div "gestion" inclus, puisqu'il a lui aussi sa class.
    si tu veux le cacher en même temps,
        _ fais le explicitement
        _ enlêve sa class
        _enlêve la balise div
        ...
Cordialement    Bul  [mon Site] [M'écrire] |
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
6 sept. 2008 à 16:36
Bonjour,

Je ne pense pas que le problème vienne de la puisque lorsque je l'enlève cela ne change rien. (comme je l'ai dit, l'ouverture de ce div précisément est fait de facon explicite plus tard dans le code).
je n'ai pas encore eu le temps de faire de nouveaux essais et donnerais des nouvelles d'ici quelques jours.

Merci.

Cordialement.
0
illeriane Messages postés 10 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 8 septembre 2008
8 sept. 2008 à 15:59
Bonjour,
J'ai résolu mon problème.
Pour cela j'ai simplement laisser une seule classe js et rajouté un attribut style="display:none" modifiée par la fonction js. (modification: style.display = block;)

cordialement
0
Rejoignez-nous