Discussion :

[Couette]

Bonjour,

Alors voilà, je viens faire appel à vous car je rencontre un problème auquel je n'avais jamais confronté auparavant concernant le dégradé sous IE (oui le fameux!).

Mon problème concrètement :
au départ, seul le background simple était reconnu, j'ai donc ajouté -ms-linear-gradient et là, le dégradé apparait comme par miracle sous IE, je passe donc au problème suivant : le dégradé s'arrête 15px avant la fin (que sous IE évidemment, sinon ça ne serait pas drôle!).

J'ai foncé les couleurs pour une meilleure visibilité :

J'ai fait le tour du forum pour obtenir de l'aide à ce sujet mais je n'ai pas eu de réponse... Sachant les soucis rencontrés par IE, j'ai voulu adapter mon code Css dont voici un extrait :

Code :

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
.BandeauLogin{
 
	background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(232,232,232,1) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(232,232,232,1))); 
	background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(232,232,232,1) 100%); 
	background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(232,232,232,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(204,204,204,1) 100%,rgba(232,232,232,1)) 100%);
	background: linear-gradient(top,  rgba(204,204,204,1) 100%,rgba(232,232,232,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#e8e8e8',GradientType=0 ); 
        background: rgb(232,232,232);
	height: 110px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #005abb;
	text-align: center;
	width: 100%;
}

Merci à ceux qui se pencheront sur le sujet.

[rodolphebrd]

Bonjour,

Il manque des éléments à votre question:
- Sur quelle version d'IE êtes-vous? (j'imagine IE10)
- il faudrait une page en ligne pour tester ou plus de code.

Votre image n'est pas passée!
-ms- n'est plus un préfixe obligatoire au regard de caniuse

Il y a une parenthèse fermante en trop dans votre ligne:

Code css :

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

background: -ms-linear-gradient(top,  rgba(204,204,204,1) 100%,rgba(232,232,232,1)) 100%);

Faire:

Code css :

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

background: -ms-linear-gradient(top,  rgba(204,204,204,1) 100%,rgba(232,232,232,1) 100%);

[Couette]

Je vous remercie pour cette réponse. Effectivement mon post a été déplacé et depuis l'image ne fonctionne plus.

Je suis sous IE 10 mais suis obligée de tester sous plusieurs versions pour les clients (généralement en IE6 pour les entreprises). C'est pour cela que je n'ai pas précisé la version et qu'il y a la ligne "filter".

Pour contourner le problème, j'ai mis une image en repeat-x en attendant et là, la div prend bien toute la hauteur précisée dans le css. J'ai regardé avec Firebug pour voir si ce n'était pas un élément en-dessous qui bloquait tout ça et la réponse et non... il n'y a rien, d'ailleurs, sous Firefox, il n'y a pas de problème.

Je comprends ce que vous dites mais si le -ms- n'est plus obligatoire, le dégradé aurait été pris par la ligne suivante, soit :

Code :

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

background: linear-gradient(top,  rgba(204,204,204,1) 100%,rgba(232,232,232,1) 100%);

[Couette]

Bonjour,
Je reviens vers vous car j'ai effectué les modifications. Le retrait de -ms- ainsi que de la parenthèse en trop et là, le fond a totalement disparu...

Avec une image en repeat-x, le fond apparait bien mais dès que je fais le dégradé, tout disparait. Il ne prend que le background tout simple.
Si je retire ce background, il ne va pas chercher le dégradé non plus, cela reste blanc...(vide)

[rodolphebrd]

Pour IE10 je ne comprends pas pourquoi ça ne fonctionne pas et pour les versions antérieures avez-vous essayé http://css3pie.com.

Si vous avez une page en ligne on avancerait plus vite...

[Couette]

Je teste de mon côté.
Cela me pénalise aussi de ne pas avoir de site en ligne. C'est une application interne, il met donc impossible de vous montrer les effets en ligne.

Mon problème persiste...
J'ai remis une image et pense laisser comme ça s'il n'y a pas d'autres solutions