28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Mon problème est le suivant. J'utilise une application qui génère des formulaires dynamiquement (Form Maker Pro, pour ceux qui connaissent).

Un des soucis de cette application, c'est qu'elle génère des formulaires codés en tableaux. Afin de le rendre plus "joli" j'attribue la propriété "width" à chacun des deux colonnes. Firefox ne me pose pas le moindre problème, mais IE 6 et IE 7 se contrefichent de la propriété width que je peux attribuer à la colonne de gauche. Je me retrouve donc avec un texte tout écrasé à gauche.

Pour plus de clarté, voici le code HTML d'une ligne de ce tableau :

<tr><td colspan="2" class="titleSection">Company Information</td></tr><tr><td class="formLabel">Company name<span class="arrow">*</span></td>
<td class="formField"><input type="text" size="25" name="r_Company_name" id = "r_Company_name" value="" title="Company name" class="format"></td>
</tr>


Et voici, la CSS correspondante :

.formField { float: left; vertical-align: top; width: 200px; }
.formLabel { font-family: Arial, Sans-serif; float: left; vertical-align: top; width: 200px !important; font-weight: bold; }


Merci par avance pour votre aide. J'en ai vraiment besoin...

Salutations
Bonjour,

Ça vient sans doute du fait que les colonnes plus à droites ont un contenu important. Et que l'algorithme de calcul des largeurs de colonnes est assez compliqué et peut donner des choses très variables suivant les navigateurs et les situations.

Parmi les solutions possibles:
- donner des largeurs à toutes les colonnes (on peut en général se contenter des cellules de la première ligne ou des en-têtes de tableau s'il y en a);
- passer en table-layout: fixed;
- utiliser white-space: nowrap sur les contenus de certaines cellules.
Je suis parvenu à corriger ce problème.

En fait, cela venait du fait qu'une classe appelée juste avant, surdéfinissait la width des TD.

Avant, j'avais ça :
width: 100%


J'ai corrigé en mettant ceci
width: 550px


Merci pour l'aide reçue