Detection navigateur fonction if

**polo66** · 07/02/2009, 15h54

Bonjour a tous,

ce sujet a déja été abordé, mais je n'arrive pas à trouver une solution.
Je réalise un site qui biensur me pose problème entre IE et le reste du monde...

J'ai donc créer un fichier css exprès pour notre ami IE.
je souhaite mettre la fonction if entre les balises <head>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<head>
<link href="style_bdc.css" rel="stylesheet" type="text/css" />
 
<!--[if lte IE ]>
   <link href="style_bdc_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

style_bdc.css ==> tout navigateur
style_bdc_ie==>pour le navigateur anti-social

Problème:

aucun soucis pour la feuille "tout navigateur", par contre, pour la feuille spéciale IE, je n'ai pas un résultat identique à celui observé lorsque je place directement dans

Code :

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

1
2
3
<head>
<link href="style_bdc_ie.css" rel="stylesheet" type="text/css" />
</head>

Pour infos, le site n'est plus centré... et il ya quelques autres problèmes d'échelle...

J'espère que mon problème est clair... quelqu'un peut il m'aider ?

**Macmillenium** · 07/02/2009, 16h08

Bonjour,

Le commentaire conditionnelle :

Code html :

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

1
2
3
4
 
<!--[if lte IE ]>
   <link href="style_bdc_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Indique que cette feuille de style se charge pour toutes versions inférieurs ou égales à celle déclaré or là tu déclare IE tout court ...

sa pourrait fonctionner par exemple pour :

Code html :

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

1
2
3
4
 
<!--[if lte IE 6]>
   <link href="style_bdc_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Si tu veux que ta css soit prise en compte par toutes les version d'IE

Code html :

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

1
2
3
4
 
<!--[if IE ]>
   <link href="style_bdc_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Suffit

**polo66** · 07/02/2009, 17h14

Merci pour ta réponse,
malheureusement le problème n'est pas résolu. ca n'a peut être rien a voir, mais le code "if" apparait entièrement en gris...

help ?

**desert** · 07/02/2009, 19h20

Chez moi, cela fonctionne très bien. Vérifie bien l'adresse et le nom de ta feuille de style.

**NoobX** · 08/02/2009, 11h56

Salut !

A mon avis ton probleme viens du faite que n'utilise pas de hack css, enfin je suppose vu qu'on ne vois poas tes fichier css.

L'utilisation de la balise "if" permet d'isoler une partie du css propre a IE.
OK mais si le code contenu dans le fichier CSS pour IE contient une classe qui existe aussi dans le fichier CSS des autres nav, il va y avoir probleme avec IE.

ex de fichier "style_bdc.css"

Code :

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

1
2
3
4
5
6
7
8
 
 
html>body #test {
margin-top:0px;
margin-left:50px;
height:321px;
width:403px;
}

ex de fichier "style_bdc-ie.css"

Code :

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

1
2
3
4
5
6
7
8
 
 
#test {
margin-top:0px;
margin-left:50px;
height:321px;
width:403px;
}

observe la présence de "html>body " dans le premier script, ce code IE ne sait pas l'interpréter.
Tous les autres nav savent le faire, donc IE ne recevra plus d'ordre contradictoire et tout ira bien(hormis le faite qu'IE est pourri ^^)

a toi d'adapter a tes besoin et de trouver un hack qui correspond a la version d'ie que tu souhaite.

**NoobX** · 08/02/2009, 12h00

oups double poste

Désolé,pardon au familles tous ca

**polo66** · 08/02/2009, 13h15

merci mais malgré votre aide, je bloque

effectivement je n'utilise pas de hack. je ne pensais pas cela utile puisque j'ai une feuille css pour IE, et une feuille css pour les autres navigateurs.
encore une fois, sans "if" et lorsque je fais pointer le HTML vers ma feuille css IE, tout fonctionne normalement. Le problème intervient lorsque j'insère cette balise if... j'ai par ailleurs bien vérifié l'adresse.

voici le code css de ma feuille ie

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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
/* CSS Document */
 
 
div#contenu {
	margin:auto;
	padding:0;
	color:#FFFFFF;
	top:5%;
	background:#000000;
	width:1500px;
	height:800px;
	}
div#titre {
	color:#FFFFFF;
	background-color:#000000;
	width:1500px;
	height:30px;
	}
div#vide {
	width:100%;
	height:100px;
	background-color:#000066;
	}
body
{
 font: 13px verdana, sans-serif;
 background-color:#000000;
  margin: 0;
 padding: 0;
 
}
#menuDeroulant
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 width:200px;
 background:none;
}		
#menuDeroulant .sousMenu
{
	position:absolute;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
float:none;
 margin: 0;
 padding: 0;
 border: 0;
}			
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: auto;
 color: #FFF;
 background: #333333;
 margin: 0;
 padding: auto 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
position:absolute;
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 width:200px;
 text-decoration: none;
 
 
}
#menuDeroulant .sousMenu li a:hover
{
position:absolute;
 background-image: none;
 background-color: #F2462E;
 
}
#menuDeroulant .sousMenu
{
position:absolute;
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 
}			
#menuDeroulant li:hover > .sousMenu { display: block; }
 
div#souscontenu {
	background-image:url(image/FONDSparis.png);
	float:left;
	color:#FFFFFF;
	height:710px;
	width:1500px;
}
div#logo {
	clear:both;
	color:#FFFFFF;
	width:400px;
	height:520px;
	float:left
	}
div#flash {
	width:850px;
	height:520px;
	float:left;
	}
div#infovide {
	width:400px;
	height:140px;
	background-color:#666666;
	}
div#titreinfo1{
	clear:both;
	width:500px;
	background-color:#333333;
	color:#00FF99;
	font-weight:bold;
	height:25px;
	float:left;
	}
div#titreinfo2{
	float:left;
	width:500px;
	background-color:#333333;
	font-weight:bold;
	color:#00FF99;
	height:25px;
	}
div#titreinfo3{
	width:500px;
	background-color:#333333;
	font-weight:bold;
	color:#00FF99;
	height:25px;
		}
div#titreinfovide{
	border-right:solid;
	border-right-color:#999999;
	border-right:1px;
	width:400px;
	background-color:#666666;
	color:#00FF99;
	height:20px;
	float:left;
	}
div#info1{
	width:500px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
 
div#info2{
	width:500px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
div#info3{
	width:500px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
div#pied {
	font-size:9px;
	text-align:center;
	clear:both;
	background-color:#333333;
	color:#00FF99;
	height:20px;
	}

voici le code css de ma feuille tout navigateur:

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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
 
/* CSS Document */
 
* . {margin:0;padding:0}
div#contenu {
	margin:0;
	padding:0;
	position:fixed;
	color:#FFFFFF;
	top:3%;
	background:#000000;
	width:100%;
	height:1000px;
	}
div#titre {
	color:#FFFFFF;
	background-color:#000000;
	width:auto;
	height:30px;
	}
div#vide {
	width:100%;
	height:100px;
	background:#000000;
	}
body
{
 font: 11px verdana, sans-serif;
 background-color:#000000;
  margin: 0;
 padding: 0;
 
}
 
#menuDeroulant
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 width:200px;
 background-color:#666666;
}		
#menuDeroulant .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}			
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: auto;
 color: #FFF;
 background: #333333;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
#menuDeroulant .sousMenu
{
	position:absolute;
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}			
#menuDeroulant li:hover > .sousMenu { display: block; }
 
div#souscontenu {
	position:fixed;
	background-image:url(image/FONDSparis.png);
	float:left;
	color:#FFFFFF;
	height:710px;
	width:100%;
}
div#logo {
	clear:both;
	color:#FFFFFF;
	width:400px;
	height:520px;
	float:left
	}
div#flash {
	width:850px;
	height:520px;
	float:left;
	}
div#infovide {
	float:left;
	width:400px;
	height:140px;
	background-color:#666666;
	}
div#titreinfo1{
	clear:both;
	border-right:1px;
	border-right-color:#FFFFFF;
	border-right:1px;
	width:400px;
	background-color:#333333;
	color:#00FF99;
	font-weight:bold;
	height:25px;
	float:left;
	}
div#titreinfo2{
	border-right:1px;
	border-right-color:#FFFFFF;
	border-right:1px;
	width:400px;
	background-color:#333333;
	font-weight:bold;
	color:#00FF99;
	height:25px;
	float:left;
	}
div#titreinfo3{
	border-right:1px;
	border-right-color:#FFFFFF;
	border-right:1px;
	width:400px;
	background-color:#333333;
	font-weight:bold;
	color:#00FF99;
	height:25px;
	float:left;
	}
div#titreinfovide{
	border-right:solid;
	border-right-color:#999999;
	border-right:1px;
	width:400px;
	background-color:#666666;
	color:#00FF99;
	height:20px;
	float:left;
	}
div#info1{
	clear:both;
	width:400px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
 
div#info2{
	width:400px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
div#info3{
	width:400px;
	background-color:#666666;
	color:#00FF99;
	height:135px;
	float:left;
	}
div#pied {
	font-size:9px;
	text-align:center;
	clear:both;
	background-color:#333333;
	color:#00FF99;
	height:20px;
	}

**Macmillenium** · 08/02/2009, 13h57

As tu une page en ligne ?

**NoobX** · 08/02/2009, 14h36

bon faut éclaircir tous ca !
Ta page CSS spécifique a IE ne doit contenir que les parties du CSS qui varie par rapport a la page CSS standard, ceci pour plus de clarté et de légèreté.

Une fois que tu a fais ca, dans ta page css standard ajoute les hacks devant les classes qui differe sur IE.

enfin affiche l'enssemble d'en IE et fais un ctrl+f5 afin d'etre sur de na pas etre dans le cache.

**polo66** · 08/02/2009, 21h12

je n'ai pas éclairci le code spé à ie puisque quasiment tout est différent... cependant, j'ai placé des hacks "html>body" devant les classes qui diffère, c'est à dire toutes sauf une...
et ca ne fonctionne toujours pas...

je frise le désespoir

... donc si quelqu'un a une solution...une pétition contre ie peut être, je sais pas

**desert** · 09/02/2009, 11h29

Pourrais-tu donner ton code html au complet ?

**polo66** · 14/02/2009, 00h01

désolé de te répondre, j'avais pas mal de taff !!

j'ai publié une page de test:

http://paulcostaseca.mas-vidalou.com/index2.html

avec la fonction if, et donc deux feuille de style
"style" pour les navigateurs normaux
"ie" pour...ie !

j'espère que ca pourra vous aider a résoudre mon gros problème, parceque de mon coté, je seche completement !

Detection navigateur fonction if

CSS

Discussions similaires

Partager

Partager