Discussion :

[maelito]

Bonjour,

J'ai fait pour mon site une page qui liste des noms de personnes, avec des informations les concernant.
Mon but est d'afficher pour chaque personne, son numéro de téléphone. A côté de du nom de chaque personne, le visiteur peut cliquer sur une icone qui va faire dérouler tout un paragraphe qui donne des infos plus précise sur cette personne.
Pour cela, j'utilise JQuery, avec le code suivant (dont la structure a été trouvée sur internet, je suis loin d'être un expert en javascript):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".menu_deroulant p.subMenu").hide();
 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
 
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".menu_deroulant li.toggleSubMenu span").each( function () {   
				$(this).replaceWith('<a class="expand" href="" title="Afficher les informations d&eacute;taill&eacute;es">&nbsp;</a>') ;
    } ) ;
 
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".menu_deroulant li.toggleSubMenu > a").click( function () {
				// Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("p.subMenu:visible").length != 0) {
            $(this).next("p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
           $(".menu_deroulant p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
           $(this).next("p.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
 
        // On empêche le navigateur de suivre le lien :
        return false;
    });    
 
} ) ;
// -->
</script>

La liste en html est la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="menu_deroulant">
    <li class="toggleSubMenu"><strong>Mickael jackson</strong> <span></span>
        <p class="subMenu">
          Chanteur<br />
      		Américain<br />
      		blah blah blah<br />
        </p>
        <p class="normal">
        	T&eacute;l. 01 02 03 04 05<br />
        	Email: <a href="mailto:mj@yahoo.fr">mj@yahoo.fr</a><br />
        </p>
    </li>
    <li class="toggleSubMenu"><strong>James Bond</strong><span></span>
        <p class="subMenu">
        	Agent Secret<br />
          Anglais<br />
          blah blah blah<br />
        </p>
        <p class="normal">
        	T&eacute;l. 01 02 03 04 06<br />
        	Email: <a href="mailto:jb@yahoo.fr">jb@yahoo.fr</a><br />
        </p>
    </li>
</ul>

Voilà, la liste déroulante fonctionne. Notez que la taille des textes "cachés" sont bien plus grand que dans l'exemple.
Ma page totale est structurée classiquement comme ça:

***** TITRE *****
MENU**CONTENU*
***** PIED *****

Le div CONTENU (dans lequel se trouve la liste) est de hauteur variable (qui varie selon la taille du texte en fait).
Tout fonctionne à merveille sous FF, Opera. Surprenant, le problème est sous IE6. En effet, la liste fonctionne bien, mais IE6 ne veux pas m'afficher le pied de page. Par contre, si je désactive javascript, le pied de page s'affiche correctement (mais ma liste n'est plus déroulante).

En gros, c'est comme si IE6 réserve une hauteur qui correspond à la taille de la liste avec tous les éléments affichés, puis cache les éléments comme voulu (la liste est du coup raccourcie), puis coupe la page au niveau du bas de la liste, sans remonter le pied de page.

J'espère que je suis compréhensible

Est-ce que l'un de vous saurait me donner des idées? ça fait un bout de temps que je cherche une solution...

[Spir]

C'est un pb de css ca. T'as quoi comme position pour tes divs? relative?
Je pense qu'il faudrait que tu nous donnes un peu de code CSS / HTML de ta page.

[maelito]

Alors pour les css, ça donne ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
body {
	background-color: #f8b22c;
	margin: 0px;
}
#container {
	background: url(../images/background_repeat.jpg) repeat-y top left;
	background-color: #f8b22c;
	margin: 0px auto;
	position: relative;
}
#header {
	background: url(../images/banniere_logo.jpg) no-repeat top left;
	width: 1000px;
	height: 130px;
}
#left_menu {
	background: url(../images/left_menu.jpg) no-repeat top left;
	position: absolute;
	left: 0px;
	width: 200px;
	height: 535px;
	margin: 0px;
	padding-top: 13px;
}
#text_top{ /*Affiche le haut de la section du contenu, avec bords arrondis*/
 
	background-image: url(../images/text_top.jpg);
	display: block;
	font-size: 1px;
	margin-left: 200px;
	margin-bottom: 0px;
	padding: 0px;
	width: 650px;
	height: 20px;
}
#text {
	background: url(../images/bande_haut.jpg) no-repeat top right;
	position: relative;
	width: 650px;
	border: 0;
	margin-left: 200px;
	padding: 0px;
	height: 530px;
}
html>body #text{
	background: url(../images/bande_haut.jpg) no-repeat top right;
	position: relative;
	width: 650px;
	border: 0;
	margin-left: 200px;
	padding: 0px;
	height: auto;
	min-height: 530px;
}
#right_background{
	position: absolute;
	background-image: url(../images/right_back.jpg);
	top: 130px;
	left: 850px;
	width: 150px;
	height: 535px;
}
#footer{
	position: relative;
	background: url(../images/footer.jpg) no-repeat top center;
	height: 75px;
	width: 1000px;
}

Effectivement, le div du contenu est de type "relative". Comme je veux une hauteur minimale, j'ai un premier div "#text" pour IE6 avec simplement une hauteur, et un 2e div "html>body #text" avec une min-height pour les autres navigateurs.

Sinon, la structure de la page est la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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-FR" lang="fr-FR">
<head>
<title>-  -</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="./include/design.css" rel="stylesheet" type="text/css" />
<link href="./include/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./javascript/jquery-1_2_6.js"></script>
<script type="text/javascript">
(... code javascript affiché plus haut ...)
</script></head>
 
<body>
<div id="container">
	<div id="header">(...)</div>
	<div id="left_menu">(...)</div>
	<div id="text_top"></div>
	<div id="text">(...liste en question...)</div>
	<div id="right_background"></div>
	<div id="footer">(...)</div>
</div>
</body></html>

Le <div> "right_background" est simplement là pour afficher une image à droite du texte.
N'étant pas un expert du développement web, soyez indulgent quant à la qualité et structure du code....

Merci en tout cas pour ta réponse spir

[Spir]

Je pense que ton pb vient de là. IE calcul la taille des elements lors de la génération de la page. Après effectivement si tu colle des evenements il est perdu. La taille change.
Bref je te conseil de revoir le graphisme / CSS pou faire en sorte de ne pas avoir de position relatif / absolu.
Ca doit être gérable.

Parce que là t'es parti pour te prendre la tête. Ce n'est pas un PB javascript mais un bug IE6

Je te conseil de chercher une autre template sur le net.
Exemple :
http://www.benmeadowcroft.com/webdev/

[maelito]

Bon ok c'est bien ce que je pensais.

Pour l'instant j'ai trouvé un moyen de contourner le pb en mettant une condition dans le javascript. En gros, si le navigateur est IE, le script change la propriété css "position" du pied de page en "absolute". Du coup la hauteur du texte devient fixe (puisque le footer est fixé), et le seul inconvénient est que je dois également fixer une hauteur de texte pour le contenu. Du coup, la page est plus longue sur IE que sur les autres navigateur, de par un espace blanc un peu plus grand (mais beaucoup moins qu'avant).

Mais bon, ça contourne le problème mais le résoud pas complètement. Je vais regarder ton exemple, et essayer de changer la structure css quand j'aurais le temps. Merci beaucoup en tout cas d'avoir jeter un oeil au problème!