Forum d'entraide PHPFrance

Bonjour,
J'ai un petit soucis dont je n'arrive pas à trouver la réponse.
Voila, mon soucis viens de mon label. Je lui affecte un width. Sous IE il me le prend en compte mais pas sous Mozilla.
Je vais être plus claire. J'ai un formulaire, et donc avant les input je mets des labels. Mon souhait et de jouer sur la taille des labels pour que tout soit aligné. Seulement, Mozilla ne respecte pas la taille de mes labels.
Et je veux éviter de faire des tableaux.
Merci.

ps: si quelqu'un pouvait m'expliquer comment faire pour que les CSS soient appliquable sur tous les navigateurs.

Un label a par défaut display:inline.
Or un élément display:inline n'est pas redimensionnable.
On pourrait lui donner un display:block, mais on galèrerait après au niveau des positionnements de blocs (aligner des blocs horizontalement pose souvent des problèmes, je ne m'étends pas dessus il y a des tas de tutos).

On va procéder plus simplement : on laisse label tel qu'il est, et on définit un bloc à l'intérieur, avec span par exemple.
On va donner à ce span la longueur qu'on souhaite (label s'adaptera donc à la largeur de son contenu), un display:block.
Si on s'arrête là on se retrouve avec un problème d'alignement : un bloc force le retour à la ligne des blocs suivants, sauf... s'il flotte

On fait donc flotter le span à gauche en prime (où à droite si le label est à droite du input).

Cette technique permettra d'aligner correctement les éléments :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      test
    </title>
    <style type="text/css">
    label span { /* on définit le bloc à l'intérieur du label */
      width: 150px; /* largeur de notre label */
      display:block; /* on force le bloc span à s'afficher en bloc (sinon il n'est pas redimensionnable) */
      float:left; /* qu'on fait flotter à gauche pour l'alignement */
    }
    </style>
  </head>
  <body>
    <form action="script">
      <label for="f1"><span>bla bla bla</span></label><input id="f1" /><br />
      <label for="f2"><span>bli bli bli bli</span></label><input id="f2" />
    </form>
  </body>
</html>

(j'ai testé avec firefox, IE, et Opera)

ps: si quelqu'un pouvait m'expliquer comment faire pour que les CSS soient appliquable sur tous les navigateurs.

L'expérience (qui inclut l'expérimentation). À force de pratiquer, on finit par connaître par coeur les mauvaises implémentations de tel ou tel navigateur. Et quand une bidouille ne marche pas, on en essaie une autre

Merci pour ta réponse.
Mais en fait je cherche plus à mettre 2 input sur la même ligne.

Forum d'entraide PHPFrance

IE vs Mozilla

IE vs Mozilla