[CSS] Pb de border:double

Le
fmeriot
Hi, j'ai un petit souci avec les border de CSS.

http://membres.lycos.fr/velotrainer/photos/css.gif

Dans la capture d'écran ci-dessus j'ai un <DIV> contenant du texte et
avec une border "double" en haut et une simple sur les trois autres
cotés.

Sous IE la coin supérieur droit ne s'affiche pas correctement (voir
image) car il manque qques pixels pour clore complètement le cadre.
Sous mozilla ça passe nikel.

Voici le code du style :
[CODE]
<style type="text/css">
#test{
width:200px;
height:200px;
border-style:double solid solid solid;
border-width:3px 1px 1px 1px
}
</style>
[/CODE]

le code HTML :

[HTML]<div id="test"> Lorem ipsum dolor sit amet, consetetur
sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna
aliquyam erat, sed diam voluptua.</div>
[/HTML]
  • Partager ce contenu :
Vos réponses
Trier par : date / pertinence
Pascal Vigneron
Le #21896701
"fragmonster" a écrit
http://membres.lycos.fr/velotrainer/photos/css.gif
Dans la capture d'écran ci-dessus j'ai un <DIV> contenant du texte et
avec une border "double" en haut et une simple sur les trois autres cotés.
Sous IE la coin supérieur droit ne s'affiche pas correctement (voir
image) car il manque qques pixels pour clore complètement le cadre.



Bonjour,
Par curiosité j'ai regardé sous 4 navigateurs et ai vu 4 résultats différents !
Pour mieux voir j'ai grossi le border-top (code ci-dessous)

IE 5.5 : comme votre .gif, aussi bien à gauche qu'à droite.
Grossi on voit que le border des cotés atteint la moitié de l'épaisseur
du border-top. Symétrie G-D.

FireFox 0.8 (et Nvu 0.1) : "paraît" bien comme sur votre .gif, mais
grossi, le border-left n'atteint que les 2/3 de l'épaisseur du border-top
du coté gauche, atteint le haut de l'épaisseur à droite.

Opera 6.05 : paraît comme IE mais
grossi on voit les border des cotés qui touchent juste le bas de l'épaisseur
du border-top

Amaya 8.3 : c'est la cata ! le border des cotés se prolonge au-dessus
du border-top d'une longueur égale à l'épaisseur du border-top !
(disparait avec 'solid' à la place de 'double'.) Le texte s'écrit sur le
border-top,
qui est donc en fait trop bas, de son épaisseur. En plus le border-left est
doublé d'une surépaisseur interne, ne dépassant pas le haut du border-top.

Ce qui est rassurant, c'est que si on met 4 border épaisses et doubles,
même d'épaisseurs et de couleurs variées, le résultat est partout OK,
sauf avec Amaya dont les border-top et left (double) posent problème...

<html><head><style type="text/css"><!--
#test{width:20em;
height:8em;
border-style:double solid solid solid;
border-width:30px 1px 1px 1px;
border-color:#ddf #000 #000 #000;}
--></style></head><body>
<div id="test">
Tityre, tu patulae recubans sub tegmine fagi,<br />
Silvestrem tenui musam meditaris avena ;<br />
Nos patriae fines et dulcia linquimus arua,<br />
Nos patriam fugimus. Tu, Tityre, lentus in umbra<br />
Formosam resonare doces Amaryllida silvas.<br />(Virgile)
</div>
</body></html>

PV
Poster une réponse
Anonyme