28220 sujets

CSS et mise en forme, CSS3

Ligne d'un pixel de hauteur

Bonjour tout le monde !

J'ai un petit souci : je voudrais créer une ligne d'un pixel de hauteur avec un image en fond qui se répète. Sous le panda rouge, ça marche bien, mais sous IE, l'épaisseur n'est pas prise en compte !

Le code : 

<style type="text/css">
.ligne 
{
display: block;
width:140px;
height:1px;
background: black 
}
</style> 

blabalba 
<div class="ligne"></div>
bliblibl


Height marche bizarrement ! Par contre, j'ai pu feinter en mettant un &nbsp dans le div et en précisant la valeur line-height à 1px dans la classe, mais ce n'est pas beau. Est-ce que quelqu'un aurait une idée pour faire ça proprement ?

Merci d'avance de votre aide !
Je rejoins oli pour dire qu'il serait préférable d'utiliser <hr /> pour la justesse sémantique, à moins que le container au dessus puisse être affublé d'une bordure en bas ce qui règle le problème sans élément supplémentaire.

Quoi qu'il en soit ta question a un intérêt technique plus large qui mérite réponse. IE a une tendance générale à agrandir les "trop petites boîtes" à une taille leurs permettant de contenir leurs contenus.
Ainsi bien que IE ne connaisse pas min-height, toutes les boîtes auront au moins la hauteur de leur contenu.
Dans ton cas, il se trouve que IE utilise par défaut une taille de font supérieure à un pixel, et c'est ce qui empêche d'avoir une boite de cette hauteur. Il te suffit de donner une valeur explicite à la taille de font pour voir disparaître le pb. Par exemple {font-size:0}.

C'est ce que tu obtenais indirectement avec line-height.
Administrateur
les div trop vides ont tendance à ne pas être affichés, ce qui explique pourquoi en plaçant un &nbsp; à l'intérieur ils puissent apparaître.

sémantiquement ce n'est pas l'idéal (un div vide ne signifie rien), hr est en effet plus adapté puisqu'on considère que c'est une ligne séparatrice horizontale. de plus c'est plus facile à taper Smiley smile

l'inconvénient est évidemment qu'il faut le styler au maximum pour se débarasser de la présentation par défaut, qui impose marges et ombrages.

ces deux pages abordent le sujet avec des exemples pratiques :
http://www.sovavsiti.cz/css/hr.html
http://www.blakems.com/experimental/hr/
Xavier a écrit :

Dans ton cas, il se trouve que IE utilise par défaut une taille de font supérieure à un pixel, et c'est ce qui empêche d'avoir une boite de cette hauteur. Il te suffit de donner une valeur explicite à la taille de font pour voir disparaître le pb. Par exemple {font-size:0}


Un grand merci, ca viens de me sauver ma matinée, ce truc là Smiley smile Smiley smile
Sujet clos
Aller à