Menu en CSS ok sauf sous Safari ...

Salut à tous,
Je me prend la tête depuis quelques jours sur un menu, et je viens d'obtenir un résultat qui me plait sauf que lorsque je le test sur safari ya bug ...
www.sudkravmaga.com/test.php
Regardez au niveau des "border".
Le principe:
- par défaut seul la bordure du bas est affichée
- en :hover la bordure du bas reste inchangée mais celle de gauche, du haut et de droite prennent une autre couleur
- sur la class .current toute les bordures sont là sauf celle du bas.

Firefox me le gère nikel, mais safari est pas d'accord

Voici le CSS

#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:inline-block;
position:relative;
border: solid 1px #000;
border-bottom: solid 1px #980000;
-webkit-border-radius:30px 30px 0 0;
   -moz-border-radius:30px 30px 0 0;
        border-radius:30px 30px 0 0;
}
#menu li li{
	width: 110px;
 height: 32px;
 font-size: 70%;
 border: solid 1px #980000;
}
#menu ul li:first-child{
-webkit-border-radius:8px 8px 0 0;
   -moz-border-radius:8px 8px 0 0;
        border-radius:8px 8px 0 0;
		border-bottom: 0;
}
#menu ul li{
-webkit-border-radius:0;
   -moz-border-radius:0;
        border-radius:0;
}
#menu ul li:last-child{
-webkit-border-radius:0 0 8px 8px;
   -moz-border-radius:0 0 8px 8px;
        border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
max-height:0;
width:100%;
overflow:hidden;
-moz-transition: .6s all .2s;
-webkit-transition: .6s all .2s;
-o-transition: .6s all .2s;
-ms-transition: .6s all .2s;
transition: .6s all .2s;
}
#menu li:hover ul{
max-height:10em;
}
/* background des liens menus */
#menu li, #menu li li{
background:-webkit-gradient(linear,left top,left bottom,from(#727272),to(#000));
background:-webkit-linear-gradient(top, #727272, #000);
background:   -moz-linear-gradient(top, #727272, #000);
background:     -o-linear-gradient(top, #727272, #000);
background:        linear-gradient(top, #727272, #000);
}
#menu li:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#630000),to(#000));
background:-webkit-linear-gradient(top, #630000, #000);
background:   -moz-linear-gradient(top, #630000, #000);
background:     -o-linear-gradient(top, #630000, #000);
background:        linear-gradient(top, #630000, #000);
border: solid 1px #630000;
border-bottom: solid 1px #980000;
}
#menu li#current{
	background:-webkit-gradient(linear,left top,left bottom,from(#980000),to(#000));
background:-webkit-linear-gradient(top, #980000, #000);
background:   -moz-linear-gradient(top, #980000, #000);
background:     -o-linear-gradient(top, #980000, #000);
background:        linear-gradient(top, #980000, #000);
border-top: solid 1px #980000;
border-left: solid 1px #980000;
border-right: solid 1px #980000;
border-bottom: solid 1px #000;

}

/* les a href */
#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
font-family:arial;
color: white;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover li a{
	color: white;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:white;
}

J'ai essayé de jouer avec des -webkit- mais rien ni fait.

Safari gère t'il les border différemment ?

D'avance merci à vous
Modifié par Nunux (30 May 2013 - 20:24)

Bonjour,

Je vois que tu as un

display: inline-block;

sur tes <li>, je sais que j'ai déjà eu des soucis d'interprétations différentes d'un navigateur à l'autre avec cette propriété. Je pense que tu devrais regarder de ce côté.

J'ai essayé en remplaçant par:

display: block;
float: left;

Toujours rien, c'est vraiment bizard, parce qu'il prend en compte certaines propriétés border, mais pas toutes

Tu utilises Safari avec Windows ou MacOS X ?

Car sous Windows, j'ai le même résultat aussi bien avec Firefox qu'avec Safari.

safari avec max OSx

Salut,

Je crois que j'ai trouvé la source de ton problème.
Si je réduis les border-radius à 15px au lieu de 30px sur tes li chez moi ça fonctionne.
Je ne sais pas pourquoi, peut-être une mauvaise interprétation de Safari pour les border-radius...

J'ai trouvé ça qui pourrait t'aider à débuguer sur Safari :
https://getfirebug.com/firebuglite#Install
Modifié par Raphi (31 May 2013 - 13:37)

Bien joué ! C'est exactement ca !! Bizard non ? Y-a t'il des experts de ce genre de choses qui pourraient nous éclairer

Merci à toi
Modifié par Nunux (31 May 2013 - 23:10)