28173 sujets

CSS et mise en forme, CSS3

Bonjour,

La page concernée: http://bricosign.free.fr/xeki/

Mon problème se situe au niveau des 2 barres au bas de la partie contenu.
Sous IE il y a une marge entre les fonds d'Article et Commenter cet article.... et pareil pour la barre du dessous.

Le code html de la partie concernée:

     <h3 class="titre_info_barre">Article</h3>
     <p class="contenu_info_barre">Commenter cet article sur le forum &nbsp;|&nbsp; Proposer une modification de cet article</p>
     <h3 class="titre_info_barre">Administration</h3>
     <p class="contenu_info_barre">Modifier cet article &nbsp;|&nbsp; Déplacer cet article &nbsp;|&nbsp; Supprimer cet article</p>


Le code css de la partie concernée:

h3.titre_info_barre {
	padding: 0px 10px 0px 10px;
	color: #AEAEAE;
	font-style: bold;
        font-size: 1em;
	background: #3E3E3E;
	float: left;
	border-top: 1px solid #333332;
        position: relative;
        height: 21px;
        line-height: 21px;
}
p.contenu_info_barre {
	background: #D9D7D7;
        overflow: hidden;
	padding: 0px 10px 0px 10px;
	border-top: 1px dashed #333332;
        height: 21px;
        line-height: 21px;
}


Merci,

Rémi
Modifié par *|~ XiKuXan ~|* (23 Apr 2006 - 11:46)
*|~ XiKuXan ~|* a écrit :
Sous IE il y a une marge entre les fonds d'Article et Commenter cet article.... et pareil pour la barre du dessous.

Hello Rémi,

Tu aurais pu être un poil plus précis et préciser qu'il s'agit d'une marger verticale de quelques pixels de large (genre 3 pixels), en gris clair sur gris à peine moins clair…
Parce que là, ça m'a pris deux minutes rien que pour voir le problème dont tu parlais Smiley sweatdrop

Bon, tout ça me semble lié au traitement des flottants par IE. Normalement, le bloc de gauche (h3) est censé flotter par dessus le paragraphe, et ne repousser que le texte, pas les limites du paragraphe lui-même. Ça marche comme ça dans Firefox, mais dans ce cas précis pas avec IE.

Pourtant, en temps normal, IE applique bien le comportement standard. Ce qui le gêne sûrement ici, c'est qu'il applique au paragraphe le layout. Cf les exemples de Laurent Denis sur le HasLayout.

Je pense que dans ton cas précis, on a une conjonction des bugs (1) et (2).

Pour confirmer ça, tu peux supprimer (temporairement) le height: 21px; (que par ailleurs, pour des raisons d'accessibilité, je déconseille d'utiliser…), qui confère le layout au paragraphe. Le premier bug au moins devrait disparaître.
Boujour !
a écrit :
Parce que là, ça m'a pris deux minutes rien que pour voir le problème dont tu parlais
Tout pareil. Ahah ! Smiley lol

Enlever le "height" fonctionne bien ici : ça supprime les deux espacements. Alors autant le virer ; d'autant plus que je ne crois pas que le contenu éventuel sera suffisant pour faire varier la hauteur.

Edit -- Je supprime ceci !
Modifié par Smiley neko (23 Apr 2006 - 11:47)
Merci pour votre aide; désolé de ne pas avoir expliqué mon problème plus clairement...

En enlevant le height, il n'y a plus cette marge.