Discussion :

[Zebulon777]

Bonjour tout le monde,

A partir d'IE10, j'ai un CSS qui fonctionne parfaitement, mais on me demande de l'adapter au maximum pour IE8.
J'avoue que je n'ai pas créé moi-même ce CSS, mais que ca a été fait via un générateur.

Voici donc le CSS en question :

Code css :

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
 
/* TABLE BLEUE COINS ARRONDIS AVEC CURSEUR LIGNE GRISE CADRAGE CENTRE*/
 
.CSSTableBleueCoinsArrondis {
	border:1px solid #ffffff;
	margin:0px;padding:0px;
	margin-bottom:20px;/*permet d'avoir un espace entre chaque tableau*/
	width:70%;
	box-shadow: 10px 10px 5px #888888;
 
	-moz-border-radius-bottomleft:25px;
	-webkit-border-bottom-left-radius:25px;
	border-bottom-left-radius:25px;
 
	-moz-border-radius-bottomright:25px;
	-webkit-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
 
	-moz-border-radius-topright:25px;
	-webkit-border-top-right-radius:25px;
	border-top-right-radius:25px;
 
	-moz-border-radius-topleft:25px;
	-webkit-border-top-left-radius:25px;
	border-top-left-radius:25px;
}.CSSTableBleueCoinsArrondis table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableBleueCoinsArrondis tr:last-child td:last-child {
	-moz-border-radius-bottomright:25px;
	-webkit-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
}
.CSSTableBleueCoinsArrondis table tr:first-child td:first-child {
	-moz-border-radius-topleft:25px;
	-webkit-border-top-left-radius:25px;
	border-top-left-radius:25px;
}
.CSSTableBleueCoinsArrondis table tr:first-child td:last-child {
	-moz-border-radius-topright:25px;
	-webkit-border-top-right-radius:25px;
	border-top-right-radius:25px;
}.CSSTableBleueCoinsArrondis tr:last-child td:first-child{
	-moz-border-radius-bottomleft:25px;
	-webkit-border-bottom-left-radius:25px;
	border-bottom-left-radius:25px;
}.CSSTableBleueCoinsArrondis tr:hover td{
	background-color:#cccccc;
}
.CSSTableBleueCoinsArrondis td{
	border:1px solid #ffffff;
	vertical-align:middle;
	background-color:#6699cc;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:3px;
	padding-left:20px;/*Permet d'avoir un décallage à gauche dans toutes les cellules*/
	font-size:14px;
	font-family:Arial;
	font-weight: normal;
	color:#000000;
}.CSSTableBleueCoinsArrondis tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableBleueCoinsArrondis tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableBleueCoinsArrondis tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableBleueCoinsArrondis tr:first-child td{
	border:0px solid #ffffff;
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:21px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableBleueCoinsArrondis tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");
	background: -o-linear-gradient(top,#003366,003f7f);
 
	background-color:#003366;
}
.CSSTableBleueCoinsArrondis tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableBleueCoinsArrondis tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

Ce CSS est appliqué à une DIV qui contient les tables concernées.

Si on pouvait arriver à garder la maximum de chose, ce serait super, même si je crois savoir que les coins arrondis et l'ombre ne pourront être conservés.

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
...
...
...
WDivTAB_00 = document.getElementById("DivTAB_00");
WNomDIV = "DivTAB" + WIndex;
WDiv = document.createElement("div");
WDiv.setAttribute("id", WNomDIV);
WDiv.setAttribute("class", "CSSTableBleueCoinsArrondis");
...
...
...

Quelqu'un pourrait-il m'aider, svp ?

Je vous mets un exemple de ce que ça donne...