Discussion :

[Toufik83]

bonjour,

j'essaie de trouver une solution pour utiliser -ms-filter: "progid: DXImageTransform.Microsoft.gradient()" avec border-radius sous I.E9, les bordures arrondies s'affichent bien pourtant le gradient dépasse les bordures, voilà l'image :Pièce jointe 191501

une solution s'il vous plait?

[Toufik83]

j'ai trouvé la solution pour I.E en utilisant le SVG fond dégradé Maker.par-contre sous Mozilla ça ne fonctionne pas trop...

il faut créer un fichier XML :

Code xml :

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

1
2
3
4
5
6
7
8
 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="g146" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="0%" y2="0%">
    <stop stop-color="#FFFFFF" offset="0"/>
    <stop stop-color="#6633FF" offset="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#g146)" />
</svg>

après vous mettez dans la classe Css approprié à votre élement html ça :

Code css :

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

1
2
 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxNDYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzY2MzNGRiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzE0NikiIC8+Cjwvc3ZnPg==);

Résultat sur I.E (9):Pièce jointe 191505
Résultat sur Mozilla (41.0.2):Pièce jointe 191506
ça fonctionne sur IE mais pas sur Mozilla, avez vous une idée peut être?

[Toufik83]

ce qui manquait c'est d'ajouter un bloc dans le head de la page html pour savoir le nom du navigateur sur lequel le site est afficher, puis vous créez une feuille de style (styleIE.css) qui s'occupe de I.E
le code dans html :

Code html :

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

1
2
3
4
 
<!--[if IE]>
    <link type="text/css" rel="stylesheet" href="../Styles/styles-ie.css" />
<![endif]-->

le code dans styleIE.css :

Code css :

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

1
2
3
4
5
 
span#SpanEntete a.Trie 
{
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcxNDYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzY2MzNGRiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzE0NikiIC8+Cjwvc3ZnPg==);
}

Merci et bonne soirée.

[NoSmoking]

Bonjour,
et en mettant un background-size: 100% 100%;.

Sinon as tu essayé de mettre un overflow:hiiden sur tes onglets ?

[Toufik83]

Bonjour NoSmoking ,
le résultat souhaité est atteint, le problème venait tout simplement du navigateur I.E, il faut créer un fichier Css qui contrôle l'apparence des éléments html, a-partir d'un fichier XML. I.E calcule les couleurs gradient différemment que Mozilla,Chrome et les autres navigateurs.