CSS3 Pie.htc : ne fonctionne pas :(

Bonjour à tous,

Après avoir eu des problèmes avec roundies, j'essaye donc CSS 3 pie htc.
Lorsque je ne le met pas, mon site se charge en moins d'une seconde sur ie 7.
Mais lorsque j'insère l'attribut behavior dans le CSS :

.vignette { border:1px solid #e2dfdf; padding:7px; background:#ffffff;
/* arrondis */ border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; behavior: url(PIE.htc); }

Mon site met trop de temps à charger sur IE7 et n'affiche pas mes arrondis sur mes éléments ayant la classe vignette.

Avez-vous déjà eu ce problème ?

Salut!
Je suis justement en-train d'expérimenter CSS3pie! Pour ma part ça ne fonctionne qu'à moitié...

As-tu vérifié si le chemin du url est le bon?
moi il faut que je fasse ça:

.mon style{
	behavior: url(../CSS/PIE.htc);
}

J'utilise régulièrement CSS3Pie dans plusieurs projets professionnels et habituellement je n'ai aucun problème.

Cependant, il faut bien lire le mode d'utilisation et les "related issues", car même si mettre un behavior est très simple; certaines propriétés CSS peuvent causer problèmes.

Les cas peuvent être nombreux, mais voici les deux points qui règlent presque tout:

1- PIE.htc bien qu'il est déclaré dans la feuille de style sera recherché à partir du document HTML appelant la feuille de style ! Ce faisant, le plus simple est de mettre PIE.htc à la racine de votre site et de le déclarer avec chemin absolu:

.monstyle{ 
    behavior: url(/PIE.htc); 
} 

2- CSS3Pie crée un élément graphique (présent dans le HTML) derrière l'élément sur lequel il doit s'appliquer. Ce faisant, il peut y avoir des bugs avec les propriétés z-index.

La solution simple si PIE n'est pas utilisé dans des compositions de positionnement complexe est de donner la valeur de position relative à l'élément sur lequel il doit s'appliquer.

.monstyle{ 
    position: relative;
    behavior: url(/PIE.htc); 
}

Comme ça, vous êtes presque sûre que ça passera partout ! (Et ensuite, faut pas tout lui mettre sur le dos et ne pas oublier de bien vérifier ses propres feuilles de styles )

Merci pour vos réponses.
Très bizarre pourtant car même à la racine, et même dans un dossier, il ne veut pas me faire des coins arrondis
Je n'utilise pas non plus la propriété z-index.

Voici mon code CSS de ma propriété auquel j'essaye d'appliquer CSS3 pie :

.vignette { border:1px solid #e2dfdf; padding:7px; background:#ffffff;
/* arrondis */ -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; behavior:url(/PIE.htc); }

et mon code HTML :

<div class="bloc zoom-sur">

    <h2><a href="<?= _HOST_DIR.'a-propos' ?>">Zoom sur...</a></h2>
    
    <a href="<?= _HOST_DIR.'a-propos' ?>" class="vignette"><img src="<?= _IMG.'a-propos/netpom.jpg' ?>" alt="Fanny, netPom" /></a>
    <div>
    	<p>NetPom, c'est tout d'abord de la rigueur, du professionnalisme, du sérieux, et de la motivation.</p>
		<p>Et pour faire simple, Fanny, webdesigner intégrateur.</p>
        <a class="btn" href="<?= _HOST_DIR.'a-propos' ?>">Lire la suite</a>
    </div>
    
</div>

Voici l'url si ça peut aider : netpom sur la page d'accueil par exemple, sur le lien de l'image de présentation en bas à droite.

Observations :

Je copie colle l'url du tutoriel de Alsacréations sur mon ie 7 : J'ai les arrondis.

Je copie colle le code source en modifiant l'url du HTC, et regarde en local : je n'ai plus les arrondis.
Modifié par fanny95 (11 May 2011 - 15:40)

hey
j'ai le même problème...

Je viens de résoudre mon problème : C'était l'url du htc.
Faut faire attention à bien mettre le bon URL.

j'ai mis behavior: url(pie.htc);
pie.htc est à la racine...

Il est où le tien? dans un dossier?

Et quand je fais http://monsite.fr/PIE.htc, il m'affiche une page blanche.. ya ptetre un problème dans le htc...

@Oceane : attention, tu n'as pas spécifié un chemin absolu ! Il faut commencer ta chaine par un / pour créer un chemin absolu.

@Fanny : En local, les chances sont que la racine du site sera considéré comme étant le dossier "www" sous WampServer ou autre dossier racine dépendent de ton serveur interne et de ton système d'exploitation.

Je vois que sur ton site tu as entré url(PIE.htc). Si tous tes fichiers html appelant PIE sont à la même place ça ne posera pas de problèmes, mais si tes fichiers sont dispersés (par exemple, un dossier pour la version française et un pour la version anglaise) alors ça ne marche plus sauf si tu copie PIE.htc partout ou que tu donne un chemin absolu.

Bonjour, je me permet de remonter ce topic pas si vieux car j'ai le même souci.

Voici le bout de code css où j'utilise PIE :

#produitsComplementaires .produit .alignDroite {
	background: #f0f0f0; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* W3C */
	border-radius: 0 0 10px 10px;
	behavior: url(/javascript/PIE-1.0beta4/PIE.htc);
	position: relative;
    border-top: 1px solid #969696;
    float: none;
    height: 64px;
}

Mais rien a faire, le background déborde du border-radius. Une idée?

Vérifie avec la console réseau (ctrl-K) de Firefox que le serveur t'envoie le bon header HTTP quand tu fais une requête directement sur PIE.htc

par exemple:
1- tu ouvre la console réseau (ctrl-K)
2- Tu écrit le chemin direct vers PIE dans ta barre adresse: http://monsite.com/PIE.htc
3- Tu vérifie que le fichier t'es bien envoyé avec ->

content-type: text/x-component

Si ce n'est pas le cas, écrit cette ligne dans ton .htaccess

AddType text/x-component .htc

Merci de ta réponse Vaxilart

Je viens de tester ta manipulation, mais j'ai bien le bon résultat :


Et ça ne change pas mon souci de background dégradé à bord carré qui dépasse de ma div a bordures arrondies :s

On peut voir un exemple en ligne ?

Malheureusement non, je code encore en local et n'ai pas encore l'accès ftp à l'adresse d'hébergement.

Voici une image du problème que je rencontre :
on voit bien que le background dégradé déborde en bas des vignettes et passe sur les bords arrondis.

J'ai trouvé aussi 2 types de solutions différentes mais que je n'ai pas encore testé et que d'ailleurs je ne comprend pas trop :

http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://www.kommunauty.fr/forum/4486-probleme-d-affichage-css3-sous-ie9/

Si ça te parles Vaxilart, je serais ravie que tu m'explique :s
Modifié par Emyleen (30 Aug 2011 - 17:07)

Ah, j'aurais dû regarder ton code de plus près. Ton problème est dû à l'utilisation des dégradés.

J'avais déjà eu de genre de problème par le passé, et si je me rappelle bien en enlevant ton filter:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc', GradientType=0 ); /* IE6-9 */

Tu règle ton problème.

Dans le cas présent, CSS3Pie ne règlera pas ton problème car c'est hors de son contrôle.

Des solutions alternatives seraient:
1- Utiliser une image de background pour remplacer le dégradé CSS
2- Utiliser les dégradés générés par PIE pour IE en lieu et place de ta propriété filter

  -pie-background: linear-gradient(#ffffff,#bcbcbc);

Modifié par Vaxilart (30 Aug 2011 - 17:22)

Bonjour j'ai exactement le même problème je suis en local pour le moment et css3 Pie ne fonctionne pas sur mes "input" voici mon code

input
{
    border: 2px solid green;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -border-radius: 10px;
    behavior: url(/pie/PIE.htc);

}

Bonjour,

problemes sur certains éléments

peut-être?

Et on doit écrire border-radius sans tiret:

border-radius: 10px;

sa ne change rien

un bout de ton code html, possible? juste pour voir....