[Résolu] Formulaires mal affichés sur IE (Créer un compte)

  • Statut : non résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #494500
    quent1lap1
    Membre
    Initié WordPress
    5 contributions

    Ma configuration WP actuelle
    – Version de WordPress : 3.1.1
    – Version de PHP/MySQL : il me semble que c’est la plus récente
    – Thème utilisé : Twenty Ten 1.2 quelque peu modifié
    – Extensions en place : aucune liée au soucis
    – Nom de l’hebergeur : OVH
    – Adresse du site : en cours de développement ^^

    Problème(s) rencontré(s) :

    Bonjour à tous !

    Je suis actuellement en stage et j’utilise WordPress en tant que CMS sans blog.
    J’ai un site à faire qui contient pas mal de formulaires, je les ai tous faits à la main et j’ai quelques soucis d’affichage ! Regardez par vous même :
    Sous IE :
    bdb0b65a5182ea9a273b1f6a097bcdd7.jpg
    Sous Chrome :
    65aeeb0e4419ffd4ba96b2e64072d03c.jpg
    Je n’ai pas testé sous d’autres navigateurs.

    Le but étant que l’affichage se fasse comme sur Chrome.
    J’ai beau essayer toutes les propriété CSS que je connais et qui pourraient y changer quelque chose, mais je n’y parviens pas. J’ai également cherché sur google et le forum, sans résultat.
    Je tiens à préciser également que le formulaire est agencé sous forme de tableau, car avec des propriétés CSS ça ne fonctionnait pas, comme si les input et autres select ne prenaient pas en compte le CSS.
    Les propriétés CSS sont d’ailleurs dans le contenu de ma page juste au-dessus du formulaire (dans le code).
    De plus, si je teste le formulaire en brut sous IE, c’est-à-dire dans une page PHP sans l’intermédiaire de WP, le formulaire est correctement affiché !

    Donc je ne comprends pas comment je peux arriver à modifier l’affichage sous IE (et peut-être d’autres navigateurs).

    Est-ce que quelqu’un a une idée sur la question ?

    Je vous remercie par avance !

    #767723
    Guy
    Participant
    Maître WordPress
    14817 contributions

    sans un apercu du code, les réponses risquent de passer à coté du problème

    #767724
    quent1lap1
    Membre
    Initié WordPress
    5 contributions

    Ah oui d’accord !
    Alors je ne reprends que le formulaire, s’il y a besoin d’autre chose je peux toujours l’ajouter !

    <fieldset>
    <legend>Identité</legend>
    <table>
    <tr>
    <td class="premiere_col">
    Nom :
    </td>
    <td>
    <input type="text" name="nom" size='20' maxlength="32" value=" » />
    </td>
    </tr>
    <tr>
    <td>
    Prénom :
    </td>
    <td>
    <input type="text" name="prenom" size='20' maxlength="32" value=" » />
    </td>
    </tr>
    <tr>
    <td>
    E-mail :
    </td>
    <td>
    <input type="text" name="email" size='20' maxlength="32" value=" » />
    </td>
    </tr>
    <tr>
    <td>
    Login :
    </td>
    <td>
    <input type="text" name="login" size='20' maxlength="32" value=" » />
    </td>
    </tr>
    <tr>
    <td>
    Mot de passe :
    </td>
    <td>

    </td>
    </tr>
    <tr>
    <td>
    Confirmer mot de passe :
    </td>
    <td>

    </td>
    </tr>
    </table>
    </fieldset>

    J’espère que c’est assez lisible !

    #767725
    Guy
    Participant
    Maître WordPress
    14817 contributions

    Il n’y a rien de spécial ni de compliqué la dedans.

    Une des façons pour obtenir le resultat que tu as sous IE, c’est que la hauteur des cellules de la colonne 1 soit définie quelque part à une valeur supérieure à la hauteur des input et avec un alignement vertical sur bottom, alors que dans la colonne 2 l’alignement vertical serait défini sur top. Là, c’est dans les css qu’il faudra regarder.

    Sur Mozilla, il y a une extension qui te permet de voir les styles d’un élement particulier, cela peut donner une indication si il n’y a pas de styles conditionels pour IE et Mozilla dans les sources. C’est Web Developper.

    #767726
    quent1lap1
    Membre
    Initié WordPress
    5 contributions

    Alors j’ai trouvé la ligne là dans le CSS :

    .entry-content input {

    margin: 0 0 24px 0;

    }

    J’ai mis à 15 le 24 pour tester, toutes les lignes du tableau se sont rapprochées après modification.

    Finalement, j’ai rajouté dans le code :

    td{
    vertical-align: top;
    }

    et du coup tout est bon maintenant, même sous IE.
    Donc voilà pour le moment ce soucis a l’air réglé, il faut que je fasse de même avec les label pour les checkbox et boutons radio !

    Je te remercie Guy pour tes conseils, ils m’ont aidé à trouver la solution ! 👏

    Edit : je ne peux pas modifier le titre du topic et y ajouter la mention [Résolu]

    #767727
    Guy
    Participant
    Maître WordPress
    14817 contributions

    ben voila 🙂 mais c’est toi qui a trouvé quand même.

    Pour ne pas risquer de désorganiser tout le thème, il serait bien de définir une classe pour ces tableaux et d’appliquer les styles pour les colonnes etc… uniquement dans cette classe. En faisant comme tu le fais, tous les tableaux seront alignés en haut et tous les input de entry-content auront une hauteur moins grande.

    #767728
    anthony_synapse
    Participant
    Chevalier WordPress
    258 contributions

    il serrais plus simple de dégager les tableau qui sont totalement obsolète au profit de DIV et utilisation de LABEL.

    #767729
    Guy
    Participant
    Maître WordPress
    14817 contributions

    oui 🙂, mais bon…
    D’apres ce que j’ai compris, il y a beaucoup de formulaires, l’essai des div avait été fait et il y avait un problème d’interprétation des feuilles de styles. Cela demanderait une revue du code et possiblement beaucoup de travail pour un résultat visuel que l’on peut espérer identique.

    #767722
    quent1lap1
    Membre
    Initié WordPress
    5 contributions

    Oui voilà, exactement !
    J’ai passé plusieurs heures à essayer sans tableaux avec des div et CSS, mais les input et autres balises des formulaires ne se comportaient pas correctement dans l’environnement WP, or avec les tableaux ça fonctionne nickel !
    Je vais définir des classes comme tu dis Guy, ça m’évitera d’avoir à revenir sur cette partie du CSS plus tard si j’ai un soucis ^^

    #767730
    anthony_synapse
    Participant
    Chevalier WordPress
    258 contributions

    oui c’est une façon de voir les choses mais c’est handicapant à la longue de rester sur des standards obsolète.

    #767731
    quent1lap1
    Membre
    Initié WordPress
    5 contributions

    Guy : C’est pas un peu dangereux Web Developer ? J’ai fait des tests en changeant les select en input text par exemple, et n’importe qui peut saisir n’importe quelle valeur et ça peut foutre en l’air la Base de Données !
    Ca fait peur, je n’avais pas prévu ça 😮

    anthony_synapse : je sais que ce n’est pas conseillé, mais je n’ai malheureusement pas le temps de tout revoir mes formulaires alors que ça fonctionne ainsi 😕

    #767732
    Guy
    Participant
    Maître WordPress
    14817 contributions

    tu prêches un convaincu, les tables ne sont pas forcement obsolètes mais devraient être utilisées pour ce à quoi elle sont destinées, des données tabulaires. Néanmoins, il faut avouer que certaines fois une présentation avec un tableau est une solution plus intuitive et plus rapide.
    Pour un site pro avec un contenu fourni et une maintenance qui tient la route, la question ne se pose (presque) pas, pour un projet plus léger, le temps de chargement des pages avec tables, la « sémantique » peuvent prendre moins d’importance.
    Pour reprendre un argument maintes fois lu, je préfere consulter un site « mal » construit avec des tables et bien structuré visuellement, qu’un site respectant des standards mais partant dans tous les sens. Ce qui, je te l’accorde n’est pas un argument 🙂

    #767733
    Guy
    Participant
    Maître WordPress
    14817 contributions

    Web Developper est exactement fait pour cela 🙂, enfin en partie. il fait partie des outils d’analyse de sécurité mais permettra aussi des tests dans des environnements spécifiques (javascript désactivé, etc…), plus des options pour inspecter la page, un bon outils.

13 sujets de 1 à 13 (sur un total de 13)
  • Le forum ‘Utilisation spécifique de WordPress’ est fermé à de nouveaux sujets et réponses.