.css

[rgarnier]

Bonjour,

J'ai une appli qui fonctionne bien avec le xslc.css fourni par E Delos avec IE.

Mon pb : dès que j'utilise Netscape 4 (c'est le browser homologué par mon client), la feuille de style n'est pas utilisée.

A priori, il ne prend pas en compte les */General Look */. J'ai donc essayé de modifier chaque ligne pour avoir ma police, mais un coup c'est bon, un coup c'est pas bon (même sur une table qui est construite avec un match !!!)

Y a t-il incompatibilité reconnue ??

Merci.

[Nicolas.Cogi]

Les Netscape sont pas vraiment réputés pour leur support de CSS... Y'a de forte chance que les techniques mises en place dans xslc.css ne soient pas comprises par les vieux netscapes, bien que conforme à la norme.

Il faut que tu récuperes la liste de ce qui est supporté par Netscape et que tu transformes un peu la feuille de style.

Tu peux essayer la feuille de style ci-dessous compatible IE4, mais je sais pas trop quel sera le résultat.

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
 
/* General look */
 
*         { color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
body      { color: black; background-color: #E7E7E7; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
form      { margin: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
a         { color: black; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
a:visited { color: black; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
a:hover   { color: black; text-decoration: underline; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
a:active  { color: black; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
input     { color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
select    {  background: #FFFFFF; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
option    { background: #FFFFFF; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
textarea  { background: #FFFFFF; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
input.clFlatTextInput { border: solid 1px #949494; padding-left: 2px; padding-top: 2px; height: 19px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
textarea.clFlatTextInput { border: solid 1px #949494; padding-left: 2px; padding-top: 2px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
b, div, td, tr { font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
/* FlatTable and DataGrid */
 
.clToolbar      { height: 23px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clTabControl * { color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
table.clFlatTable                   { border: solid 1px #999999; border-collapse: collapse; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowHeader                        { background: #CCCCCC; border-style: solid; border-color: #999999; border-width: 0px 1px 1px 0px; color: black; font-weight: bold; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowHeader td                     { border-style: solid; border-color: #999999; border-width: 0px 1px 1px 0px; color: black; font-weight: bold; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowHeader a                      { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowHeader a:visited              { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowHeader a:hover                { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowHeader a:active               { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowDark                          { background: #E7E7E7; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDark td                       { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDark a                        { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDark a:visited                { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDark a:hover                  { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDark a:active                 { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowLight                         { background: #FFFFFF; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLight td                      { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLight a                       { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLight a:visited               { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLight a:hover                 { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLight a:active                { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowNormal                        { background: #E7E7E7; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowNormal td                     { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowNormal a                      { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowNormal a:visited              { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowNormal a:hover                { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowNormal a:active               { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowDarkLate                      { background: #FFADAD; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDarkLate td                   { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDarkLate a                    { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDarkLate a:visited            { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDarkLate a:hover              { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowDarkLate a:active             { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clRowLightLate                     { background: #FFD6D6; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLightLate td                  { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLightLate a                   { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLightLate a:visited           { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLightLate a:hover             { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clRowLightLate a:active            { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clDataGridDark                     { background: #E7E7E7; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDataGridDark td                  { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; padding: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDataGridDark input               { background: #E7E7E7; color: black; border: 0px; margin: 0px; width: 100%; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clDataGridLight                    { background: #FFFFFF; border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDataGridLight td                 { border-color: #C0C0C0; border-style: solid; border-width: 0px 1px 1px 0px; color: black; padding: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDataGridLight input              { background: #FFFFFF; color: black; border: 0px; margin: 0px; width: 100%; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clDark *                           { background: #949494; color: white; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDark td                          { background: #949494; border: solid 0px; color: white; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDark a                           { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDark a:visited                   { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDark a:hover                     { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clDark a:active                    { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clLight *                          { background: #ECECEC; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clLight td                         { background: #ECECEC; border: solid 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clLight a                          { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clLight a:visited                  { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clLight a:hover                    { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clLight a:active                   { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clNormal *                         { background: #E7E7E7; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clNormal td                        { background: #E7E7E7; border: solid 0px; color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clNormal a                         { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clNormal a:visited                 { color: navy; text-decoration: none; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clNormal a:hover                   { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clNormal a:active                  { color: red; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
/* Classes directly linked to elements must be declared after those using inheritance */
 
td.clRowHeader                      { border-color: #999999; border-style: solid; border-width: 0px 1px 1px 0px; color: black; font-weight: bold; padding: 2px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
td.clDataGridDark                   { padding: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
td.clDataGridLight                  { padding: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
td.clDataGridNormal                 { padding: 0px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
/* Graphic Tab Control */
.clActiveTab                        { color: white; font-weight: bold; padding-left: 3px; padding-right: 5px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clTab                              { color: white; cursor: hand; padding-left: 3px; padding-right: 5px; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
.clOverBackground                   { color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
.clOverBackground *                 { color: black; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }
 
*.clSelectable                      { border-color	21:16 08/04/2003 : #E7E7E7; font-family: Verdana, Arial, Tahoma; font-size: 8pt; }

Et comme tous les développeurs web, tu as maintenant une bouteille de champagne qui attend au frais que Netscape passe enfin l'arme à gauche, pour de bon !

[Julien C.]

As-tu vérifié au niveau de IIS, que l'alias pointant sur le répertoire de ton application (Par exemple "MonAppliBin") a la propriété "Protection d'application" à "Faible (Processus IIS)" ?

[rgarnier]

Merci Nicolas, ce css est mieux supporté par Netscape. En le modifiant un peu, j'arrive à quelque chose d'encore très moche comparé à IE, mais acceptable tout de même ...

[Nicolas.Cogi]

Voui, on a 2-3 problèmes de CSS avec les navigateurs exotiques, comme netscape, opéra, ou autre (pour les fans de ces navigateurs, c'etait juste une blague. Du calme, donc ! )

Ce CSS a été écrit pour IE4, ca permet d'avoir a peu près le meme look que sur du IE5+. En l'occurence, les polices sont répétées pour toutes les classes, les borders sont tweakés pour donner l'impression qu'ils sont collapsé, ce genre de chose.

Dans Delos7G, cette skin est appellée "Old-browsers visual compatibility" et est inspirée de msngraylightsquare.