Discussion :

[idefaye]

Bonjour à tous,

J'ai un problème avec les éléments span sous firefox avec l'utilisation de padding.
Sous IE j'avais le même problème, mais il a été corrigé en forçant le height à 30px.
Sous IE les SPANs qui retournent à la ligne se placent bien en dessous des uns des autres.
Sous firefox les SPANs sont superposés, en somme il semble que Firefox ne prennent pas en considération ni la height, ni le padding, margin et border top et bottom lors du placement des SPANs. IE le prend en compte si height est précisé.

Voici un code simplifié qui recrait le pb :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style>
span {
        background-color:purple;  
        color:white; 
        padding: 10 10 5 10; 
        height:30px; 
        border-top:5px solid #ffddff;
        }
</style>
 
 
<span>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</span>
 
<span>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</span>
 
<span>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</span>
 
<span>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</span>
 
<span>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</span>

Toutes aides seraient appréciées.

[fallais]

SPAN est une balise qui formate le texte et donc si un retour a la ligne s'impose il ne peuvent que se superposer ... Enfin je pense Donc enleve la bordure et c'est bon

[idefaye]

Non, je ne crois pas, SPAN est du type BLOCK tout comme DIV mais sans retour à la ligne forcé.
Si tu places des SPAN l'un à coté de l'autre avec des padding left et right, ils sont bien respectés, il n'y a pas de superposition.
Pourquoi y en aurait-il verticalement alors qu'il n'y en a pas horizontallement.
Enlever la bordure ne corrigera rien puisque le problème se répète sur le padding également.

Merci quand même, mais je cherche une solution pour conserver le padding et la bordure et non les faire disparaitre.

[fallais]

SPAN va servir a colorié un texte tu es d'accord ? Donc si le texte reviens a la ligne et que la taille du SPAN est trop grande, il y aura chevauchement obligatoirement J'ai tout essayer et j'ai pas l'eviter jusqu'a present. Si quelqu'un sait ... ? Mais je pense avoir raison

[idefaye]

Ce n'est pas tant le retour du texte dans le SPAN qui pose problème. Mais quand le second SPAN est affiché à la ligne il chevauche le premier SPAN.
Enfin pour être plus claire SPAN est un élément inline (il sert à structurer un groupe d'éléments via du CSS, pas seulement le colorier, cf. doc W3C)
IE semble respecter aussi bien les dimensions verticales qu'horizontales données par le CSS, si bien qu'il n'y a pas de chevauchement.
Firefox se concentre uniquement sur les dimensions horizontales. Donc pas de chevauchement latérale même avec un padding ou border de 100px, mais bien un chevauchement verticale.

Ceci semble manquer de sens. Exemple si j'ai un traitement de texte et que j'encadre une partie du texte, jamais ce cadre ne superposera un autre texte, même si la zone de texte supérieur était d'un style différent(autre groupe/SPAN). Hors c'est ce que manque de faire firefox.
Logiquement les éléments HTML ne se chevauchent pas à moins de préciser une position relative ou absolue et de régler le top selon le chevauchement désiré.

[idefaye]

J'ai fini par trouver une solution en passant par des DIV, ainsi ils se comportent comme des BLOCK éléments et non INLINE, firefox respecter les dimensions verticales et horizontales : pas de superposition lors de retour à la ligne.
Pour empècher le retour à la ligne après chaque DIV il faut rajouter float:left. Ainsi les éléments s'enchainent jusqu'à la taille de la fenetre comme un SPAN.
Attention à ne pas mettre de caractères entres vos différents DIV sinon vous aurez un décalage. Si vous vouler espacer les div entre eux utilisé margin, pas de   sinon il y aura décalage également.

Voila le code simplifier de la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
div {
        background-color:purple;  
        color:white; 
        padding: 10 10 5 10; 
        border-top:5px solid #ffddff;
        float:left;
        margin-left:5px;
        }
</style>
 
 
<div>small</div>  
<div>small</div> 
<div>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</div> 
<div>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</div> 
<div>lllllllllllllllooooooooooooooooooonnnnnnnnnnnnngggggggggg sssssssssssspppppppppppppaaaaaaaaaaaannnnnnnnnnnn</div>

Merci à Elwyn pour avoir essayé d'aider.

[fallais]

Merci à Elwyn pour avoir essayé d'aider.

Dsl de ne pas avoir reussi ! Mais faut avouer que avec SPAN c'etait pas faisable mais j'aurais du contourner avec DIV ...
Content pour toi alors un petit clique sur ?

[Candygirl]

Hello,

Comme tu l'as noté plus haut, span est un élément de txpe inline et non block. Il est donc normal que Firefox ne gère pas la propriété height réservée aux éléments de type block. C'est la propriété line-height qui te permettra de gérer ton problème.

J'ai un peu chercher quelques réponses au pourquoi de ton chevauchement (qui m'interpelait aussi). J'ai trouvé ceci sur les spécifications CSS2 :

La hauteur de l'aire du contenu est égale à la taille effective de la police de l'élément. Les espacements, bordures et marges verticales d'une boîte en-ligne non remplacée commencent en haut et en bas de la police, et non pas en haut et en bas de la ligne. Par contre, le calcul de la hauteur de la boîte de la ligne emploie seulement la propriété 'line-height'.

Bien que les marges, bordures et espacements des éléments non remplacés n'interviennent pas dans le calcul de la hauteur de la boîte en-ligne (et ainsi dans celui de la boîte de ligne), ceux-ci sont quand même rendus autour de la boîte de ligne. En conséquence, si la hauteur de la boîte de ligne est inférieure à celle comprise entre les bords externes des boîtes qui y sont contenues, les arrière-plans et les couleurs des espacements peuvent "déborder" dans les boîtes de ligne adjacentes.

Avec ça, je crois que tout est clair