Box shadow Safari et Chrome

[yeste64]

Bonjour à tous.

Je rencontre un problème avec la propriété CSS3 box-shadow. En fait, l'affichage se fait correctement sous Firefox mais pas sous Safari ni Chrome.

Voilà mon bout de code :

HTML :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<table>
//Autres lignes du tableau
	<tr class="sousGroupe">
		<td>
			<a href="#"><img src="images/joko.jpg" title="Joko garbi" /><br />Joko garbi</a>
			Joko garbi
		</td>
		<td>
			<a href="#"><img src="images/grandchistera.jpg" title="Grand chistera" /><br />Grand chistera</a>
			Grand chistera
		</td>
		<td>
			<a href="#"><img src="images/remonte.jpg" title="Remonte" /><br />Remonte</a>
			Remonte
		</td>
		<td>
			<a href="#"><img src="images/cesta.jpg" title="Cesta punta" /><br />Cesta punta</a>
			Cesta punta
		</td>
	</tr>
//Autres lignes du tableau
</table>

CSS :

Code :

1
2
3
4
5
6
7
8
9
.specialites .sousGroupe{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background:rgba(0, 0, 0, 0.08);
	-moz-box-shadow:0 0 10px 0 #000 inset;
	-webkit-box-shadow:0 0 10px 0 #000 inset;
	box-shadow:0 0 10px 0 #000 inset;
}

Voilà, je ne comprends pas d'où vient le problème.. Merci d'avance de votre aide !

[Meloooo]

Salut,
Je pense que le problème vient du fait que tu met ta class sur une ligne (<tr>), et que Google chrome et Safari n'apprécient pas !
Essayes de mettre ta class sur ta table.

[yeste64]

Effectivement, sur le table c'est pris en compte. Comment je pourrais faire pour mettre une ombre interne à toute une ligne de mon tableau alors ?

[Meloooo]

Je pense que le meilleur moyen serait d'utiliser les listes :

Code :

1
2
3
4
5
 
<li>
<ul>Titre</ul>
</li>
...

Jette un oeil sur ce lien : http://css.developpez.com/tutoriels/menu-deroulant/