Comment avoir une feuille de style correcte pour les navigateurs ?

Version imprimable

Bonjour
Je cherche a affiche sur le max de navigateur mais voilà IE nous fait des siennes.
Alors soit je met de cote IE soit la validation W3C
Un peu comme sur les cours
Cela s'affiche partout certe mais est remplis d'erreurs quand ont veut savoir si le W3C valide la page et là mauvaise surprise elle ne l'est pas.
Alors comment faire ?

Merci de m'aider car là je bloque quand même.

PS: validation XHTML non valide aussi
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 #tab, #tab caption { margin: 0px; } #tab { border: #DDEEFF 2px solid; border-collapse: separate; border-spacing: 2px; empty-cells: hide; } #tab caption { font-size: 2.0em; } #tab th { background-color: #0000FF; border: #FFCC66 1px solid; font-variant: small-caps; font-size: 0.8em; letter-spacing: 1px; } #tab td { border: 0px solid; padding-left: 0px; } #navcol { width: 750px; } #numcol { width: 150px; } #tab tfoot { font-size: 1.2em; letter-spacing: 1px; }

13/04/2012, 15h36
Torgar

Si tu nous montrai ton code, ça nous permettrai de t'aider. Et n'oublie pas la balise [code] bouton (#) de l'éditeur :merci:
13/04/2012, 16h57
Kaamo

tu ne montres que le CSS sans le HTML. Du coup, on ne peut pas vraiment te dire où ça coince.

Enfin, déjà on peut dire que certaines balises sont à proscrire pour la compatibilité :

border-collapse : seulement IE8+, bug sous FF
empty-cells : mal supporté, bug partout
font-variant, letter-spacing : seulement IE8+
14/04/2012, 11h37
Bovino

Sinon, le plus important est un affichage correct, la validation, c'est la cerise sur le gâteau.
Pour certains navigateurs (pour ne pas dire pour IE), tu peux être obligé d'utiliser des propriétés non reconnues par le W3C (je pense entre autre à la gestion de l'opacité). Dans ce cas, la validation est loin d'être importante !

Bovino: je suis d'accord avec toi par contre dans ce cas on n'affiche pas les logos du W3C qui prête à confusion quand à l'exactitude du code envers cette dite validation.
Là je crois que l'on peut être d'accord.
Maintenant à choisir l'affichage ou la validation la première nous importe beaucoup plus.

Kaamo: Le html ne changera pas car c'est par rapport au CSS mon affichage.
Le tableau sous IE est décalé vers le bas et devrait être en haut.

Ce tableau est fixe et donc non remplis automatiquement.
Peut être avec le CSS complet la solution sera mieux

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
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/fond.png");
}
 
/* L'en-tête */
 
#en_tete
{
   width: 760px;
   height: 75px;
   background-image: url("images/site_cwebline.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   border: 2px solid gray;
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   border: 2px solid gray;
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{    
   color: #FFEECC;
   font-family: Arial, Arial Black, Times New Roman, Times, serif;
   text-align: center;
}
.element h1
{    
   color: #FFEECC;
   font-family: Arial, Arial Black, Times New Roman, Times, serif;
   text-align: center;
}
.element_menu ul
{
   list-style-image: url("images/puce.gif");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #FFEECC;
}
 
.element_menu a:hover
{
   background-color: #FF6600;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
   margin:auto;
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   color: #FFEECC;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid gray;
}
 
#corps h1
{
   color: #FFEECC;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
 
   color: #FFEECC;
   text-align: center;
}
 
 
/* Le pied de page */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #FFEECC;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid gray;
}
p {
   text-align: center;
   }
a img {
   border:0;
   }
table {
    width:100%;
    border:1px;
    border-color:#990033;
    }
.td1{
    background:#FF0000;
    }
p {
    text-align:center;
    }
h1 {
    text-align:center;
    }
/************ tableau *****************/
#tab, #tab caption
{
    margin: 0px;
}
 
#tab
{
    border: #DDEEFF 2px solid;
    border-collapse: separate;
    border-spacing: 2px;
    empty-cells: hide;
}
 
#tab caption
{
	font-size: 2.0em;
}
 
#tab th
{
    background-color: #0000FF;
    border: #FFCC66 1px solid;
    font-variant: small-caps;
    font-size: 0.8em;
    letter-spacing: 1px;
}
 
#tab td
{
    border: 0px solid;
    padding-left: 0px;
}
 
#navcol
{
    width: 750px;
}
 
#numcol
{
    width: 150px;
}
 
#tab tfoot
{
    font-size: 1.2em;
    letter-spacing: 1px;
}

14/04/2012, 13h26
Bovino

Ah oui, c'est sûr qu'afficher le logo si le site n'est pas valide, ça le fait pas trop ! :aie:
14/04/2012, 13h33
Kitetkat

Bovino regarde les cours, faq et autres avec les logos W3C s'est po bien.
14/04/2012, 16h26
Candygirl

Citation:

Envoyé par Kitetkat

Kaamo: Le html ne changera pas car c'est par rapport au CSS mon affichage.
Le tableau sous IE est décalé vers le bas et devrait être en haut.

Peu importe que ton html soit figé, du code css sans le html associé n'est pas d'une grand utilité, même si on peut faire 2-3 observations:

Tu donnes un width de 760px au body, puis le top de 760 +4px de border, soit un total de 764 px, soit plus large que son conteneur ce qui va induire un comportement différent sur IE6, qui élargira le parent.

Idem pour tes table auxquels tu attribues un width de 100% + 2px de border.

Il est capital d'avoir le html associé déjà rien que pour voir le doctype utilisé, ce qui a une influence sur l'interprétation du css par le navigateur. Si tu veux qu'on puisse t'aider au mieux, on doit pouvoir observer les problèmes rencontrés.