Problème border radius et border shadow safari

Bonjour !

alors désoler de débarquer comme ça, je vais promis une jolie présentation ce soir en revenant voir si par chance j'ai une réponse ! mais la tatoo dans 25 min et je suis à la bourrrreeeeee !

Mon problème est le suivant sous safari avec border radius et border shadow, la capture d'ecran parle d'elle meme et voila ma css :

D'avance merci et bonne aprem !

#menu
{
position:absolute;
top: 576px;
left: 369px;
border: 2px solid #F37E22;
padding: 4px 8px;
color: #ffa20c;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
background: #000000;
text-align: center;
z-index:320;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
box-shadow:5px 5px 5px #ffa20c;
-webkit-box-shadow:5px 5px 5px #ffa20c;
-moz-box-shadow: 5px 5px 5px #ffa20c;
width:110px;
}
#menusel
{
position:absolute;
top: 575px;
left: 369px;
color: #ffffff;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
background: #ffa20c;
border: 2px solid #ffffff;
padding: 4px 8px;
text-align: center;
z-index:320;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
box-shadow:5px 5px 5px #ffffff;
-webkit-box-shadow:5px 5px 5px #ffffff;
-moz-box-shadow: 5px 5px 5px #ffffff;
width:110px;
}

#menusel a:link
{
color:#000000;
text-decoration:none;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#menusel a:visited
{
color:#000000;
text-decoration:none;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#menusel a:hover
{
color:white;
text-decoration:none;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;}
#menusel a:active
{
color:#000000;
text-decoration:none;
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}

J'ai eu des pb de ce type avec la version 4 de safari, mais il me semble que cela avait été corrigé avec la dernière version (v5).

Quelle est ta version ?

je suis en v5.0 build 6533.16 le dernier à jour me semble t il ..

Effectivement, j'avais des pb dans un autre cas avec des boutons.

Je viens de faire des essais sur ton cas, et ça coince sur Safari et Chrome (normal, c'est le même moteur).

Sinon, je viens de tester une solution qui marche : mets un tout petit arrondi (qui ne se verra pas) de 1px :

box-shadow: 5px 5px 5px #ffa20c ;
-moz-box-shadow: 5px 5px 5px #ffa20c ;
-webkit-box-shadow: 5px 5px 5px #ffa20c ;
-khtml-box-shadow: 5px 5px 5px #ffa20c ;
border-radius: 80px 1px 1px 80px ;
-moz-border-radius: 80px 1px 80px 1px ;
-khtml-border-radius: 80px 1px 80px 1px ;
-webkit-border-top-left-radius: 80px ;
-webkit-border-bottom-right-radius: 80px ;
-webkit-border-top-right-radius: 1px ;
-webkit-border-bottom-left-radius: 1px ;

Modifié par Borak (28 Jul 2010 - 23:05)

Rohhhh merci bcp pour la solution !!

G-é-n-i-a-l-e

Par contre attention, j'ai un peu merdouillé sur les arrondis autre que webkit.
C'est 80px 1px 80px 1px
Modifié par Borak (29 Jul 2010 - 07:56)

Hello,

Il n'est plus nécessaire d'écrire les propriétés complètes sur Webkit :

-webkit-border-top-left-radius: 80px ; 
-webkit-border-bottom-right-radius: 80px ; 
-webkit-border-top-right-radius: 1px ; 
-webkit-border-bottom-left-radius: 1px ;

devrait pouvoir être remplacé par :

-webkit-border-radius: 80px 80px 1px 1px; 

Coucou

j'ai suivit tout vos conseils !

Et ... tout marche niquel Un grand Merci

Bon j'ai plus qu'a essayé de comprendre pkoi jquery fais des trucs bizards sous IE8, je slide dans un div sur 3 positions ... mais sinon avec pie tout est parfait (Merci pour le tuto mdr)

Si y en a qui veulent jeter un œil au résultat (pas encore finit hein) tout les conseils sont les bienvenus, je sais l'intro fais tres tres y a 5 ans mais bon

Grosso modo je me reconvertit et je m'installe définitivement comme photographe

http://clphoto.fr

To DO list :

- Finir d'alimenter le contenu
- Debug IE8 galerie
- URL Rewriting
- Finir la CSS

Raphael a écrit :
Il n'est plus nécessaire d'écrire les propriétés complètes sur Webkit :

-webkit-border-top-left-radius: 80px ; 
-webkit-border-bottom-right-radius: 80px ; 
-webkit-border-top-right-radius: 1px ; 
-webkit-border-bottom-left-radius: 1px ;

devrait pouvoir être remplacé par :

-webkit-border-radius: 80px 80px 1px 1px; 

Après vérification, c'est vrai, une seule ligne suffit (testé sur safari 4 et 5). Chouette

Heu,tout compte fait, je viens d'avoir un ptit pb sur un safari 4 et un iPad. Donc, je reste avec l'ancienne technique
Modifié par Borak (02 Aug 2010 - 07:26)