Curseur div=class avec IE

**Hyuunkel** · 16/06/2011, 23h21

Hello à tous, c'est encore moi ^^, je continu le développement de mon index, et je suis confronté à un nouveau problème, à savoir le curseur.
J'ai créer un curseur perso à la demande du client et ce curseur fonctionne parfaitement avec tous les navigateurs sauf IE (pour changer)...
Vraiment ral le bol de ce IE mais bon pas le choix...

Le problème viens du fait que mon curseur dois impérativement (vu mon développement) ce trouver à l'intérieur de plusieurs bloc (div class), je l'ai donc intégré au div globale contenant tout les autres et pas de souci sauf pour IE...

J'ai également tester et ca fonctionne sous IE si je l'intègre pas dans les div class, en utilisant cela après le body :

Code :

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

<style>HTML,BODY{cursor: url("Curseur.cur"), auto;}</style>

Mais vu ma page actuel je ne peux pas faire ainsi...

Je vous met donc le code structure de ma page (allégé = sans le contenu), je met également en vert le code fonctionnel avec les autres navigateurs et en rouge toutes les lignes que j'ai essayer de rajouter une par une pour le faire fonctionné avec IE mais sans succès :

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
108
109
110
111
112
113
114
115
116
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...</title>
<style type="text/css">
<!--
html, body {height: 100%; width: 100%; margin:0; padding:0; cursor: url("Curseur.cur"), auto;}
.fond {
	cursor: url("Curseur.cur") , auto ;
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} 
.menugauche {
	position: absolute ; 
	width: 90%;
	height: 47%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 10% !important; /* pris en compte par Firefox */ 
	margin-left: 10%; /* pris en compte par IE*/
}
.menudroite {
	position: absolute ; 
	width: 30%;
	height: 47%;
	margin-top: auto;
	margin-right:  auto;
	margin-bottom: auto;
	margin-left: 70%;
}
.contenu {
	position: relative ; 
	top: 16%;
}
.contenu2 {
	position: relative ; 
	top: 53%;
}
.compteur {
	position: absolute ; 
	width: 0%;
	height: 0%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 10%;
}
.date {
	position: absolute ; 
	width: 110px;
	height: 0%;
	margin-top: -2%;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 80%;
}
-->
</style>
<script type="text/javascript">
...
</script>
</head>
<body>
<style>HTML,BODY{cursor: url("Curseur.cur"), auto;}</style>
HTML,BODY{cursor: url("Curseur.cur"), auto;}

<img class="fond" src="Index/Accueil.gif" alt="">
<div class="fond">

<style>HTML,BODY{cursor: url("Curseur.cur"), auto;}</style>

HTML,BODY{cursor: url("Curseur.cur"), auto;}

<div class="contenu">

<style>HTML,BODY{cursor: url("Curseur.cur"), auto;}</style>

HTML,BODY{cursor: url("Curseur.cur"), auto;}

<div class="compteur"><? include("Compteur/compteur.inc"); ?></div>
<div class="date"><script language="javascript">
...
</script>
</div>
</div>

<div class="contenu2">
<body onload="MM_preloadImages('...')">

<div class="menugauche">...</div>

<div class="menudroite">...</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="menugauche">...</div>

<div class="menudroite">...</div>

<p>&nbsp;</p>
<p>&nbsp;</p>

<div class="menugauche">...</div>

<div class="menudroite">...</div>
</div>
</div>
</body>
</html>

Merci d'avance pour votre aide, Bonne Soirée Cordialement

PS: désolé pour l'usine à gaz ^^

**Bisûnûrs** · 16/06/2011, 23h36

Ca vaut ce que ça vaut, j'avais écrit ça il y a plus de 4 ans :
http://www.developpez.net/forums/d66...alise-firefox/

J'avoue ne pas m'être reposé la question depuis, les curseurs personnalisés étant en général signe de mauvais goût ..

**Hyuunkel** · 17/06/2011, 13h10

Merci d'avoir répondu Bisûnûrs, mais ton code curseur est sensiblement le même que le miens et ne fonctionne pas comme je le disais...

J'ai néanmoins réussi en bidouillant pendant plus d'une heure.

Alors voici la solutions (ca pourrai servir à quelqu'un d'autre): pour que ca fonctionne dans IE (et donc les autres navigateurs), il faut impérativement que :
- le code curseur soit hors style div class
- qu'il ne soit pas dans le contenu d'un div class
- et qu'il n'ai aucun doublon.

Exemple 1 (ne fonctionne pas):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
<!--
html, body {height: 100%; width: 100%; margin:0; padding:0;}
.fond {
	cursor: url("Curseur.cur"), auto;}
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} </style>

Exemple 2 (ne fonctionne pas):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
<!--
html, body {height: 100%; width: 100%; margin:0; padding:0; cursor: url("Curseur.cur"), auto;}
.fond {
	cursor: url("Curseur.cur"), auto;}
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} </style>

Exemple 3 (fonctionne):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
<!--
html, body {height: 100%; width: 100%; margin:0; padding:0; cursor: url("Curseur.cur"), auto;}
.fond {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} </style>

Vous pouvez même "amélioré" ce code précédent pour gardez le curseur modifié lors du passage sur un lien :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
<!--
html, body {height: 100%; width: 100%; margin:0; padding:0; cursor: url("Curseur.cur"), auto;} a { cursor: url("Curseur.cur"), auto; }
.fond {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} </style>

Voila, Sujet Résolu @ bientôt

Curseur div=class avec IE

CSS

Discussions similaires

Partager

Partager