18073 sujets

Questions générales et questions de débutants

Tirer un trait de hauteur 1px

Je voudrais un code pour tracer un trait de 1px de haut.
ça marche avec Mozilla, mais pas avec IE... encore une fois !
(Apparait une ligne rouge toujours de même largeur.)


.trait
{
background-color: red;
height: 1pt;
width: 100%;
}


J'utilise ensuite :
<div class="trait"></div>


Quelle est la solution pour IE ?
Merci
Ok, je viens de trouver la solution sur ce forum.




pierreandre a écrit :
Bonjour à tous,

Je ne sais pas si ça peut aider, ni où j'ai pris ça, mais ça marche avec Mozilla et IE 5.2.2 Mac
CSS
.ligne 
		   {
	   	   background			  : transparent;
		   border-color			  : #000;
		   border-width			  : 0 0 1px;
		   border-style			  : solid;
		   }

xhtml
<div class="ligne">
</div>

Je n'ai pas d'exemple car je ne l'utilise pas en ce moment, sur une page accessible.
Amitiés, pierreandre


Merci PierreAndré
Bonjour faidit,

Ajoute "font-size: 0;" à ".ligne " (pour IE qui par défaut fait des div de "height: 20px;".
Modifié par papillon41 (16 Jan 2006 - 08:11)
Bonjour,

IE ne fait pas des div par défaut de 20px : il fait des div ayant par défaut la hauteur correspondante à la valeur par défaut de line-height en fonction de la taille de caractère choisie par l'utilisateur ou par l'auteur. Cela peut valoir 20px, 16px, ou autre.

Il n'implémente pas correctement la propriété width : elle se comporte pour lui en quelque-sorte comme s'il s'agissait d'un min-width. La valeur width: 1px est ignorée si elle n'est pas suffisante pour "faire tenir" en hauteur la hauteur de ligne de la taille de caractère par défaut. De 1px, elle est alors agrandie à 16px+quelque-chose si la taille de caractère par défaut est de 16px et si le line-height est à sa valeur par défaut normal qui vaut environ 1.2em.
Modifié par Laurent Denis (16 Jan 2006 - 08:27)
faidit a écrit :
Je voudrais un code pour tracer un trait de 1px de haut.
ça marche avec Mozilla, mais pas avec IE... encore une fois !
(Apparait une ligne rouge toujours de même largeur.)


.trait
{
background-color: red;
height: [b]1pt[/b];


Attention à la confusion "pixel" - "point". Le point (pt) est une unité concrètement réservée au media print.
Modifié par Laurent Denis (16 Jan 2006 - 08:24)
Administrateur
Au fait, pourquoi ne pas employer tout simplement une bordure de 1px appliquée à ton bloc ?

.bloc {
border-top: 1px solid red;
}
Laurent Denis apporte toujours la précision qui fait mouche !

Pour newto0 : <hr /> possede des "padding... margin...".
Modifié par papillon41 (16 Jan 2006 - 13:16)
Sujet clos
Aller à