Compatibilité overflow IE-FF

**manutudescends** · 25/09/2006, 10h45

Bonjour,
j'ai développé un select personnalisé avec des balises div.
Seulement le scroll ne marche pas avec IE. La scrollbar ne s'affiche pas.

Voici le code:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
	<head>
		<title> test</title>
		<script>
			var selected = -1;
			var navigateur = navigator.appName;
 
			/** 
			 * Permet de cacher la scrollbar principale
			 */
			function hideScroll(){
				document.body.style.overflow='hidden';
			}
 
			/**
			 * Permet de sélectionner un élément de la liste
			 */
			function listeId(elem){
				var currentClasse = getClassAttribute(elem);
				var currentID = elem.getAttribute("id");
				if (currentClasse=="notSelected") {
					setClassAttribute(elem,"selected");
				}
				else {
					setClassAttribute(elem,"notSelected");
				}
 
				// on désélectionne le suivant
				if (selected !=-1) deselectLast(selected);
				// l'élément sélectionné est l'élément courant.
				selected = currentID;
 
			}
 
			/**
			 * Permet de désélectionner l'élément précédent
			 */
			function deselectLast(id){
				var lastSelected = document.getElementById(id);
				if (lastSelected){
					setClassAttribute(lastSelected,"notSelected");
				}
			}
 
 
			/**
			 *	Fonction qui indique si le navigateur est Firefox
			 */
			function isFF(){
				return navigateur == 'Netscape';
			}
 
 
			/**
			 *	Fonction qui indique si le navigateur est Internet Explorer
			 */
			function isIE(){
				return navigateur == 'Microsoft Internet Explorer';
			}
 
			/**
			 *	Fonction qui permet de récupérer l'attribut class de l'élément en fonction du navigateur
			 */
			function getClassAttribute(element){
				if (isFF()) {
					return element.getAttribute("class");
				}
				else if ( isIE() ){
					return element.getAttribute("className");
				}
				else {
					return "";
				}
			}
 
			/**
			 *	Fonction qui permet de définir l'attribut class de l'élément en fonction du navigateur
			 */
			function setClassAttribute(element, value){
				if (isFF()) {
					return element.setAttribute("class",value);
				}
				else if ( isIE() ){
					return element.setAttribute("className",value);
				}
			}
 
		</script>
		<link rel="stylesheet" type="text/css" href="test.css"/>
	</head>
	<body>
		<div id="liste" class="liste">
			<div class="notSelected" id="elementList1" onclick="listeId(this);">option1</div>
			<div class="notSelected" id="elementList2" onclick="listeId(this);">option2</div>
			<div class="notSelected" id="elementList3" onclick="listeId(this);">option3</div>
			<div class="notSelected" id="elementList4" onclick="listeId(this);">option4</div>
			<div class="notSelected" id="elementList5" onclick="listeId(this);">option5</div>
			<div class="notSelected" id="elementList6" onclick="listeId(this);">option6</div>
			<div class="notSelected" id="elementList7" onclick="listeId(this);">option7</div>
			<div class="notSelected" id="elementList8" onclick="listeId(this);">option8</div>
			<div class="notSelected" id="elementList9" onclick="listeId(this);">option9</div>
			<div class="notSelected" id="elementList10" onclick="listeId(this);">option10</div>
			<div class="notSelected" id="elementList11" onclick="listeId(this);">option11</div>
			<div class="notSelected" id="elementList12" onclick="listeId(this);">option12</div>
		</div>
	</body>
</html>

Et voici la css:

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
#liste{
overflow = 'hidden';
font-size:20pt;
background:rgb(97,114,128);
}

.liste{
/*overflow = hidden;*/
position : absolute;
overflow: auto ;
background:rgb(97,114,128);
height:200px;
width:300px;
}

.notSelected{
	background:rgb(97,114,128);
	font-size:12pt;
	height:30px;
	margin-left:2px;
	cursor:pointer;
}

.selected{
	background:rgb(0,104,10);
	font-size:12pt;
	height:30px;
	margin-left:2px;
	cursor:pointer;
}

Savez vous comment je peux faire pour que le scroll marche également sous IE ?

merci

**Bisûnûrs** · 25/09/2006, 10h57

Dans ton CSS tu as :

Code :

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

1
2
3
4
5
#liste{
overflow = 'hidden';
font-size:20pt;
background:rgb(97,114,128);
}

Supprime le overflow:hidden ...

**manutudescends** · 25/09/2006, 11h06

oui je viens de voir cela, il y avait un problème entre le #liste et le .liste.

Merci

**MasterOfChakhaL** · 25/09/2006, 11h08

Je ne crois pas qu'il y ait une différrence d'interprétation pour l'attribut class...

J'utilise elem.className, et ca fonctionne sous IE FF et opera (et safari mac aussi je crois).

Je ne sais pas ce qui t'as mené a vouloir différencier le navigateur mais peut être t'es tu fourvoyé pour résoudre un problème auparavant?

NB: tu définis des propriétés pour un élément via des sélecteurs de classe et d'id, c'est les propriétés définis dans le selecteurs d'id qui sont prioritaires quand il y a collision dans tes définitions. (On sait jamais, la précision peut être utile...)

**manutudescends** · 26/09/2006, 15h58

sur la version que j'utilise de FF (1.0.4), chercher la valeur de l'attribut class n'a pas l'air de passer avec "className"

Compatibilité overflow IE-FF

CSS

Vue hybride

Discussions similaires

Partager

Partager