Bug IE du gradient dans une Table

[LhIaScZkTer]

Bonjour à tous,

J'ai un bug assez incompréhensible dans IE 8. J'ai défini la règle suivante pour une table

Code :

1
2
3
4
5
 
	border: solid 1px #c7c7c7;	 
	background: #efefef; 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); 
/* Les autres navigateurs (...)*/

Si j'applique cette règle cette règle à un DIV le dégradé se fait sans problème, si je l'applique à une Table le dégradé ne fonctionne pas et seul la couleur grise est affichée.

Quelqu'un pourrait m'éclairer sur ce bug ?

[Bovino]

Envoyé par LhIaScZkTer

J'ai défini la règle suivante pour une table

Tu l'appliques à la balise table ?

Parce que si c'est sur une ligne, gradient ne s'applique pas aux balises tr.

[LhIaScZkTer]

Salut Bovino et merci pour ta réponse,

Le gradient je l'applique à toute la table. Si j'enlève background: #efefef; le gradient s'applique sans problème, mais dès que je le rajoute il m'affiche la couleur grise. Ce comportement n'est pas visible sur un DIV, je trouve ça très bizarre. En plus, je ne peux pas me permettre d'enlever le background parce que celui-ci est utile pour Opera et tout autre navigateur ne gérant pas le gradient.

Donc, est-ce un bug ou une features que je ne comprendrais pas ?

[Bovino]

Je pense que c'est surtout que l'affichage d'une table (d'autant plus si elle est grosse) est suffisamment pénible pour IE qu'un rien lui fait perdre le nord

[Meloooo]

Pour utiliser un dégradé avec IE8 il te faut ce code :

Code :

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=''#ffffff'', endColorstr='#ededed')"; /* IE8 */

Ce code :

Code :

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');

Fonctionne seulement pour IE6 et IE7

[LhIaScZkTer]

Salut Bovino, salut Meloooo et merci pour vos réponses.

Après vos remarque j'ai voulu en avoir le coeur net. Ma table est toute bête 3 colonnes et 10 ligne avec très peu de données dedans, c'est pour une maquette. Donc, la table est très simple. J'ai cherché la doc : -ms-filter Attribute | filter Property

Comme tu l'as dit Meloooo j'ai rajouter le -ms-filter, que je le mette avant ou après filter ne produit aucune différence et ça fonctionne très bien l'effet gradient fonctionne à merveille. Là où ça ne fonctionne plus, et où je trouve bizarre, c'est quand je rajoute un background pour les navigateurs qui, comme Opera, ne gère pas le gradient. Je précise que background est déclaré avant filter et -ms-filter. Pourtant le même code appliqué à une DIV fonctionne tip-top.

Donc la question existentielle que je me pose est : Est-ce que simplement d'appliquer ce genre de style sur une table n'est tout simplement pas "sémantiquement" correct ?

Voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
table{
	border-spacing:0 5px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;  
 
	background: #efefef;                      
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ededed));
	background: -moz-linear-gradient(top,  #fdfdfd,  #ededed);                                                    
 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');   
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ededed')"; 
 
        width:100%;
        text-align:left;
 
	color: #606060;
 
	margin:10px 0 0 0;
	padding:10px;
}

La seule solution que je vois est d'appliquer ce style à une DIV qui contiendrait la table mais je trouve que c'est un gaspillage de balise et surtout c'est pas propre.

Si quelqu'un a plus d'informations sur cette features je serais ravi qu'il me les partage

Merci pour votre aide