switcher CSS sous IE6

Bonjour à tous,

Je développe un site avec un petit module d'accessibilité :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div id="handicap" onmouseover="handi_onover();" onmouseout="handi_onout();">
<h1>accessibilitÃ©</h1>
<div id="handi_content">
<p>
<h2>RÃ©glages des couleurs</h2>
<ul>
<li><a href="#" class="font_size" onclick="displayNB();">mode noir sur blanc</a></li>
<li><a href="#" class="font_size" onclick="displayBN();">mode blanc sur noir</a></li>
<li><a href="#" class="font_size" onclick="displayNormal();">mode normal</a></li>
</ul>
</p>
<p>
<h2>RÃ©glages de la taille du texte</h2>
<ul>
<li><a href="#" class="font_size" onclick="incr_font_size();">grandir le texte</a></li>
<li><a href="#" class="font_size" onclick="restore_font_size();">taille normale</a></li>
<li><a href="#" class="font_size" onclick="decr_font_size();">rÃ©trÃ©cir le texte</a></li>
</ul>
</p>
</div>
</div>

Ce module est régi par le script suivant :

Code:

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
var prefsLoaded = false;
var toggleNB = "normal";
var defaultFontSize = 13;
var currentFontSize = defaultFontSize;
var handi_isOpen = false;
//== ONLOAD ============================================================================
function init(){
	setUserOptions();
	lToTop = document.getElementById("to_top");
	placeToTop();
}
 
//== ONUNLOAD ==========================================================================
function finish(){
	saveSettings();
}
//== ONSCROLL ==========================================================================
window.onscroll = placeToTop;
 
//== GESTION DIV TO_TOP ================================================================
function placeToTop(){
	position = getScrollPosition();
	offset = getWindowHeight() - 75;
	targetPosition = position[1] + offset;
	marginTop = retire_px(lToTop.style.marginTop);
	if(targetPosition > marginTop){
		lToTop.style.marginTop = targetPosition + "px";
	}
	else if(targetPosition < marginTop){
		lToTop.style.marginTop = targetPosition + "px";
	}
	else{
		lToTop.style.marginTop = targetPosition + "px";
	}
}
function getScrollPosition() {
    return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
}
function retire_px(texte){
        return texte.substring(0, texte.length-2);
}
function getWindowHeight() {
    var h = 0;
    if (typeof(window.innerHeight) == 'number') { // Netscape
        h = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        h = document.documentElement.clientHeight;
    } else if (document.body && document.body.offsetHeight) { //client
        h = document.body.offsetHeight;
    }
    return h;
}
 
//== GESTION DIV_HANDICAP ==============================================================
function handi_onover(){
	var	lHandi = document.getElementById("handicap");
	lHandi.style.height = "auto";
}
function handi_onout(){
	var	lHandi = document.getElementById("handicap");
	lHandi.style.height = "27px";
}
//== GESTION FONTSIZE ==================================================================
function incr_font_size() {
	if (currentFontSize == undefined){
		currentFontSize = defaultFontSize;
	}
	if (currentFontSize < 20) {
		currentFontSize++;
		document.body.style.fontSize = currentFontSize + "px";
	}
}
function restore_font_size() {
	currentFontSize = defaultFontSize;
	document.body.style.fontSize = defaultFontSize + "px";
}
function decr_font_size() {
	if (currentFontSize == undefined){
		currentFontSize = defaultFontSize;
	}
	if (currentFontSize > 8) {
		currentFontSize--;
		document.body.style.fontSize = currentFontSize + "px";
	}
}
 
//== GESTION CONTRASTE =================================================================
function displayNB(){
	setActiveStyleSheet("accessibilite");
	toggleNB = "NB";
}
function displayBN(){
	setActiveStyleSheet("accessibilite_inv");
	toggleNB = "BN";
}
function displayNormal(){
	setActiveStyleSheet("normal");
	toggleNB = "normal";
}
function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if((a.getAttribute("rel").indexOf("style") != -1) && (a.getAttribute("title"))) {
			a.disabled = true;
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
}
 
//== GESTION COOKIE ====================================================================
function createCookie(name, value, days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		var expires = "; expires=" + date.toGMTString();
	} else
		expires = "";
	document.cookie = name + "=" + value + expires + "; path=/";
};
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for ( var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ')
			c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) == 0)
			return c.substring(nameEQ.length, c.length);
	}
	return null;
};
 
function setUserOptions() {
	var cookie_FZ, cookie_NB;
	if (!prefsLoaded) {
 
		cookie_FZ = readCookie("fontSize");
		currentFontSize = cookie_FZ ? cookie_FZ : defaultFontSize;
		document.body.style.fontSize = currentFontSize + "px";
 
		cookie_NB = readCookie("NB");
		toggleNB = cookie_NB ? cookie_NB : "normal";
		if(toggleNB == "NB"){displayNB();}
		if(toggleNB == "BN"){displayBN();}
		prefsLoaded = true;
	}
 
}
 
function saveSettings() {
	createCookie("fontSize", currentFontSize, 365);
	createCookie("NB", toggleNB, 365);
}

Les définitions des CSSheets :

Code:

1
2
3
4
5
 
<link href="templates/<?php echo $this->template ?>/css/div_handicap.css" rel="stylesheet" type="text/css" />
<link title="normal" href="templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" />
<link title="accessibilite" href="templates/<?php echo $this->template ?>/css/accessibilite.css" rel="alternate stylesheet" type="text/css" />
<link title="accessibilite_inv" href="templates/<?php echo $this->template ?>/css/accessibilite_inv.css" rel="alternate stylesheet" type="text/css" />

Les appels initiaux et finaux dans "body":

Code:

1
2
 
<body onload="init();" onunload="finish();">

Ce module fonctionne parfaitement sous FF & IE>=7. En revanche sous IE6 (via IETester), le switcheur de css ne marche pas. A savoir que la gestion de taille de police marche bien.

Je debugue depuis 2 heures, et là j'ai besoin d'un œil extérieur, donc .... à l'aide !!

Merci d'avance.

réponse à moi même mais pour les autre :)

Bon, je viens de faire un dernier test... en fait visiblement cela vient d'une incompatibilité avec le script de dean edwards Que j'utilise pour hacker ie6 et le rendre aussi compatible que ie7 aux propriété css.(Voir le site de Dean Edwards)

j'ai donc retiré :
Code:

1 2 3 4 5 
adieu donc les "div:hover" et autre sous ie6, au moins pour ce site.

En tout cas si quelqu'un trouve la racine de l'incompatibilité, cela m'intéresse, car ce package est fort puissant.

Bonne journée.

jette donc un oeil sur whatever:hover
:google: