Discussion :

[Bensor]

Bonjour,

Voilà, je rencontre un léger problème avec IE. Pour faire court, j'ai 2 champs de même longueur qui s'affichent differement sous IE : l'un est plus court que l'autre.



Le même code sous Fx



Comme vous pouvez le voir, le problème ne se produit pas sous Firefox. Mais sans plus attendre, voici le code HTML du formulaire :

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
22
23
24
25
26
27
28
29
30
31
32
33
<form action='/user/login' method='post' name='login'>
  <table class='login'>
    <tr>
      <td>
        Pseudonyme : 
      </td>
      <td>
        <input type='text' size='20' name='nickname' />
      </td>
      <td rowspan='2' class='btn-login'>
        <table onclick='document.login.submit();' class='button'>
          <tr>
            <td class='lbtn'>
            </td>
            <td class='cbtn'>
              GO
            </td>
            <td class='rbtn'>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        Mot de passe : 
      </td>
      <td>
        <input type='password' size='20' name='password' />
      </td>
    </tr>
  </table>
</form>

Et le code CSS qui va avec

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
22
23
24
td.lbtn{
  width: 22px;
  background: url(pictures/btn-left.gif);
  height: 24px;
}
td.cbtn{
  background: url(pictures/btn-content.gif);
  color: white;
  font-weight: bold
}
td.rbtn{
  width: 22px;
  background: url(pictures/btn-right.gif)
}
table.login{
  float: right;
  border-collapse: collapse;
}
table.button{
  border-collapse: collapse
}
td.btn-login{
  vertical-align: middle
}

A priori, je ne vois pas ce qui peut causer ce problème Si quelqu'un a une idée, je suis preneur ^^

Merci

[Bisûnûrs]

Essaie de fixer la largeur de tes input en CSS.

[Bensor]

Essaie de fixer la largeur de tes input en CSS.

C'est possible ça? Je ne le savais pas J'essaie cette solution de ce pas

[Bensor]

Problème résolu. On remplace "size='20'" par "class='login-field'" et on ajoute le code suivant au fichier CSS:

Code :

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

1
2
3
input.login-field{
	width: 150px
}

Merci beaucoup

[miloux32]

sans CSS :
il me semble que sous IE , c'est maxlength qui prend le pas sur size ....

[Bensor]

sans CSS :
il me semble que sous IE , c'est maxlength qui prend le pas sur size ....

Ah bon? Bizarre ça...