CSS et bords arrondies sur un tableau !!!

(reprise du message précédent)

Re-bonsoir...

J'ai hésité à faire un nouveau post mais comme dis ci-dessus mon roll-over sur le tableau ne fonctionne pas sous Firefox ni sous Opera.

Comment peut-on faire des angles arrondies pour des lignes de tableau ?
Le tableau en lui même est arrondi, mais pas les premières et dernières lignes... Du coup, le rollover non plus.

Merci pour vos réponses. (j'ai essayé plusieurs commandes CSS, regardé Google mais je ne trouve pas).
Modifié par MagicCarpet (08 Nov 2012 - 19:54)

plus haut dans la discussion , j'ai évoqué un exemple avec box-shadow (overflow ne fonctionnant pas sous ff) dans ce cas de figure , avec un exemple qui décalait cet ombrage (2 ombrages en fait , 1 rouge , 1 gris ) pour que tu perçoives les effets selon les réglages débordement ou pas de débordement .

je le remet en incluant l'overflow:hidden;(pour chrome et ie9) http://dabblet.com/gist/4034122

A toi de voir , comprendre et analyser.
1ere différence sur mes exemples : border-radius appliqué au premier et dernier tr en omettant les td (réduction de la feuille de style car td stylable sur les navigateur implémentant border-radius et box-shadow accessoirement).

cdt,
++
Modifié par gc-nomade (08 Nov 2012 - 21:16)

Bon, soit je ne comprends pas un truc ou alors je m'explique mal.

Déjà, je vais sur le lien que tu me donnes avec Opera et je constate le même problème, les lignes débordes et donc les bord du tableau sont bien arrondis mais pas les lignes (première et dernière).

Avec Firefox y'a du mieux mais la première ligne en haut à droite est rectangulaire, la dernière en bas à gauche aussi mais pas sur les autres extrémités (grâce au dégradé j'imagine).

Concernant l'overflow, curieux car tu parle de IE et Chrome... Pour moi sur ces navigateurs j'ai de bons résultats et sur Firefox/Opera, j'avais pensé à l'utiliser mais je n'ai aucune différence.

Sinon et si je comprends bien, tu me conseille d'utiliser un dégradé (c'est pas vraiment prévu mais vu qu'il n'est là que pour servir de masque je peux faire un dégradé d'une couleur à une autre identique ou plus simplement, mais je ne sais pas si cela fonctionne une bordure plus épaisse... ?).

Ah, je viens de relire ton ancien post... En fait, je n'avais pas vu certains détails que tu cite ici. Effectivement tu n'avais pas mis l'overflow et sur Safari j'ai les bords qui sont encore rectangulaire, si je l'ajoute ils passent arrondi et le résultat est correct.

Juste pour info, tu es sur Mac ou Pc ? Quel navigateur tu as utilisé pour me passer ton code ?

Merci en tout cas pour ta réponse.
Modifié par MagicCarpet (08 Nov 2012 - 22:39)

bonsoir,

je ne te conseil pas forcement d'utiliser un degrader , mais de faire usage a bon escient de box-shadow car celui-ci peut corriger le defaut pour certains navigateurs et que ta mise en page le permet.
Sinon , box-shadow plein sans dégradé de 5px autour de ton élément comme une bordure outline : 0 0 0 5px black.

Mon code CSS se base sur tr uniquement par gain de temps (feuille css plus courte) pour te faire une page démo.
L'ensemble des propositions de ce fil devrait te permettre déjà de trouver un bon compromis autant pour les navigateurs ou cela fonctionne que les autres.

un autre exemple sur ce defaut récurant : http://yidille.free.fr/SiteDuZero/4um-ccs/table-radius.html

Cdt,
GC
Modifié par gc-nomade (13 Nov 2012 - 19:24)