CSS3 & PIE

bonjour,

pour les besoins d'un site, je vais devoir concilier bordures arrondies et fond rgba

Avec FF, Chrome, etc... pas de problèmes mais comme d'hab soucis avec IE

Je me suis orienté vers PIE (déjà essayé sans succès DD_Roundies)

Le problème, je n'arrive pas à avoir la syntaxe pour un rgba classique.

le code qui marche avec tous (sauf IE bien sûr !) :

#header {background-color: rgba(0,66,99,0.3); border-color:#099; color:#D90000;
       -moz-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
       -moz-box-shadow:0px 3px 4px 0px rgba(200,200,200,0.5), 0px 2px 3px 0px rgba(100, 100, 100, 0.5) inset;
	   -webkit-box-shadow:0px 3px 4px 0px rgba(200,200,200,0.5), 0px 2px 3px 0px rgba(100, 100, 100, 0.5) inset; 
	   box-shadow:0px 3px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 3px 0px rgba(100, 100, 100, 0.5) inset;}

si quelqu'un peut soit me dire "> abandonne, c'est pas possible !)"
ou alors, ">y'a moyen, mais ça va pas être facile !"

je n'ai pas mis le code "spécial IE" car il est dans un CSS à part (et surtout,parce que je n'arrive pas à le monter !) avec bien sûr le behavior: url(/js/PIE.htc) qui va bien, qui correspond au chemin absolu...

l'affichage actuel est intéressant sous FF, etc... mais me donne un rose délavé sans vraiment avoir de box shadow sous IE.

Quelqu'un peut m'éclairer ma lanterne ?

Merci

Bonjour,

le rgba marche avec CSS3PIE sous IE sauf la version 9.
La solution d'enfer, pas lourdingue, c' est de coller dans ton css le box shadow avec un rgb classique et ensuite même ligne de commande en rgba (qui sera donc ignorée par IE9).

j'arrive maintenant à avoir à peut près ce que je veux avec les bordures arrondies et les shadows, mais ... rien à faire pour le rgba !!!!!

en mettant dans le CSS pour IE :

#header {z-index:1; border:1px solid #207a90; 
			 -pie-background:rgba(32, 122, 144, 0.5);

			behavior: url(js/PIE.htc);
	   }

il n'y a rien à faire, je n'ai pas la transparence !

( je test sous IE8 )

oui.

la solution, c'est le chemin de l'url de ton behavior. en absolu, pas en relatif. ou du moins comme ceci : behavior:url(/js/PIE.htc); si le dossier js est à la racine de ton site.

ok, mais de toute façon, les bordures et les ombres marchent ! Ça ne doit pas être ça !!!

je regarde pour le mettre en absolu, on sait jamais !

oups, autant pour moi. non, la transparence tu peux oublier. marche pas sous IE.
Modifié par FloydinBremen (26 Aug 2011 - 20:02)

bon, ok, on va donc s'en passer !

Merci quand même.

Hello

Je connais pas ton design, mais si tu appliques le rgba sur un bord et une couleur pleine par exemple, tu peux "tricher pour ie", en lui donnant en RGB la couleur qu'aurait le rgba si la transparence était possible (je suis super claire là hein ^^). Tu auras la couleur que tu obtiendrais avec de l'alpha, mais sans la transparence. Après comme dit, ça dépend de ton design.
Tu peux faire ça avec une feuille de style et appliquer un style que pour ie, ou mieux, utiliser modernizr pour détecter si le navigateur peut utiliser le rgba et le cas échéant proposer une couleur de fallback proche de celle que tu devrais obtenir