28173 sujets

CSS et mise en forme, CSS3

Problème d'affichage avec IE

Je réalise une page avec un code épuré contenant un div qui me sert de conteneur et des span pour positionner mes différents éléments dans cette page, tous les positionnement étant réaliser en absolu dans une feuille css. il y a deux formulaires, ceux-ci s'affiche parfaitement dans tous les navigateurs sauf dans IE ou ils refusent obstinément d'apparaître.

Les formulaires sont de type
<form ...>
<label class="truc"> qui me permet le positionnement
<input type="text">
</label>
...
</form>

Si quelqu'un à une idée je bute la dessus depuis hier soir, merci d'avance
Modifié par Luc45 (31 Aug 2006 - 12:44)
Bonjour & bienvenue, Luc45

Pense à baliser ton code à l'aide de [ code] & [ /code] (sans les espaces) afin de le rendre plus lisible, stp.

Il nous faudrait aussi la partie CSS correspondante pour pouvoir t'aider. L'idéal étant d'avoir la page en ligne, pour faire des tests facilement.

D'autre part, il est déconseillé d'imbriquer la balise label et les input de cette façon. Il vaut mieux écrire 
<label for="texte">Texte :</label><input type="text" id="texte" name="texte" />
pour des raisons d'accessibilité (Laurent Denis a dû expliquer cela une centaine de fois sur le forum, une recherche pourra p-e t'aider en attendant qu'il passe par là Smiley cligne )

Edit : le titre de ton sujet pourrait être plus précis, par exemple "positionnement de formulaires dans IE". Ca inciterait plus de monde à lire ton message ... Des problèmes d'affichage avec IE, il y en a plein Smiley cligne . Tu peux changer le titre en éditant ton premier post (voir la FAQ)
Modifié par Sopo (31 Aug 2006 - 13:07)
Antoine Cailliau a écrit :
Tiens, j'ai déjà lu ce post quelque part.

Je pense aussi que faire tout le positionnement en absolu n'est pas une bonne idée.

ça peut être gérable tant qu'on reste en dimensions fixées, non ?

Par exemple, en structurant le formulaire avec des "paragraphes" :
<form>
   <p><label for="...">...</label><input type="..." id="..." name="..." /></p>
</form>
et en stylant comme ceci :
form p {
   position: relative;
}
form p input {
   position: absolute;
   right: 0;
   width: 50%;
}

PS: Félicitations pour le bouquin, Antoine Smiley smile
Oui, ça peut être gérable mais je pense que ce n'est pas une des meilleurs techniques de positionnement et que celle-ci doit rester confinée à certains cas. C'est comme la programmation avec des goto, ça peut être gérable, mais ce n'est pas optimal Smiley cligne

Ps : Merci Smiley smile
D'autre part, il est déconseillé d'imbriquer la balise label et les input de cette façon. Il vaut mieux écrire 
<label for="texte">Texte :</label><input type="text" id="texte" name="texte" />


Oui mais si je fais cela je ne peux plus positionner mon input à l'endroit ou je veux
...

Pour ce qui est du positionnement en absolute, en générale ça marche très bien et je trouve cela beaucoup plus pratique, personnellement. mon problème c'est que les formulaire ne s'affiche pas.

je supprimerais l'adresse des que j'aurais une solution pour de problème de confidentialité.
Modifié par Luc45 (31 Aug 2006 - 15:17)
Boonjour,

Etant donné l'inaccessibilité intrinsèque de la page en l'état, ce ne sont pas quelques label corrects qui seraient une mesure prioritaire à prendre de ce point de vue...

Un peu peu plus, un peu moins d'inacessibilité, cela reste dans tous les cas un Web à la marge (mais profitable, toujours à la marge).
Modifié par Laurent Denis (31 Aug 2006 - 14:54)
cela venait de mon ma classe inputmail la bordure était transparente je l'ai rempacer par :

.inputmail { color: white; font-size: 10px; line-height: 8; background-color: transparent; border: 0pt}

et ça marche mais le contenu des input ne s'affiche que l'orsque l'on clique dans la case c'est un peu dommage.
Modifié par Luc45 (31 Aug 2006 - 15:19)
Sujet clos
Aller à