Petites différences entre navigateurs

Bonjour,
J'ai contrôler le css d'un tableau sur Chrome 10, IE 8 et FF 3.6.
Tout semble nickel, mais j'ai 2 petits détail qui ne vont pas.

Parton du principe que sous FF tout est nickel.


Sous IE, le trait vertical entre les colonnes ne s'affiche pas


Sous Chrome il y a un décalage de 2 ou 3 pixels a droite du tableau



Serriez vous a quoi cela est du et comment le corriger ?

Merci

christobal a écrit :
Sous IE, le trait vertical entre les colonnes ne s'affiche pas
upload/7929-tableau-ie.gif

Sans savoir comment est créé ce trait vertical (image de fond? quel code?), pas grand chose à dire là-dessus.
On peut voir la page?

christobal a écrit :
Sous Chrome il y a un décalage de 2 ou 3 pixels a droite du tableau
upload/7929-tableau-chr.gif

Peut-être parce que width:100% + border-width: 1px, ça donne 100% + 2px de largeur en tout?
Il faut voir si ça peut se corriger avec un box-sizing:border-box (faire une rechercher sur la propriété CSS3 box-sizing).
Modifié par fvsch (18 Mar 2011 - 13:46)

Bonjour,

Ma boule de crystal te conseille d'aller chercher la réponse sous les carottes vertes à minuit, un soit de lune rousse (enroulé dans du jambon, au besoin).



















Sinon, tu peux aussi nous fournir ne page en ligne...

hummm, vous êtes d'humeur chagrine aujourd'hui ?
Ce n'est pas que je ne veux pas vous donner quoi que ce soit, c'est qu'il s'agit d'un back-office en développement donc rien d'accessible via le net.

Je pausais simplement une question au cas ou cela soit un problème connu.

maintenant niveau css, j'ai ça ...

#tableau, thead {
    background: url("/back_office/images/template/bg-titre-tableau.png") repeat-x scroll 50% 50% transparent;
}
table.display thead th {
    border-bottom: 3px solid #CCCCCC;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 24px 3px 10px;
    position: relative;
    text-align: left;
}
#tableau, th {
    border-right: 1px solid #CCCCCC;
}.sorting {
    background: url("/back_office/images/template/sort_both.png") no-repeat scroll right center transparent;
}

Et pour les deux dernières cellules pour ne pas afficher de barre vertical :

.annul_barre {
    border-right: medium none;
}

Bonjour,

christobal a écrit :

Ce n'est pas que je ne veux pas vous donner quoi que ce soit, c'est qu'il s'agit d'un back-office en développement donc rien d'accessible via le net.

Dans un tel cas, il suffit de créer une page accessible publiquement qui est dépouillée des données confidentielles et de tout le reste, pour ne présenter que le tableau lui-même. C'est souvent la façon la plus efficace pour obtenir des retours de la communauté, car c'est très facile à visualiser et à tester.

Ces sélecteurs sont plutôt bizarres:

#tableau, thead {}
#tableau, th {}

On aurait attendu:

#tableau thead {}
#tableau th {}

ou éventuellement:

#tableau, #tableau thead {}
#tableau, #tableau th {}