28111 sujets

CSS et mise en forme, CSS3

[Résolu] Marges externes sur <hr /> avec IE

Pages :
Administrateur
La question a, me semble-t-il, déjà été évoquée sur le forum, mais sans réponse.
C'est d'ailleurs une question assez fréquente : comment supprimer les marges autour de la balise <hr /> sur IE ? (notamment lorsqu'elle est utilisée avec un clear: both pour les flottants)

Ni les liens suivants ni Google ne m'ont appris quelque chose :
- http://www.sovavsiti.cz/css/ class="highlight">hr.html
- http://www.saila.com/usage/tips/defn.shtml? class="highlight">hr
- http://www.blakems.com/experimental/ class="highlight">hr/

Voici le document :
<div>texte</div>
<hr />
<div>texte</div>

div {background: green; color: white}
hr {
height: 1px;
margin:0;
padding:0;
font-size: 1px;
line-height: 1px;
color: #F00;
background-color: #F00;
border: 0px;
}


Et voici le résultat sur IE et les moteurs Geckos :
http://www.alsacreations.com/divers/hr.gif

La question : comment supprimer les espaces sur IE ?
Hélas IE et son respect des standards...

J'ai une solution:

remplace ton <hr /> par un <div> et rajoute un overflow:hidden;

ta css devient donc:


div {background: green; color: white}

#hr {
height: 1px;
margin:0;
padding:0;
font-size: 1px;
line-height: 1px;
color: #F00;
background-color: #F00;
border: 0px;
overflow:hidden;
}


et ton code:


<div>texte</div>
<div id="hr"></div>
<div>texte</div>
YerebY a écrit :

remplace ton <hr /> par un <div> et rajoute un overflow:hidden;

Mouais... Une div vide n'apporte aucun sens, à l'inverse d'un hr qui induit une sépération.

En lisant la traduction des recommandations:
a écrit :
La quantité d'espace vertical inséré entre une règle et le contenu qui l'entoure dépend de l'agent utilisateur.


Pas plus avancé Smiley decu
Igor a écrit :

Mouais... Une div vide n'apporte aucun sens, à l'inverse d'un hr qui induit une sépération.


Je veux bien mais apparement ce n'est qu'un effet ésthétique dont Raphael a besoin . Je lui ai donc donné une solution.

Maintenant si c'est une réelle séparation, comme tu l' a dis l'espace vertical dépend de l'user agent, et là le raph il est dans la ...
Administrateur
YerebY a écrit :


Je veux bien mais apparement ce n'est qu'un effet ésthétique dont Raphael a besoin . Je lui ai donc donné une solution.

Maintenant si c'est une réelle séparation, comme tu l' a dis l'espace vertical dépend de l'user agent, et là le raph il est dans la ...

Non c'est vraiment d'une séparation dont j'ai besoin... sinon un simple border-bottom aurait suffit Smiley cligne

"Dépendant de l'user agent" ne signifie pas qu'on ne peut rien faire : dans la majeure partie des cas, les marges autour de <p>, <hn>, <ul>, etc. sont aussi dépendantes du navigateur, or on peut les modifier et les supprimer.

La question est donc : pourquoi pas <hr /> ?
Il n'y a effectivement rien dans les spécifications qui témoignerait d'un cas particulier Smiley decu
La seule façon que je peux voir est d'insérer le <hr /> dans un <div> et de lui assigner un background de 1px de hauteur.

J'ai fait une page test : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test s&eacute;parateur</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <style type="text/css" media="all">

div.hrule { 
   clear: both; 
   background: transparent url("hrule.gif") bottom left repeat-x; 
   width: 700px; 
   height: 1px; 
   padding: 0; 
   margin: 0; 
}

div hr { 
   position: absolute; 
   top: -999em; 
   left: -999em; 
}

  </style>
 </head>
 <body>
  <div id="content">
   <h1>Test s&eacute;parateur</h1>
   <div>texte</div>
   <div class="hrule"><hr /></div>
   <div>texte</div>
  </div>
 </body>
</html>


Fonctionne nickel dans IE et mozilla.
Modifié par Stephan (07 Jun 2005 - 05:18)
Administrateur
Mouais, c'est quand-même curieux de ne rien pouvoir faire simplement avec le séparateur <hr /> Smiley sweatdrop
Raphael a écrit :
Mouais, c'est quand-même curieux de ne rien pouvoir faire simplement avec le séparateur <hr /> Smiley sweatdrop


IE Smiley boulet
Raphael a écrit :
Mouais, c'est quand-même curieux de ne rien pouvoir faire simplement avec le séparateur <hr /> Smiley sweatdrop


Ouais, ça m'a un peu occupé l'après-midi, j'ai tenté des choses avec des selecteurs d'enfants adjacents qui ne donnaient rien, ton post Raphaël ma bien un peu gâché mon après-midi, enfin juste un peu Smiley lol
Si au moins on avait une piste du pourquoi.
Administrateur
J'ai peut-être une piste à suivre :

hr {
height: 1px;
[b]margin: -0.5em 0;[/b]
padding: 0;
font-size: 1px;
line-height: 1px;
color: #F00;
background-color: #F00;
border: 0px;
}


Aperçu sous IE6 :
http://www.alsacreations.com/divers/hr2.gif

A suivre...
@Raphaël

J'ai testé sur un projet en cours où j'utilise un tel hr avec clear et j'ai constaté un léger frémissement dans IE 6, dans le bon sens, cependant en augmentant la valeur du margin négatif (vertical) c'est pire, cette salo.... d'espace liée au margin (il me semble) se démultiplie et agrave le problème.

Autre souci, ces modifications n'ont pas eu d'influence dans les Gecko, ce qui ne me semble pas très logique. Smiley bawling
Administrateur
Igor a écrit :
Autre souci, ces modifications n'ont pas eu d'influence dans les Gecko, ce qui ne me semble pas très logique. Smiley bawling

Oui, j'ai remarqué ça aussi.
En attendant je cherche toujours (vainement) un site qui parlerait de ces marges sur <hr /> Smiley cligne
Administrateur
ElMoustiko a écrit :
Un piti [résolu] alors ? Smiley langue

Ben non, même si le plus gros problème est réglé :
- il reste la marge en bas sous IE
- et le comportement n'est pas logique sur les Geckos
Smiley confus
Administrateur
ElMoustiko a écrit :
Bah oui mais tu avais l'air de dire qu'avec un div autour c'etait réglé ?

Sauf si on part du principe que le jeu est de ne pas rajouter de structure supplémentaire au <hr /> Smiley cligne

Soit, on va dire que c'est résolu puisque je ne pense pas trouver mieux.
Lol, c'est toi qui voit Smiley lol
Mais à mon avis il n'y a pas d'autre solution, les <hr /> c'est vraiment un plaie sans rire... ça marche jamais pareil partout, et c'est tout buggé, pourtant c'est bien comme balise Smiley ohwell
Administrateur
Je reposte pour proposer la solution de Xavier, qui semble la plus concluante :
http://blog.alsacreations.com/index.php?2004/11/27/92-supprimer-les-marges-de-la-balise- class="highlight">hr-sous-ie

Xavier a écrit :
<hr> se comporte sous IE comme si l'on avait 2 éléments imbriqués l'un dans l'autre. Le style CSS appliqué à <hr> toucherait l'élément intérieur, l'élément extérieur aurait des caractéristiques figées, donc ne pouvant être contrôlées. Parmi ces caractéristiques notons un padding top et bottom de 7px. Notons également que l'élément intérieur est inline par défaut, sur une ligne dont line-height est aussi de 7px.
Vous pouvez tester dans ce contexte que pour un élément <hr> de moins de 7px, la propriété vertical-align a un effet.

Pour résoudre le problème (le pb des marges), le plus simple consiste a transformer l'élément en block, et à lui imposer des marges négatives de 7px. Voici l'exemple repris de l'article avec gestion de l'espace supérieur et inférieur (marges négatives pour IE seulement afin de ne pas perturber les autres navigateurs) :

CSS :
div {background: green; color: white}

hr {
display:block;
height: 1px;
margin: 0;
_margin: -7px 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}

XHTML :
<div>texte</div>
<hr />
<div>texte</div>

"Les pistes à suivre" de cet article comporte la bonne idée de jouer sur les marges, avec toutefois des inexactitudes :
- les marges à compenser ne sont pas en em, il suffit pour s'en convaincre de modifier la taille du texte à l'affichage,
- l'impression qu'il n'est pas possible de réduire la marge inférieure est due au fait que l'élément est inline. Pour vérifier, on peut jouer sur la propriété vertical-align, ou utiliser un élément de hauteur supérieure ou égale à 7px, ou enfin passer en display block.

Modifié par Raphael (02 Mar 2005 - 10:33)
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
Pages :
Sujet clos
Aller à