Discussion :

[speedev]

Salut!

Je suis sur une appli full-css et je rencontre un problème qui n'est pas dans une autre de mes appli et pourtant...le code est presque rigoureusement le même. Mais je ne peux reprendre le code en entier...

J'ai un formulaire standart disposant les éléments ainsi:

Un libellé de champ à gauche
Un champ de saisie à droite.
[Saut de ligne]
Un libellé de champ à gauche
Un champ de saisie à droite.
[etc...]

HTML épuré:

Code :

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

1
2
3
4
5
6
<p class="p_lib">Nom : </p>
<p class="p_chp"><input ... /></p>
<hr />
<p class="p_lib">Prénom: </p>
<p class="p_chp"><input ... /></p>
[etc ...]

CSS

Code :

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

 hr {clear:both;visibility:hidden;}

p_lib et p_chp sont en float:left au niveau css
Je n'utilise pas de flaot right car je ne veux rien à droite tout simplement. Chaque <p> doit être collé de deux en deux.


Résultat:
Les <p> sont imbriqués de deux en deux comme je le souhaite seulement l'espacement entre chaque ligne de deux <p> est de beaucoup différent entre IE et mozilla sachant que mozilla m'offre ce que je souhaite comme espacement!

Savez-vous comment réduire cet espacement sous IE sachant que j'ai testé la fixation d'une hauteur en vain etc...?

Merci

[MasterOfChakhaL]

je pense qu'il est possible de te passer des éléments p ainsi:

HTML:

Code :

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

1
2
3
4
5
 
<label>Nom : </label>
<input ... />
<label>Prénom: </label>
<input ... />

CSS:

Code :

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

1
2
3
4
5
6
7
8
 
label {
  float:left;
}
input {
  float:left;
  clear: right;
}

[titoumimi]

ton problème viens du fait que le tag P est de type boite. En essayant de le passer en inline, est ce que ça ne te résoudrai pas ton soucis ?

[masu]

ton problème viens du fait que le tag P est de type boite. En essayant de le passer en inline, est ce que ça ne te résoudrai pas ton soucis ?

C'est souvant pas une idee terrible d'avoir des elements inline en float, le positionnement float suppose le display:block. Ca va rentrere en confli.

Par contre le probleme vien soir du merginou padding des p soit du hr.

Code :

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

1
2
3
4
5
6
.p_lib, .p_chp {
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}

si ca ne vien pas de la essai un line-height, et/ou fixe le heigh de ton hr

[speedev]

Tous mes padding et margin sont à 0. Je démarre toujours mes appli avec ces deux paramètres à 0.

En l'occurence ici c'est bien le margin qui espace les <p>.
Par contre bien qu'à 0...ie me montre environ 20px d'écart entre chaque ligne, mozilla ne me les espace que de 4 ou 5 px tel que je le veux!

Je n'utilise pas les label en général.

Je n'ai pas pensé à tester le line-height mais il ne change rien.

Le display:inline ne change rien non plus

Je galère...Merci à vous qd mm!

[speedev]

Sinon mon hr est fixé à 1px de hauteur.
J'avais mis 0 aussi. Mais ça ne change rien.

C'est un peu comme si le <p> avait une hauteur de marge prédéfinie et qui n'est pas modifiable par le css.