Problème sous IE avec un div de 2px de haut

Bonsoir à tous,

J'ai un problème incompréhensible sous IE avec un truc tout con :
je souhaite avoir un div en CSS de 2px de haut pour faire office de diviseur de contenu sur mon site.
J'ai donc crée dans mon CSS :

.divider { height: 2px; background: #393149; border-left: 5px solid #776F88; margin: 5px 0; padding: 0; }

Impeccable sous Firefox et Opera mais sous IE il est beaucoup plus grand que 2px. Comment c'est possible ? IE ne capte pas les petites valeurs ? J'ai également essayé en mettant une image de 2px de hauteur en background et le resultat est le même...

Quelqu'un a-t-il une explication ?

Merci d'avance.
Modifié par Isuka (19 Oct 2005 - 19:48)

Bonjour,

Sur IE, les div vides ont une hauteur minimale. Essaye ceci :

Exemple styles inline :

<div style="height:2px;[b]font-size:1px;line-height:0;[/b]background-color: #393149; border-left: 5px solid #776F88; margin: 5px 0; padding: 0;">[b]&nbsp;[/b]</div>

Modifié par Merkel (19 Oct 2005 - 19:53)

Génial ça marche. Merci Merkel je commencais à stresser

Au plaisir !

N'oublis pas d'indiquer ton sujet comme résolu. Si tu ne sais pas comment, voir la FAQ.

D'un autre côté, tu aurais pu utiliser une balise faite exprès : <hr /> et tu n'aurais eu aucun problème lors de l'application du CSS...

D'un point de vue sémantique, c'est mieux

(http://www.la-grange.net/w3c/html4.01/present/graphics.html#edef-HR)
Modifié par mat_chab (19 Oct 2005 - 20:14)

mat_chab a écrit :
D'un point de vue sémantique, c'est mieux

La valeur sémantique de cet élément est plutôt obscure, voir inexistante. Il ne s'agit que d'un élément visuel. hr est aussi neutre qu'un div, au niveau sémantique. Du moins, c'est ce que j'ai pu comprendre des messages que j'ai vu à ce sujet.

Tiens, je viens de trouver ce message de ce bon vieux brocoli.

Ceci dit, c'est vrai qu'utiliser un hr pourrait être préférable.

Pour terminer, un article sur le stylage des hr.
Modifié par Merkel (19 Oct 2005 - 20:33)

bonjour,

de plus l'espace entre l'element precedent et suivant n'est pas "compresible" sous IE, ou bien je n'ai jamais trouvé le truc
Pour comprendre ce dont je parle :

<div style ="background-color:red;width:80%;">top</div>
<hr style="height:2px;overflow:hidden;margin:0;" />
<div style ="background-color:red;width:60%;">bottom</div>

a voir sous IE et les autres, donc selon le resultat visuel le <hr> n'est peut-etre pas le meilleur choix.

Effectivement, juste avant que Merkel me donne sa technique de la mort qui tue ( ), j'allait me rabattre sur la technique du <hr /> que je viens juste de découvrir sur sitece site

Peut-être que je vais utiliser ça alors... on peut définir un border-left sur un hr ?

Isuka a écrit :

Peut-être que je vais utiliser ça alors... on peut définir un border-left sur un hr ?

Oui, mais il faudrait vérifier si ca passe bien dans les différents navigateurs.

Mouais... je sens bien que je vais galerer pareil à savoir pourquoi ça passe pas bien sous IE avec cette histoire encore Je vais me contenter du div pour l'instant (je suis bien content d'avoir résolu ce petit truc qui m'enervait ) mais je me pencherais sur le <hr /> un de ces 4. Pour faire un délimiteur comme j'ai fait, le <hr /> me parait quand même plus logique.

P.S. Bizarrement je n'ai plus la fonction éditer sur mon 1er post, pour mettre en résolu, alors que je l'avais tout à l'heure... je suis loggé pourtant...