Créer des coins arrondis pour IE6-8 avec CSS3Pie

Bonjour,

Afin d'émuler proprement border-radius et quelques autre joyeusetés pour IE 8 et inférieur, j'ai essayé de reproduire le comportement de ce tuto pourtant très simple :

Créer des coins arrondis en CSS et sans images

En raison de mes besoins (backgrounds en images, etc) la solution retenue est celle de CSS3Pie, avec un fichier PIE.htc que j'ai placé dans mon fichier js et un appel en css comme spécifié : behavior:url(../js/PIE.htc)

Et je n'arrive pas à faire fonctionner le tout ! Pourtant l'exemple d'alsa fonctionne très bien et semble simple. Voici mon code :

/*factorisation des propriétés*/
#mag article,#mag section,aside section,aside nav,#panel section,#footer section{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;behavior:url(../js/PIE.htc)}
input,textarea,a.sld-next,a.sld-prev{-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;behavior:url(../js/PIE.htc)}

Et maintenant ma page d'essai du script : page test pour les radius en js

Qu'ai-je donc oublié ? Merci pour votre aide.

Edit : je viens de charger la bibliothèque jQuery et les scripts dont je me sert sur cette page : exemple d'Alsacréations modifié avec l'ajout de mon .js

Tout fonctionne parfaitement, donc il ne s'agit pas d'un conflit avec jQuery ou un autre script que j'utilise...
Modifié par Olivier C (28 Jun 2012 - 19:00)

Bonjour, voici les vérifications de base:

1- Le chemin vers css3PIE doit être relatif à la page HTML, pas à ta feuille CSS
2- Essaie de mettre une position CSS autre que "static" sur tes éléments (habituellement position: relative)
Modifié par Felipe (24 Feb 2013 - 13:23)

@SBoudrias : la postition relative n'est pas démandée dans les spécifications du script, d'ailleurs elle n'est pas présente dans l'exemple qui fonctionne.

Pour les chemins en relatif, j'avais un doute. Alors j'ai utilisé la même hiérarchie de fichier pour l'exemple qui fonctionne et celui qui ne fonctionne pas ("css.styles.css" et "js/PIE.htc") et j'ai même doublé le fichier "PIE.htc" à tous les niveaux du template, au cas où...

Non, après maintes vérifications des chemins de fichier je pense que mon problème provient d'ailleurs. Mais merci pour l'aide.

Edit : je viens à l'instant de trouver un développement sur ce thème sur le site Alsacreations ici présent ! C'est un article de Jojaba. Il parle justement du chemin relatif de ce fichier lié non à la feuille de style qui l'appelle mais au fichier html ! Ma lanterne s'éclaire sur ce point, mais de toute façon mon problème reste entier pour ce qui est des raisons pour lesquelles cela ne marche pas sur mon template maison...

Je vais potasser cet article, et je reviendrais donner la soluce si je la trouve... ou appeler encore au secours ! (mais ces 4 prochains jours je n'aurai pas de PC, ça va être pratique tiens !).
Modifié par Felipe (24 Feb 2013 - 13:23)

La position relative est pourtant clairement expliqué ici: http://css3pie.com/documentation/known-issues/#z-index

As-tu essayé au moins ?

Tu ne dors pas toi non plus !

SBoudrias a écrit :
As-tu essayé au moins ?

Et bien non, je dois dire que je n'avais pas testé ta dernière proposition car je n'ai plus accès à un PC depuis ton avant-dernier message...
Et surtout, mea culpa, j'ai cru que cet aspect n'était effectif que pour l'effet box-shadows ou les bordures en images (l'anglais et moi ça fait deux). Et comme il n'y avait pas de position:relative dans l'exemple, ça m'avait conforté dans cette idée.

Je viens de mettre un position:relative sur les éléments concernés, mais je ne sais pas pour autant si ça marche pour l'instant. Comme l'amateur que je suis, je fais mes tests chez des amis...

Bien à toi.

Édit : Aïe ! Je même sans voir le résultat sur IE > 9 je vois déjà que ça ne passera pas sur certains éléments du slide... tant pis, ces éléments sont négligeables, pas grave.
Modifié par Felipe (24 Feb 2013 - 13:24)

Salut, comme je suis québécois, il n'est pas encore tard. Je triche donc

J'ai regardé ton site et effectivement ça ne fonctionne présentement pas. Mais ceci est dû à plusieurs points. Premièrement, ton fichier PIE.htc n'est pas trouvé. Ton css essaie de le loader à cette adresse:

http://christus-web.com/projets/radio-esperance/pie/PIE.htc (404 donc)

Je te conseille de mettre ton fichier là:

http://christus-web.com/PIE.htc

Et d'écrire un chemin absolu dans ton CSS, ainsi:

sélecteur {
    behavior: url(/PIE.htc);
}

Comme ça, tu es sûr que ton fichier sera trouvé.

Ensuite, PIE supporte seulement les syntaxes raccourcies des différentes propriétés css3:

// PIE supporte ->
selecteur {
    border-radius: 18px 0 0 0;
}

// Mais PIE ne supporte pas ->
selecteur {
    border-top-left-radius: 18px;
}

Tu devras donc réécrire quelques règles avec la syntaxe raccourcie à quelques endroits (pas partout heureusement)

Bonne chance, avec ça, ça devrait fonctionner

SBoudrias a écrit :
Salut, comme je suis québécois, il n'est pas encore tard. Je triche donc

Ah ! Effectivement, je n'y avait pas pensé...

Je ferais ce que tu as dit. Aujourd'hui je n'aurais pas le temps de m'en occuper, mais je te ferais un retour dès que ce sera fait.

SBoudrias a écrit :
Ensuite, PIE supporte seulement les syntaxes raccourcies des différentes propriétés css3: [...] border-radius: 18px 0 0 0;

Quoi ? Mon Dieu ! J'aime beaucoup écrire les propriétés en raccourcis, et j'avais complètement oublié que cela fonctionnait aussi pour border-radius, un comble ! Merci bien pour ce rappel.

Bien à toi.
Modifié par Felipe (24 Feb 2013 - 13:24)

@SBoudrias : un retour :

J'ai enfin réussi à récupérer un vieux PC pour faire mes tests sous IE (avec la version 7 en prime !) : Il s'agissait bien d'un problème de chemin. Après avoir suivit toutes tes indications (et notamment le raccourcis css pour border-radius) tout marche parfaitement.

Merci bien pour ton concours. Bien à toi.
Modifié par Felipe (24 Feb 2013 - 13:25)