28172 sujets

CSS et mise en forme, CSS3

[Résolu] Box-shadow non visible sous Chrome et Safari

Bonjour,

Après une refonte de ce site http://www.lagodilledetignes.com, j'ai eu la désagréable surprise de voir que l'effet visuel box-shadow ne fonctionnait pas sous Chrome (v 12.0.742.122) et Safari (v 5.05). Je pense que cela doit venir de mon code mais je n'arrive pas à trouver ce qui cloche !!!

Voici un bout de mon CCS :
#corps
{
margin-left:22%;
margin-top:5px;
padding:10px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:11px;
color:#333333;
text-align:center;
border:1px solid #CCC;
border-radius: 20px 0px 8px 8px;
-webkit-box-shadow: 2px 2px 5px 1px ;
-moz-box-shadow: 2px 2px 5px 1px ;
box-shadow: 2px 2px 5px 1px ; 
background-image:url(images/fond.png);
background-repeat:repeat;
}


Merci pour votre aide qui est toujours d'un grand secours Smiley cligne
Modifié par ThyBarth (14 Jul 2011 - 19:34)
Salut,

Je n'ai plus la syntaxe exacte en tête, mais la quatrième valeur ne devrait pas être celle de la couleur ?
Je me permets de revenir sur le sujet Smiley decu
Effectivement avec les 4 valeurs ça fonctionne sous Chrome (j'ai modifié mon css), mais bizarrement sous Safari la propriété n'a pas l'air d'avoir d'effet !?
Administrateur
Hello,

La 4è valeur désigne l'épaisseur (à ne pas confondre avec le fondu) et a été ajoutée plus tard dans les specs, elle est donc moins reconnue sur certains anciens navigateurs.

EDIT : par contre c'est vrai que c'est étonnant pour Safari 5 Smiley ohwell
Modifié par Raphael (14 Jul 2011 - 14:13)
Administrateur
ThyBarth a écrit :
Hello Raphael,
Peut on contourner le problème ?

Tu as vraiment besoin d'indiquer une épaisseur ? Je ne m'en sers jamais.
La diffusion ne te suffit pas ?
Mon souci est que si je n'indique pas une épaisseur, l'effet d'ombre ne s'applique pas sous Chrome, ce n'est qu'un contournement pour faire face à ce problème, qui n'est pas pris en compte avec Safari hélas...
Administrateur
ThyBarth a écrit :
Mon souci est que si je n'indique pas une épaisseur, l'effet d'ombre ne s'applique pas sous Chrome

Alors ça ce n'est pas normal : cela fonctionne normalement très bien sous Chrome sans l'épaisseur. C'est d'ailleurs ce que je fais en général.
Pour exemple, je viens de retirer la valeur #333 et sous Chrome plus d'effet sur le premier élément du menu, et pas de changement au niveau de Safari (toujours pas d'effet d'ombre)



upload/17056-lagodi.png
Modifié par ThyBarth (14 Jul 2011 - 16:28)
Bonjour,

il est préférable de toujours indiqué la couleur de <edit>bordure nop ! : de l'ombre </edit> a appliqué, comme tu le constates dans Chrome, Safari comprend le préfixes -webkit- et là tu n'indiques pas la couleur de bordure (même si en principe c'est la valeur de color qui serait prise en compte).

cordialement
Modifié par gc-nomade (14 Jul 2011 - 19:19)
Sujet clos
Aller à