Menu Déroulant, Block et Firefox

Signaler
Messages postés
20
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
25 mai 2005
-
Messages postés
20
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
25 mai 2005
-
Bien le bonjour, je viens encore pour vous poser une question à la con...



Voila, je viens de réaliser de magnifiques (un peu de modestie voyons),
de jolis menus déroulants, dans lequels j'utilise une fontion du style:



function OpenOrClose(ID)

{

if (document.getElementById(ID).style.display == 'none')

{

document.getElementById(ID).style.display = 'block';

}

else

{

document.getElementById(ID).style.display = 'none';

}

}



Sous IE, ca fonctionne nickel, par contre sous Firefox, lorsque je
ferme mon bloc, il disparait, mais laisse un espace vide à la place...
Espace qui s'accumule avec les ouvertures/fermetures.



Une idée?

Merci d'avance...



NOTE : La fonction est appliquée sur une balise <tr>, faisant la mise en page du menu grace à un tableau...

7 réponses

Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
Salut!

Je n'ai jamais vu un comportement semblable avec firefox. Ça peut venir de d'autre chose. Donne ton code en entier ou un lien ou tu déposeras le code pour permettre de tester ce comportement.

A+, Ghislain
Messages postés
20
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
25 mai 2005

Oups, désolé, je me suis un peu embalé au dessus...



Bref, voila le code demandé, je vous previens, c'est pas beau du tout,
de mon coté y a les images qui vont bien, mais j'ai compressé au max
(tout en gardant le bug...)



<html>



<head>



<script language="JavaScript">

function OpenOrClose(ID)

{

if (document.getElementById(ID+'_menu').style.display == 'none')

{

document.getElementById(ID+'_menu').style.display = 'block';

}

else

{

document.getElementById(ID+'_menu').style.display = 'none';

}

}

</script>



<style type="text/css">



th { background-color: blue ; width: 300px ; }



td.left, td.right{ background-color : yellow; width: 2px; }



td.bottom { background-color : yellow; height: 2px; }



td.menu {width: 291px}



</style>









</head>

Lancement |

----

,

Toto

Toto

Toto




</html>
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
Salut!

C'est vraiement étrange. J'ai bien essayé de coutourner en coservant les tr's que tu avais mis mais sans succès. Probablement un bug.

Voici ce que je te sugères :


<html>
<head>

<script language= "JavaScript">

function OpenOrClose
(ID
)

{

if
(document
.getElementById
(ID
+'_menu'
).style
.display
== 'none'
)

{
document
.getElementById
(ID
+'_menu'
).style
.display
= 'block';

}

else

{
document
.getElementById
(ID
+'_menu'
).style
.display
= 'none';

}

}

</script>

<style
type ="
text/
css">

.menu
{border-
bottom:2px
solid
yellow;
width:300px;}

.titre
{cursor:hand;
background-
color:
blue
;
font-
weight:bold;
text-
align:center;}

.menuItem
{border-
right:2px
solid
yellow;border-
left:2px
solid
yellow;}

</style>
</head>

border=
\"0\"
cellspacing=
\"0\"
height=
\"0px\"
class=
\"menu\">

----

"OpenOrClose('lan');" class=
"titre"> Lancement

"lan_menu" style=
"display:none" class=
"menuItem">

Toto

Toto

Toto

,

</html>

A+, Ghislain
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
Salut!

A la limite, balance le table au complet :


<html>
<head>
<script language= "JavaScript">
function OpenOrClose(ID)
{

if (document.getElementById(ID+'_menu').style.display == 'none')
{

document.getElementById(ID+'_menu').style.display = 'block';
}

else
{

document.getElementById(ID+'_menu').style.display = 'none';
}

}

</script>
<style type ="text/css">
.
menu {
border-bottom:
2px solid yellow;
width:
300px;}

.
titre {
cursor:
pointer;
background-color:
blue ;
font-weight:
bold;
text-align:
center;
width:
100%}

.
menuItem {
border-right:
2px solid yellow;
border-left:
2px solid yellow;}

</style>
</head>

"menu"
>

"OpenOrClose('lan');" class="titre"> Lancement

"lan_menu" style="display:none" class="menuItem">
[toto.html Toto ]

[toto.html Toto ]

[toto.html Toto ]

</html>

a+, Ghislain
Messages postés
20
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
25 mai 2005

Oui, mais avec ca, je perd les bandes latérales de la table, qui me
permettent, en y mettant l'image qui va bien, de faire un magnifique
menu...



A la rigueur, je peux toujours mettre une table, au coeur de la balise div centrale, mais c'est carrement maladroit...
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
Salut!

J'ai essayé un autre chose et ça fonctionné et ce avec ton code original.


<script language= "JavaScript">

function OpenOrClose
(ID
)

{

if
(document
.getElementById
(ID
+'_menu'
).style
.display
== 'none'
)

{
document
.getElementById
(ID
+'_menu'
).style
.display
= '';

}

else

{
document
.getElementById
(ID
+'_menu'
).style
.display
= 'none';

}

}

</script>

En fait j'ai enlevé le block et remplacer par une chaine vide.

A+
Messages postés
20
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
25 mai 2005

Ca marche nickel!



Merci...



PS ca doit quand même être un bug...