Rendu différent de feuilles CSS en fonction de la version d'Apache

Version imprimable

24/04/2008, 11h50
captain

Rendu différent de feuilles CSS en fonction de la version d'Apache

Bonjour,

J'ai actuellement un souci avec une interprétation d'une même feuille CSS, suivant la version d'Apache qui l'interprète. Je m'explique :
Je dois reprendre un ancien site développé sous PHP4.3.9 et qui tourne très bien sous Apache1.3.31. Entre autre, ce qui m'intéresse c'est le rendu de la sous-classe hover (PHP) ; même sous IE6 ça fonctionne actuellement très bien.

Quand je reprends les sources du site et que je veux travailler dessus en local avec EasyPHP2.0b1 (soit PHP5.2.0 et Apache 2.2.3), mon navigateur ne réagit plus à "hover".

La seule différence que je vois, c'est un pb de version d'Apache ; mais là, je suis sec. Quelqu'un aurait-il une idée ?

merci d'avance.
24/04/2008, 14h59
_Mac_

Dans l'absolu, ça n'a aucun rapport avec Apache : Apache n'interprète pas le CSS, il ne fait que renvoyer au bit près ce qui se trouve dans le fichier CSS. Après, ce qui peut changer c'est le code HTML généré par PHP.

Ce que tu peux faire dans un premier temps c'est appeler directement l'URL de ton CSS dans ton navigateur et comparer ce code récupéré avec ce même code récupéré de la même façon avec l'ancienne version d'Apache.
24/04/2008, 15h37
captain

J'ai vérifié les deux fichiers CSS renvoyés par les deux APACHE : ce sont exactement les mêmes. De même que pour les sources des pages HTML qu'ils renvoient (à une différence près pour ces dernières : les chemins des liens présents dans la page ; local<>à distance).
24/04/2008, 15h42
_Mac_

Qu'est-ce que tu veux dire par "local<>à distance" ? Tu peux donner des exemples ?
24/04/2008, 16h10
captain

local (quand j'utilise Apache sur ma machine, en localhost) : "D:\repertoire_travail\iweb\styles\styles.css"

à distance, quand je me connecte en ligne sur le site :
"https://www.nomdusite.fr/iweb/styles.css"

Dans les deux cas je sais que les fichiers sont bien atteints car d'autres paramètres de style (couleurs, positionnement, etc..) sont bien pris en compte.

Il n'y a que le hover qui passe bien "à distance" mais pas en "local".
24/04/2008, 16h28
_Mac_

Faire un D:\... pour ouvrir un fichier, ça n'a absolument rien à voir avec un http://localhost/, c'est garanti. Avec D:\..., tu peux arrêter Apache sur ta machine, il n'est pas utilisé. Faut toujours faire les tests avec http://localhost/. Donc fais un test avec http://localhost/ pour vraiment passer par ton Apache local.
24/04/2008, 16h48
captain

Bien pris pour la remarque ; je viens de passer les chemins en http://localhost/ dans mon fichier de conf mais ça me fait planter l'application à un autre endroit. Je regarde ça ce soir et je poste le résultat dès que possible.
Merci déjà pour ces premières pistes.
24/04/2008, 16h53
_Mac_

Quel fichier de conf ? Je parlais de l'URL d'accès de ton appli : passer par http://localhost/... plutôt que de double-cliquer sur index.html.
25/04/2008, 08h57
captain

Bien pris. Je passais déjà avant par http://localhost dans l'URL donc je pensais que c'était ailleurs qu'il fallait modifier.
Donc, au bilan : non, ça ne fonctionne toujours pas comme ça devrait.
25/04/2008, 10h21
_Mac_

Toute la feuille passe mais pas le hover ou bien rien du tout de ce qui est dans la feuille passe ?
25/04/2008, 10h46
captain

Toute la feuille passe mais pas le hover.
25/04/2008, 11h08
_Mac_

Tu peux nous donner le code de ton CSS et l'URL de ta page en local (= l'URL qui apparaît dans la barre d'adresse de ton navigateur quand tu testes) ?

Pour le code CSS de la feuille de style principale :

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
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
@import "menu.css";
@import "calendar.css";
 
/** général */
BODY {
   margin: 0;
	padding: 0;
	font: 12px verdana, sans-serif;
  	BEHAVIOR: url('./css_hover_and_focus.htc');
   BEHAVIOR: url('../css_hover_and_focus.htc');
}
 
P {
	/** border: 1px solid #D8E3E7; */
	padding: 5px;
}
 
DIV#container {
	min-width: 650px;
	width: 100%;
}
 
DIV#container_popup {
	width: 95%;
	padding: 5px;
}
 
DIV#flags {
	text-align: right;
	background-color: #D8E3E7;
	padding: 2px;
}
 
#flags A IMG {
	width: 19px;
	height: 12px;
	border: 0;
	margin: 0;
	padding: 0;
}
 
#flags A:hover IMG {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
 
IMG.over {
	display: inline;
	background: #000000;
	filter: alpha(opacity=30);
	-moz-opacity: .30;
	opacity: .30;
}
 
DIV#content {
	text-align: center;
	padding-top: 2%; /*10%*/
}
 
DIV.normal {
	float: left;
}
 
DIV#title {
	font: bold 16px tahoma, sans-serif;
}
 
DIV#number_page {
	font: 10px tahoma, sans-serif;
	float: left;
	line-height: 15px;
}
 
DIV#middle_left {
    width: 49%;
    float: left;
    line-height: 18px;
}
 
DIV#middle_right {
    width: 50%;
    float: right;
    line-height: 18px;
}
 
DIV#mid_left {
    width: 33%;
    float: left;
    padding-left: 70px;
    line-height: 18px;
    text-align: left;
}
 
DIV#mid_center {
    width: 14%;
    float: left;
    line-height: 18px;
    text-align: left;
}
 
DIV#mid_right {
    width: 42%;
    float: right;
    line-height: 18px;
}
 
DIV#footer {
	padding-top: 30px; /*75px;*/
	text-align: left;
	margin: auto;
	padding-bottom: 20px;
	width: 90%;
	font: italic 12px tahoma, sans-serif;  /*11px*/
}
 
HR {
	width: 100%;
	border: 1px solid #D8E3E7;
}
 
A {
	color: #000000;
}
 
A.inf {
    color: #D8E3E7;
}
 
A:hover {
	color: #FF9900;
}
 
IMG {
	vertical-align: middle;
	border: 0;
}
 
 
.center {
	text-align: center;
}
 
.right {
	text-align: right;
}
 
.left {
	text-align: left;
}
 
.bold {
	font-weight: bold;
}
 
.no_border {
	border: 0;
}
 
.no_width {
	width: auto;
}
 
.no_padding {
	padding: 0;
}
 
.clear {
	clear: both;
}
 
.light_blue {
	background-color: #D8E3E7;
}
 
.light_green {
	background-color: #CCCCFF;
}
 
.grey {
	background-color: #DDDDDD;
}
 
.greyp {
	background-color: #CCCCCC;
}
 
.orange {
	background-color: #FF9900;
}
 
.text_orange {
	color: #FF9900;
}
 
.text_red {
	color: #FF0000;
}
 
.text_light_blue {
	color: #D8E3E7;
}
 
 
 
 
/** login */
FIELDSET#frame_login {
	width: 350px;
}
 
FIELDSET#frame_remote {
	width: 420px;
}
 
DIV#right {
	width: 350px;
	margin: auto;
	text-align: right;
	margin-top: 5px;
}
 
 
 
 
/** tableau */
.sous_tableau TR:first-child {
	background-color: ##DDDDDD; 
	color: #555555;
	border: 1px solid #DDDDDD;   
}
 
.sous_tableau TH:first-child {
	border-left: 1px solid #DDDDDD;
}
 
.sous_tableau TH {
	border-left: 1px solid #AAAAAA;
	empty-cells: show;
	padding: 3px 5px 3px 5px;
}
 
.sous_tableau TD:first-child {
	padding: 1px 5px 1px 5px;
	text-align: left;
	border: 1px solid #DDDDDD;
	empty-cells: show;
}
 
.sous_tableau TD {
	padding: 1px 5px 1px 5px;
	text-align: right;
	border: 1px solid #DDDDDD;
	empty-cells: show;
}
 
 
DIV#table {
	margin: auto;
  	width: 800px;  /*700*/
}
 
 
TABLE {
	clear: both;
	margin: auto;
	width: 100%;
	border-collapse: collapse;
}
 
TABLE.table_no_width {
	clear: both;
	margin: auto;
	width: auto;
	border-collapse: collapse;
}
 
 
 
TR#table_header {
	/*background-color: #497A8D;*/
   background-color: #497AA2;
	color: #D8E3E7;
   border: 1px solid #497A8D;
}
 
TH:first-child {
	border-left: 1px solid #497A8D;
}
 
TH {
	border-left: 1px solid #D8E3E7;
	empty-cells: show;
	padding: 3px 5px 3px 5px;
}
 
TD {
	padding: 1px 5px 1px 5px;
	text-align: left;
	border: 1px solid #497A8D;
	empty-cells: show;   
}
 
/** formulaire */
FORM {
	clear: both;
	margin: auto;
}
 
FIELDSET {
	margin: auto !important; /** ignoré par IE */
	margin: 0;  /*pour IE*/
   clear: both;
	width: 770px;  /*700*/
   padding-bottom: 8px;  /*pour marge sur IE*/  
}
 
FIELDSET > INPUT, SELECT {
	float: left;
}
 
FIELDSET > BR {
	clear: both;
}
 
INPUT, SELECT {
	margin: 2px 2px 2px 5px;
	border: 1px solid #497A8D;
	float: left;
	z-index: 1;
}
 
P.radio {
	clear: both;
	padding: 5px 0;
	text-align: left;
}
 
INPUT.button {
	float: none;
}
 
 
INPUT.radio {
	float: left;
	border: 0;
}
 
LABEL.radio {
	display: inline;
	text-align: left;
	width: auto;
}
 
LABEL.middle {
	margin-top: 7px;
}
 
INPUT.span {
	display: inline;   
}
 
LEGEND {
	font-weight: bold;
  	font-size: 13px;
  	font-family: verdana, sans-serif;
  	color: #000000;
}
 
LABEL {
	float: left;
	width: 40%;
	text-align: right;
	margin: 3px 0 2px 2px;
}
 
LABEL:hover {
	cursor: pointer;
}
 
P#buttons {
	clear: both;
  	margin-top: 10px;
	text-align: center;
}
 
.focus {
	background-color: #D8E3E7;
}
 
.normal {
	background-color: #FFFFFF;
}

et la feuille de style particulière où se trouve le hover (le hover doit s'effectuer sur les menus donc découlent les sous-menus) :

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
/** menu */
TABLE#background_menu {
  	width: 100%;
  	height: 20px;
	background-color: #497A8D;
	color: #D8E3E7; 
}
 
/* rubriques */
TD.menu {
  	margin: 0;
  	padding: 3px;
  	padding-left: 30px;  
}
 
TD.menu:hover UL.sub_menu {
    display: block;    
} 
/* --- */
 
/* sous rubriques */
DIV.sub_menu {
   position: absolute;
	top: 39px; /*43px;*/
  	_top: 40px;
  	width: 190px;
  	background-color: #497A8D;
  	margin: 0; 
   /*border-bottom: 1px solid #FFFFFF;*/
}
 
UL.sub_menu {
  	display: none;
  	list-style: none;
  	margin: 0;
  	padding: 0;   
}
 
UL.sub_menu LI {
  	border-top: 1px solid #FFFFFF;
	padding: 3px;  
}
/* --- */
 
 
/* sous sous rubriques */
UL.sub_menu LI.ssssrub {
	padding-left: 15px;
 	margin: 0;
}
/* --- */
 
 
/* liens */
#background_menu A {
    color: #D8E3E7;
    text-decoration: none;    
}
 
#background_menu A:hover {
    color: #FF9900;
    text-decoration: none;
}
/* --- */

Pour l'URL de ma page en LOCAL quand je teste :
http://localhost/iweb/index.php

25/04/2008, 11h38
_Mac_

Au fait, testes-tu avec le même navigateur ? L'ami IE n'aime pas les hover sur autre chose que les <a>. As-tu vérifié ce point ?

Sinon, je ne vois pas d'erreur :aie:
25/04/2008, 11h48
captain

Oui, je teste avec le même navigateur (IE6) qui a un comportement différent suivant que je teste mon application en local ou en ligne (avec rigoureusement les mêmes codes sources).

Sinon, j'avais vu que IE6 n'aime normalement pas le hover, mais vu que dans mon cas ça passe lors du test en ligne...
J'ai également essayé en plaçant des balises <a href>, mais ça ne change rien.
25/04/2008, 12h30
_Mac_
Donc ça pourrait venir de ça :
Code:

1 2 BEHAVIOR: url('./css_hover_and_focus.htc'); BEHAVIOR: url('../css_hover_and_focus.htc');
Pourquoi il y a 2 lignes ? Est-ce que les fichiers existent bien ?
25/04/2008, 13h35
captain

Une des deux lignes doit être un reste de la période de développement...
Mais sinon, oui, le fichier existe bien, au chemin spécifié dans la feuille CSS (d'ailleurs il fonctionne correctement puisque l'effet attendu du hover est effectif quand je teste "en ligne").
25/04/2008, 13h58
_Mac_

C'est pas forcément le test en ligne qui dit que ça marche localement : s'il y a un droit que change ou si en ligne tu testes avec une URL http://tonsite.fr/ (sans iweb) et qu'en local c'est http://localhost/iweb/, y a une différence dans les URL et ça peut suffire à faire planter le truc. Le vrai test c'est donc de voir si les URL http://localhost/iweb/styles/css_hover_and_focus.htc et http://localhost/iweb/css_hover_and_focus.htc marchent.

Tu les as récupéré d'où ces fichiers css_hover_and_focus.htc ?
25/04/2008, 14h27
captain

Je viens de vérifier : le fichier css_hover_and_focus.htc est atteignable via les deux URL.
Par contre l'application a été développée il y a 3 ans ; il existe une version plus récente du fichier .htc à l'adresse suivante. Je l'ai testée mais ça ne change rien à mon problème.

http://www.xs4all.nl/%7Epeterned/htc/csshover.htc
25/04/2008, 14h42
_Mac_

Tu peux me donner un bout de code HTML qui utilise le hover ? Et comment (code HTML) appelles-tu tes CSS dans tes fichiers ? Je vais essayer de tester de mon côté.

Voici un bout du code HTML (forcément épuré puisqu'à la base le site est sécurisé) :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Site - Page d'accueil</title>
		<link rel="stylesheet" type="text/css" href="Mettre ici le chemin pour accéder à la feuille styles.css" />
	</head>
 
	<body>
 
		<div id="container">
 
			<div id="flags">
		<a href="?lang=fr">
			<img  src="" alt="Français" title="Français" /></a>
 
		<a href="?lang=en">
			<img class="over" src="" alt="Anglais" title="Anglais" /></a>
	&nbsp;</div>						
    <table id="background_menu">
        <tr>
 
<td class="menu">Listes<br />
<div class="sub_menu"><ul class="sub_menu">
<li><a href="">Liste1</a></li>
<li><a href="">Liste2</a></li>
<li><a href="">Liste3</a></li>
</ul></div>
</td>
 
	   <td width="100%"></td>
    </tr>
 
</table>
 
			<div id="content">
				<div id="title"><br /><br /></div>
				<div id="table" class="right"></div>
            <fieldset>
                  <legend></legend>
                  <div class="normal">				
 
                     <label class="orange">Bienvenue sur le site</label>
 
                     <label class="light_blue" width="95%">##########</label>
                  </div>                  
            </fieldset>
            <br><br><br><br><br>
            <!--<fieldset>-->
               <td> version 2.0 </td>
               <br><br><br>
               <td>Nous sommes le 25-04-2008  et il est  13:14 GMT</td>
 
               <br><br>
               <td>Dernier message : 
               <td>25/04/2008 13:13 GMT</td>              
            <!--</fieldset>-->
	     </div>
		</div>
	</body>
 
 
</html>

Il faut juste rajouter en début de fichier le chemin pour accéder à la feuille de style styles.css qui elle même appelle menu.css (ce sont les deux feuilles dont j'ai déjà passé le code précédemment).

25/04/2008, 15h54
_Mac_
Ben pour que ça marche avec IE 6, j'ai juste eu à commenter le second BEHAVIOR dans styles.css :
Code:

1 2 BEHAVIOR: url('./csshover.htc'); /* BEHAVIOR: url('../csshover.htc');*/
28/04/2008, 09h05
captain

Effectivement, je viens d'essayer en supprimant le lien vers le répertoire parent, et ça fonctionne ! Je ne comprends toujours pas pourquoi étant donné qu'il s'agissait rigoureusement du même fichier placé à deux endroits différents, mais en tout cas, ça marche.
Un grand merci.