Discussion :

[schnee]

Bonjour,

Depuis des lustres, jusqu'à IE 11 je pense, quand on utilisait une balise TABLE BORDER="1"...
on avait une chouette bordure en relief à deux couleurs : F0F0F0 et A0A0A0 qui donnait des gris bien distincts et équilibré.
Mais avec IE 11 (sans mode de compatibilité bien sûr), et avec Firefox, les couleurs sont par défaut 303030 et 202020.
C'est presque noir et on ne distingue absolument pas les deux couleurs.

Même chose quand on définit une bordure à 2 ou 3px en inset, outset, ridge ou groove.
C'est quoi l'idée ? Il n'y a plus aucun effet de 3D. C'est nul, ou j'ai manqué quelque chose ?
J'ai fait un test avec une table border="3" :

- avec IE 8, c'est un peu clair, mais c'est beau,
- avec Firefox, c'est parfait;
- avec Opera et Safari, un peu foncé, mais ça passe;
- avec IE 11, c'est complètement noir, il n'y a plus de relief.

[Bisûnûrs]

Les agents utilisateurs ont le choix de mettre n'importe quel style par défaut. Si l'envie leur prend, ils peuvent même mettre ces bordures en rouge. A toi de définir le style que tu veux, tout simplement.

[Bovino]

C'est nul, ou j'ai manqué quelque chose ?

Oui, je pense que tu as raté quelque chose apparu depuis peu : CSS !

[schnee]

Ma remarque s'appliquait également à CSS.
Si on définit un style avec une bordure de style outset, inset ou autre, on a le même résultat, même en changeant la couleur.
Le seul moyen est de définir des couleurs différentes pour chaque côté de la bordure, ce n'est pas normal.
Et ce n'est pas parce que CSS est disponible que le comportement sans style par défaut devrait changer à ce point.

[NoSmoking]

Bonjour,
comme déjà dit en absence de consigne ils font ce qu'ils veulent en fonction de leur goût et couleur qui ne te corresponde donc pas.

Le seul moyen est de définir des couleurs différentes pour chaque côté de la bordure, ce n'est pas normal.

c'est une des puissances du CSS que de pouvoir faire en fonction de TES goûts et de TES couleurs.

La seule chose pour laquelle je n'ai aucun doute est que écrire <table border="1" et de laisser faire le navigateur est Brontosauresque

[schnee]

La seule chose pour laquelle je n'ai aucun doute est que écrire <table border="1" et de laisser faire le navigateur est Brontosauresque

Bon OK, mais alors pourquoi <TABLE STYLE="border: outset 2px">
Qui est supposé être THE remplacement dernier cri pour <TABLE BORDER="1"> ne donne pas de meilleur résultat ?
IE 11 rend les bordures quasiment noires, quelque soit la méthode.
Même en modifiant la couleur de la bordure, on n'obtient quasiment aucun effet 3D
STYLE="border: outset 3px;"
STYLE="border: outset #444444 3px;"
STYLE="border: outset #AAAAAA 3px;"
donnent à peu près le même résultat, sans contraste entre les gris.
Le seul moyen d'avoir une bordure convenable et constante d'un navigateur à l'autre, c'est de faire :
STYLE="border: solid 3px; border-left-color:#AFAFAF; border-top-color:#AFAFAF; border-right-color:#444444; border-bottom-color:#444444;"

C'est ça le progrès du CSS ?

[NoSmoking]

Qui est supposé être THE remplacement dernier cri pour <TABLE BORDER="1"> ne donne pas de meilleur résultat ?

ce n'est pas exactement le remplacement et comme dans ce cas tu laisses le choix de la couleur aux navigateurs donc retour aux commentaires ci dessus.

http://css.developpez.com/tutoriels/...e=boites#LII-D

[Bovino]

pourquoi <TABLE STYLE="border: outset 2px"> ne donne pas de meilleur résultat ?

Peut-être parce que 2 pixels ne sont pas suffisants pour afficher un style outset...

[schnee]

Peut-être parce que 2 pixels ne sont pas suffisants pour afficher un style outset...

Non, avec BORDER="1", on obtient effectivement une bordure de 2px. L'effet outset est rendu par un contraste entre le gris des cotés gauche et supérieurs plus clairs que ceux de droite et du bas, respectivement F0F0F0 et A0A0A0 avec IE8.
Avec IE11, c'est maintenant 303030 et 202020, quasiment noir et avec un contraste presque nul. C'est ça le problème, avec CSS ou sans CSS.

[schnee]

Pour conclure, voici une gymnastique permettant d'avoir un rendu à peu près semblable à
TABLE BORDER="1" d'avant IE 11 et constant d'un navigateur à l'autre,
en mettant dans la feuille de style :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
table.b1 {
    border:solid 2px;
    border-left-color:#AFAFAF;
    border-top-color:#AFAFAF;
    border-right-color:#444444;
    border-bottom-color:#444444;
    border-collapse:collapse;
}
table.b1 TD,table.b1 TH {
    border: solid 1px #AFAFAF
}

et en créant la table avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<TABLE CLASS="B1"

Bravo, si c'est ça le progrès avec CSS, le moins qu'on puisse dire, c'est que Microsoft nous fait relever des défis !