Créer une bordure avec une fleche

En mettant juste height:20px à ul cela fonctionne sur chrome et opéra mais sur firefox ca fait un décalage vers le bas.
Avec ta modif de 5px ça rend assez propre du coup considère ça bon.
Je vous remercie, si quelqu'un trouve la solution au pixel pret pour chaque navigateur : il peut me contacte sur sakeshi@hotmail.Fr

Merci encore pour ses réponses rapides

Pewel & Xtr3me

De rien j'ai pas trouvé de solution autre que celle là en fait sinon faudrait utiliser un hack css mais j'en connais pas pour ce genre de situation et apparemment c'est pas un cas courant. Je n'ai vu personne se plaindre d'une bordure plus proche sous Chrome que sous les autres navigateurs.

Salut

Déjà, le décalage se fait car tu as oublié le "px" après le "6" dans

#menu a {
    text-decoration: none;
    color:#0da6d2;
    border-bottom:6 solid #0da6d2 ;
}

Pour le reste, je cherche, j'édite ce message quand j'aurais quelque chose à te montrer ^^

Edit :
Et voilà, clique moi !
J'ai fait ça vite fait, peut être qu'il y a mieux à faire (sûrement même ^^)

Il suffit de jouer avec les propriétés border pour faire un triangle en css : regarde ceci !

Ok merci, après modification le nombre de pixel est bon mais ca revient au meme probleme de decalage :

Il faut que ca soit comme le jaune ;/

J'ai édité mon message de dessus au cas où tu ne l'aurais pas vu

Ok merci le triangle marche il y a juste le même décalage (à 100% sur google chrome)mais sinon c'est parfait.

(J'ai testé à 90% de la resolution et ca s'affiche bien, est-ce que tu vois un décalage ?)

C'est vraiment sympa http://jsfiddle.net/ je connaissais pas :p
Franchement merci pour le triangle, j'étais en train de faire les liens en format image.

J'ai édite quelque truc pour avoir ce que je voulais si tu veux le code, dit le moi.

C'est possible de voir le résultat en ligne ?
Sinon dans le :hover change ça:

border-bottom:6px solid #667073;

par

border-bottom:#667073;

Normalement les valeurs en pixels et solide sont reprises de l'élément non hover ^^ . Et pourquoi 6px au lieu de 5 comme tu le dit ?
Et plutôt que de mettre une div inutile avec la classe clear met deux classes à la div container.
Tu mets div class=container clear et comme ça t'auras le même effet et tu pourras supprimer la div clear inutile.

Édite le fiddle Xtr3me, tu n'as pas besoin de voir ce que ça donne en ligne.

Je veux bien que tu nous donne le lien de ce que tu as modifié Sasak, ça nous permettra d'ajouter nos bouts de code et de t'aider.

Je viens de testé sur Opera et firefox cela marche bien (ton code Pewel), sauf sur Google chrome, est-ce que google fait un décalage de 1pxl de base ?
Mon code

.container{
    margin: 0 auto;
    width:1200px;
    height:0;
}
.blue_solid{
    border-bottom:6px solid #0da6d2;
    margin: 0 0 0 0;
    -webkit-box-shadow: 1px 1px 1px black;
    -moz-box-shadow: 1px 1px 1px black;
    box-shadow: 0px 3px 3px black;
}
#logo{
    margin: 15px 0 0 10px;
    width:101px;
    float:left;
}
#menu{
    font-family: Microsoft Yi Baiti;
    text-transform: uppercase;
    font-size: 20px;
    float: right;
    padding:0;
    margin:0;
}
#menu a {
    text-decoration: none;
    color:#0da6d2;
    border-bottom:6px solid #0da6d2 ;
}
#menu a:hover {
    text-decoration: none;
    color:#667073;
    border-bottom:6px solid #667073;
}
#menu ul{

list-style-image: url(images/arrow.png);
}
#menu li{
    float:left;
    margin:35px 80px 0 0 ;
    position: relative;
}
#menu li a span {
    width: 25px;
    margin: 0 auto;
}
#menu li a:hover:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #667073 10px;
    bottom: -15px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}

Aucune modification sur la page html

Le fiddle a pas l'air d'apprécier les classes multiples ;) .
Du coup j'ai modifié le clear.
Et il semblerait qu'on soit bien obligé de spécifier la taille de la bordure même en hover je sais que pour une bonne partie des propriétés si tu ne le spécifies pas les propriétés seront reprises sur l'élément non hover.

Mets un margin:0; et padding:0; dans le #menu a{} on ne sait jamais car certains navigateurs appliquent des marges à droite à gauche.

ça marche toujours pas :/
Xtr3me est-ce que tu vois le décalage sur http://jsfiddle.net/Pewel/mjrnn/ ? (sur chrome)

Bon bah j'ai fait ça c'est déjà beaucoup plus prope:
Le résultat est là dis-moi ce que tu en penses ^^ .
J'ai fait comme j'ai dit, j'ai mis la classe clear sur la div blue-solid ça t'évites de faire une div inutile.

Sur le code que j'avais fait, je ne vois pas de décalage, même sur chrome.
Par contre, sur le code final de Xtr3me, j'en vois un.

Ça ne doit pas être bien grave

Edit : la bordure bottom doit faire 6px puisque celle de blue_solid fait 6px.
Si tu as un léger décallage de 1px, tu peux faire une détection du navigateur en js, ajouter une classe css quand tu es présent sur chrome et ajoute ta marge de 1px pour cette classe dans le css.

@Pewel sur ton fiddle j'ai bien un problème de décalage avec Chrome. Pour le Javascript je pense pas que ce soit une solution à prendre c'est vraiment en cas de dernier recours quoi car le javascript peut être désactivé par l'utilisateur et puis ça bouffera un peu de ressources inutilement.

Pour mon fiddle j'ai pas réussi à régler le problème juste à le rendre moins gênant donc sous Chrome aucun soucis, IE pareil, Safari pareil et Opera aussi il y a juste un petit décalage sur Firefox à cause du 5px comme tu le dis au lieu de 6 ;) .

Ok ok autant pour moi. Dans ce cas là il peut faire la détection du navigateur comme je lui ai dit