Problème CSS et border

[fragmonster]

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

Dans la capture d'écran ci-dessus j'ai un <DIV> contenant du texte est 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 car il manque qques pixels pour clore complètement le cadre. Sous mozilla ça passe nikel.

Voici le code du style :

<style type="text/css">
#test{
width:200px;
height:200px;
border-style:double solid solid solid;
border-width:3px 1px 1px 1px
}
</style>

le code 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>

[elle]

Bonjour,

Malheureusement, je ne peux pas t'aider à résoudre ton problème.

Je sais cependant que ie et mozilla ou netscape n'affichent pas les bordures de la même façon.

elle

ma boîte

Modifié 16 Avril 2004 par elle

[Raphael]

Oui en effet, IE a un modèle de boite différent des autres : http://openweb.eu.org/articles/dimensions_boites_css/

[Denis]

Après avoir fait quelques tests, principalement en utilisant une syntaxe un peu différente de la tienne, j'arrive aux mêmes résultats que toi, ce qui me laisse à penser que MSIE ne supporte par convenablement la commande reliée à la bordure double (quelle surprise).

Cependant, même s'il est vrai que la gestion du box model est déficiente (et différente) chez MSIE et chez les autres navigateurs plus conformes aux normes, le problème actuel n'y est pas relié. Il est simplement relié à un mauvais support chez MSIE de la valeur "double" pour l'attribut border-style (encore là, pas de grandes surprises).

<style type="text/css">
     #test{width:200px; height:200px; border: 1px solid #000; border-top: 3px double #000;}
</style>

Il existe toutefois une alternative qui te permettrait tout aussi facilement d'arriver à tes fins. Il te suffirait d'utiliser les règles CSS suivantes pour ton id test et d'utiliser une image de background pour simuler la double ligne :

<style type="text/css">
     #test{background: url(imagedefond.png) repeat-x; width:200px; height:200px; border: 1px solid #000;}
</style>

Ton "imagedefond.png" pourrait simplement être une image de 3 pixels de hauteur par 1 pixel de largeur, transparente ou blanche, avec un ligne noire sur le bas de l'image. Comme tu la spécifies en background, répétitive sur l'axe des x seulement, elle te créera, dans tous les navigateurs, une double ligne identique à la valeur "double" de 3px si bien supportée par les vrais navigateurs Web. Les bordures gauche et droite de ta double ligne seront prises en charge par le border: 1px solid #000; et la ligne du dessous, par l'image.

Ça, ça fonctionnera partout de manière identique et ça aura toujours le mérite d'être sémantiquement correct puisque le code HTML ne sera pas encombré d'une image. Ton HTML pourra toujours se limiter à ton div id="test". Donc, pas de perte, si ce n'est les deux minutes que ça te prendra pour créer l'image et la nanoseconde supplémentaire pour tes utilisateurs à la télécharger...

En espérant que ça puisse t'être utile.

[fragmonster]

Merci à tous. Je vais très certainement passer par une image de fond ou même carremment changer de look

[Denis]

Changer de look ? Et tout abandonner parce que MSIE est incapable de gérer correctement les CSS ?

En tout cas, ce qui est certain, l'astuce des images de fond est toujours très pratique.

[Jez]

Decidemment, t'en as des astuces !