IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Texte dépasse la div sur Internet Explorer


Sujet :

CSS

  1. #1
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut Texte dépasse la div sur Internet Explorer
    Bonjour,
    je viens vers vous car j'ai un souci : j'ai un <span> dans lequel va s'afficher un texte qui sera envoyé depuis le code JAVA. le problème c'est que sur firefox c'est nickel et quand je teste sur Internet Explorer le texte déborde et donc dépasse la div et fait décaler les autres balises.

    sur firefox il y a automatiquement le retour à la ligne et sur Internet Explorer il met sur une seule ligne alors qu'il y a des espaces et des "."

    Le texte : "L'IBAN doit comporter 27 caractères. Veuillez corriger votre saisie." est affiché dans le <span id="erreur">
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
                                    <div class="help-block" style="display:none">
                                        <div class="alert">
                                            <p id="p_erreur">
                                                <span class="erreur icon-marge-droite">
                                                    <span class="sr-only">, erreur,</span>
                                                </span><span id="erreur"></span></p>
                                        </div>
                                    </div>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1. une copie -d'écran aurait aidé à visualiser...
    2. d'autant qu'on ne sait RIEN du CSS appliqué...
    3. ... ni de la version de I.E. incriminé


    Cela dit, un <span> n'est pas un <div> :
    • <span> est de type inline (par défaut)
    • <div> est de type block (par défaut)


    A vue de nez, je dirais que ce <span> a été passé en display:inline-block, et que inline-block n'est pas compatible par ta version de I.E. (< I.E. 8).
    Mais bon. Ca tient plus de la voyance que d'autre chose...

  3. #3
    Invité
    Invité(e)
    Par défaut
    Il faudrait le CSS, ou MIEUX : voir la page EN LIGNE.


  4. #4
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .help-block {
      display: block;
      margin-top: 5px;
      margin-bottom: 10px;
      color: #737373;
    }

  5. #5
    Invité
    Invité(e)
    Par défaut
    OK. Je reformule :

    Il faut ABSOLUMENT voir la page EN LIGNE.

  6. #6
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    je peux pas

  7. #7
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .has-error .help-block > .alert {
      background-color: #f2dede;
      border-color: #ebccd1;
      color: #d2322d; }

  8. #8
    Invité
    Invité(e)
    Par défaut
    Ça n'empêche pas de créer une "page test", avec JUSTE la partie qui pose problème, et qui permette de reproduire le problème.
    Sinon, tant pis.

    [EDIT] Peut-être une piste... si tu as des éléments flottants :



  9. #9
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    je crois que c'est à cause du flex
    quand je fais inspecter et désactive display:flex; pour la 2e div il passe à la ligne

  10. #10
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    j'ai essayé un par un cela mais j'ai pas le même résultat que sur Firefox
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    le 3e et 5e ne marche pas sur IE.

  11. #11
    Invité
    Invité(e)
    Par défaut
    On ne peut rien te dire si tu ne montres pas tout les CSS nécessaire.

    Dans le code HTML montré dans ton 1er message, il y a plusieurs classes et ids.
    Il nous faut (au minimum) le CSS de toutes ces classes et ids.
    Dernière modification par Invité ; 26/04/2018 à 12h31.

  12. #12
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    c'est bizarre parce que sur codepen il va à la ligne automatiquement

  13. #13
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    En dehors du problème (que je ne vois pas), j'ai vu une erreur :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <option value="FR" selected id="pays" >FR</option>
     <option value="DE" id="pays" >DE</option>
    <option value="AT" id="pays" >AT</option>
    <option value="BE" id="pays" >BE</option>
    • Un id doit être unique !
    • Là, je ne vois pas l'intérêt d'en mettre un sur les options du select...
    Dernière modification par ProgElecT ; 26/04/2018 à 14h16.

  14. #14
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par Mr.Robot12 Voir le message
    c'est bizarre parce que sur codepen il va à la ligne automatiquement
    Je suppose que tu veux dire : "sur I.E. 11" ?

    1- Ca, ça signifie certainement que le problème vient d'ailleurs !
    Internet Explorer est bête et méchant : si on ne lui donne pas un code valide et correctement structuré, il n'en fait qu'à sa tête !

    Crée une page test EN LIGNE, et teste-la avec le validateur : https://validator.w3.org/

    2- flexbox
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
        display: flex;
        flex-wrap: wrap;
    Pour une bonne compatibilité, il faut aussi utiliser les prefixes.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
        display: -webkit-flex; display: flex; 
        flex-wrap: -webkit-wrap; flex-wrap: wrap;

  15. #15
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    oui c'est bizarre je ne le vois pas non plus

    concernant les id je ne peux les changer, je m'occupe juste de corriger le bug que j'ai mentionné. j'ai pas le droit de m'occuper des autres.

  16. #16
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    d'accord je vais essayer merci

  17. #17
    Invité
    Invité(e)
    Par défaut
    Question :

    ton fichier a bien un doctype ?

  18. #18
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    Question :

    ton fichier a bien un doctype ?
    Oui

  19. #19
    Invité
    Invité(e)
    Par défaut
    Je ne peux rien faire de plus... sans une page test en ligne.

  20. #20
    Membre régulier Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Points : 81
    Points
    81
    Par défaut
    ouai je vais essayer de mettre ça

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Votre avis sur "Internet Explorer 7"
    Par winow dans le forum IE
    Réponses: 6
    Dernier message: 12/03/2007, 18h59
  2. lien marche sur internet explorer et non sur autre
    Par xman_genius dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/04/2006, 19h11
  3. [VB6] Ouvrir un fichier text qui ce trouve sur internet!
    Par passicon dans le forum VB 6 et antérieur
    Réponses: 6
    Dernier message: 03/04/2006, 14h41
  4. [CSS] Supprimer espace entre 2 div sous Internet explorer
    Par Torpedox dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 30/12/2005, 17h41
  5. EXTENSIONS XML, XSL, XSLT, sur internet explorer 6 pack 2
    Par superjeanpi dans le forum XSL/XSLT/XPATH
    Réponses: 5
    Dernier message: 08/12/2004, 13h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo