28172 sujets

CSS et mise en forme, CSS3

Bonsoir a tous,

Alors je cherche en vain une solution pour que mon formulaire apparaisse aussi bien sous ie que firefox...

http://www.notetonsite.fr/test/inscription/

qu'en pensez vous ?

Sous firefox impeccable, sous IE, pas moyen d'avoir un truc potable, c'est affreux !

Je suis bloqué...

merci d'avance pour l'ame charitable qui m'aidera a résoudre ce soucis...
Hello,

IE gère mal les clear. Ça ne passera jamais en gardant ce fonctionnement (série de flottants).

De plus, utiliser une liste de définitions est inapproprié (c'est le label qui décrit le champ de formulaire, et pourtant ta structure en liste de définition dit l'inverse: la partie de droite définit le label). Bascules sur une structure plus simple et par ailleurs plus capable:

<p class="line">
	<span class="first"><label for="test1">Bla bla</label></span>
	<span class="second"><input id="test1" /></span>
</p>

C'est un peu lourd mais c'est prévu pour pouvoir placer facilement du texte brut (sans label) à gauche si besoin, placer plusieurs éléments à droite, etc. Pour la mise en page, faire flotter span.first, mettre une marge à span.second, et éviter le dépassement des flottants avec un overflow: hidden; (et zoom: 1 pour IE6) sur p.line, par exemple. Faire une recherche sur le dépassement des flottants (et le HasLayout) si ça n'est pas clair.
ok je vais essayer avec des spans...

mais rassurez moi, c'est mieux de faire comme ça que des tableaux html basiques ?
Modifié par xlight (04 Jul 2008 - 18:06)
xlight a écrit :
mais rassurez moi, c'est mieux de faire comme ça que des tableaux html basiques ?

Ben ça dépends ce que tu appelles «mieux». Si tu veux te réserver la possibilité d'adapter le design autrement, avec le même code HTML, oui, c'est mieux. Si tu veux faire une mise en page de formulaire en deux colonnes, un tableau marche plutôt bien, tant que tu fais attention à ce que l'ordre de lecture voulu pour le contenu corresponde à l'ordre de lecture du tableau (ligne par ligne, cellule par cellule).
c'est bon, j'ai utilisé des balises <p> beaucoup plus simple a gérer et plus flexible.

Tout marche impec, merci des conseils Smiley cligne