28173 sujets

CSS et mise en forme, CSS3

Balise <hr>: affichage different sous ie et sous ff

BOnjour tout le monde,
VOila j'ai un petit probleme avec des <hr>, ils ne reagissent pas pareil sous IE et sous FF. Les <hr> sous IE ont une hauteur que je ne souhaite pas alors que sous ff tout est nikel, aucun espace n'est créé.

voici mon css:

hr.separator {
	clear: both;
	visibility: hidden;
	display:block;
	height: 1px;
	margin: 0;
	_margin: -7px 0;
	padding: 0;
	border: 0;
}


pour information voici la page concernée : ici
No ca ne ma pas aidé .. Si je me fie au code donné l'espace est bien reduit sous IE mais sous FF aussi et ca ne vas pas ..
A lire l'article, on dirait que <hr> est un mystere et que personne n'a de réel solution ..
Modifié par kvndevils (14 Jan 2007 - 12:25)
Bonjour ...

Comme te l'a indiqué Raphael, il existe une solution au <hr> -indiquée dans la FAQ- qui normalement devrait régler le problème partout.
a écrit :
Cette méthode réduit l'espace supérieur sur IE (pas l'espace inférieur), sans - curieusement - modifier le comportement sur les geckos.

Je suis donc assez surprise qu'il n'en soit rien.
Es-tu sûr d'avoir bien utilisé le code indiqué ... Smiley rolleyes

Cependant, si vraiment tu ne trouves pas de solution à ton problème, il te reste toujours la posibilité de styler cette balise de manière différente pour IE aux moyens de commentaires conditionnels Smiley cligne
Modifié par Cygnus (14 Jan 2007 - 14:19)
kvndevils a écrit :
Ce qui est parfois impossible ...
Je me demande bien dans quel cas! Le plus simple vu le support inégal des navigateurs actuels reste clairement l'application d'une bordure ou d'un arrière-plan à l'endroit désiré.
Benjamin D.C. a écrit :
Je me demande bien dans quel cas! Le plus simple vu le support inégal des navigateurs actuels reste clairement l'application d'une bordure ou d'un arrière-plan à l'endroit désiré.

Salut,
Il me semble que ta réponse est incorrecte. Il peut tout à fait être nécessaire d'employer une balise <hr>.
Par exemple, ne serait-ce que lorsque tu as un problème de flottant qui sort de son contenu...
Tu ne crois pas ? Smiley rolleyes

Et dans ce cas-là, les solutions que tu as énoncées, à savoir l'application d'une bordure ou d'un arrière-plan, ne sont d'aucune utilité. Smiley cligne



<edit:mea-culpa>
En voyant la réponse de Thomas, je remarque que je n'ai pas été assez rigoureuse dans mon explication. En effet, ce n'est pas la balise <hr /> en elle-même qui empèche le débordement du contenu, mais bien la déclaration clear:both; qui lui est appliquée.
Et toujours comme le dit Thomas, il est tout à fait possible d'appliquer cette déclaration à n'importe quelle autre balise.
Cependant, il est sémantiquement plus correcte d'utiliser un règle horizontale pour arriver à nos fins qu'une balise vide telle qu'un <span> par exemple.
Voilà ce que je voulais dire en indiquant qu'Il peut tout à fait être nécessaire d'employer une balise <hr>.
</edit:mea-culpa>
Modifié par Cygnus (15 Jan 2007 - 00:05)
+1 pour Cygnus
Mon <hr> me sert bien a cela (clear:both;), si tu connais un autre moyen benjamin ..

Sinon j'ai bien testé le code de l'article et oui l'effet n'est pas le meme sous FF ou sous IE ..Je ne vois plus trop comment faire ..
Salut!

On peut tout à fait se passer de la barre horizontale pour empêcher les flottants de dépasser de leur conteneur :
- rien n'empêche d'utiliser une autre balise, moins gênante pour le rendu ;
- on peut utiliser les contextes de formatage.

Par contre, la balise <hr /> a une signification (règle horizontale, elle marque une séparation), et puisqu'il est possible de surmonter les problèmes qu'elle cause, il serait dommage de s'en passer.
kvndevils a écrit :
Sinon j'ai bien testé le code de l'article et oui l'effet n'est pas le meme sous FF ou sous IE ..Je ne vois plus trop comment faire ..

Voir ma réponse ci-dessus :
a écrit :
Cependant, si vraiment tu ne trouves pas de solution à ton problème, il te reste toujours la posibilité de styler cette balise de manière différente pour IE aux moyens de commentaires conditionnels.

Modifié par Cygnus (15 Jan 2007 - 00:03)
je ne connais pas les commentaires conditionnels, il faut que je cherche ... Si tu avais une petite solution Smiley smile ca me permetterait de gagner bcp de tps Smiley smile
merci quand meme
kvndevils a écrit :
je ne connais pas les commentaires conditionnels, il faut que je cherche ... Si tu avais une petite solution Smiley smile ca me permetterait de gagner bcp de tps Smiley smile
merci quand meme


Bonjour,

Un des premiers réflexes à avoir sur Alsacréations c'est de jeter un coup d'oeil à la FAQ Smiley cligne :
Qu'est-ce que les commentaires conditionnels ?
Par ailleurs, comme je le disais plus haut, si ta règle horizontale n'est là que pour empêcher le dépassement des flottants, tu peux parfaitement utiliser ceci :
<p class="clear"></p>

p.clear {
   margin: 0 ;
   padding: 0 ;
   height: 1px ;
   line-height: 1px ;
   [b]clear: both ;[/b] /* Edit: j'avais oublié un détail [smile] sans cette ligne, ça ne sert évidemment à rien ! */
   }

Modifié par Thomas D. (14 Jan 2007 - 15:40)
Sujet clos
Aller à