Discussion :

[roudoudouduo]

Bonjoir,
je suis en train d'effectuer des tests sur des propriétés CSS simple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
	<p style="width: 120px; border: 1px; border-style: solid;margin: 0; padding: 0;">balise p</p>
	<br>
	<div style="width: 120px; border: 1px; border-style: solid;margin: 0; padding: 0;">balise div</div>
	<br>
	<label style="width: 120px; border: 1px; border-style: solid;margin: 0; padding: 0;">balise label</label>
	<br><br>
	<span style="width: 120px; border: 1px; border-style: solid;margin: 0; padding: 0;">balise span</span>
	<br><br>
	<ul style="width: 120px; border: 1px; border-style: solid;margin: 0; padding: 0;">balise ul</ul>
	<br>

L'affichage est différent comme on pouvait s'y attendre en FF et IE6 (je n'ai pas testé sur le 7).

Sous IE les boites suivent le width et on toute la même taille (ce qui m'arrange en l'occurence) alors que sous FF les boites span et label suivent la taille du texte.

Utiliser la propriété float: left arrange ceci, toutefois je ne suis pas satisfait par cette solution : en effet cela m'oblige à utiliser des "spacers" qui sont des bricolages et qui ont des rendus assez aléatoire suivant les navigateurs. Je veux donc limiter au maximum leur utilisation.

Existe-t-il un propriété CSS permettant de forcer firefox à mettre le width à la taille spécifier et ainsi avoir le même affichage entre IE et FF.

Je n'ai pas trouvé de solution interessante sur internet mais si quelq'un a un lien interessante je veux bien.

Merci de vos réponses.

[MasterOfChakhaL]

Salut,

le comportement de firefox est tout a fait normal.

Il y a deux sortes d'élément:
-les éléments en ligne qui s'affichent les uns à la suite des autres et qui vont a la ligne quand il n'y a pas plus de place (par exemple le texte)
-les elements blocs, qui s'affichent les uns en dessous des autres.

Les propriétés de dimensions ne s'appliquent qu'aux éléments bloc. Or span et label sont des éléments en ligne.
Tu peux leur appliquer la propriété display:block pour indiquer au navigateur que tu souhaite les afficher comme des blocs.

Le float: left marchait car l'utilisation de cette propriété applique implicitement le display: block;

[roudoudouduo]

Je te remercie de ma réponse. Comment faire pour que après le display-block il n'y ai pas de saut de ligne ? si c'était possible, ça m'interesserait. Je ne trouve pas de solution aproprié sur le Web. Dans le cas contraire je n'ai plus qu'à me remettre à cherche une autre solution... :'(

[Bisûnûrs]

Comment faire pour que après le display-block il n'y ai pas de saut de ligne ?

Tu enlèves les <br /> ?

[roudoudouduo]

Effectivment dans l'exemple j'ai des br mais qu'on les enleve ou non ne change rien, les signes sont tout de meme sautés après les éléments block

[Bisûnûrs]

T'as un saut de ligne ou un retour à la ligne ?

Ce sont deux choses totalement différentes ...