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 :

Différence IE / Firefox avec Padding et Margin à 0


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Décembre 2005
    Messages : 75
    Par défaut Différence IE / Firefox avec Padding et Margin à 0
    Bonjour,

    Pourriez-vous me dire qu'est-ce qui fait qu'une page aussi simple que url supprimée présente de telles différences de présentation (notamment au niveau des espacements entre les blocks) entre IE 7 et Firefox 2 sous Windows?

    Et pourtant, vous verrez dans url supprimée que pratiquement tous les padding et margin sont à 0...

    Merci pour vos pistes!

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Décembre 2005
    Messages : 75
    Par défaut
    Même problème / même cause ici?

    url supprimée

    Remarquez l'énorme différence de hauteur du calendrier entre IE et Firefox...

  3. #3
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Bug IE6< :

    Les marges horizontales sont doublées sur le premier élément d'une série d'éléments flottants.

    Exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .marge{
       float:left;
       margin-left:50px;
       width:300px;
       height:100px;
       background:#f00;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="marge">Texte</div>
    <div class="marge">Texte2</div>
    <div class="marge">Texte3</div>
    La première marge à gauche vaudra alors 100px et les autres 50px comme correct.

    Solution : Basculer le premier élément (voire tous, ça ne changera rien) à inline : display:inline;

    Un exemple vaut certainement mieux qu'un long discours : Hop.

  4. #4
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par gb-ch
    http://www.memento-calendar.ch/
    Remarquez l'énorme différence de hauteur du calendrier entre IE et Firefox...
    Peut-être en ajoutant un petit margin de 0 ici:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #cal p.calMonthsNav {
      padding: 0;margin:0;
      font-size: 0.75em;
    }
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par gb-ch
    Pourriez-vous me dire qu'est-ce qui fait qu'une page aussi simple que http://www.informatique-geneve.ch/cat.php?cat=4 présente de telles différences de présentation (notamment au niveau des espacements entre les blocks) entre IE 7 et Firefox 2 sous Windows?
    Un tout petit rien qui, je te rassure ne m'a pas sauté non plus aux yeux Dans ton css tu as écris tous tes


    sans les :
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Expert confirmé
    Avatar de Jipété
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    11 142
    Détails du profil
    Informations personnelles :
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations forums :
    Inscription : Juillet 2006
    Messages : 11 142
    Par défaut Related question
    Bonjour.

    À propos de ça : il me semble avoir lu un peu partout que le css exigeait des unités (px, %, etc.).
    Et je vois également un peu partout cette déclaration sans unité.

    Quelqu'un(e) pourrait m'expliquer ce paradoxe, siouplait ?
    Merci,
    --
    jp

  7. #7
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Citation Envoyé par Jipété
    Bonjour.

    À propos de ça : il me semble avoir lu un peu partout que le css exigeait des unités (px, %, etc.).
    Et je vois également un peu partout cette déclaration sans unité.

    Quelqu'un(e) pourrait m'expliquer ce paradoxe, siouplait ?
    Merci,
    --
    jp
    Zéro, que ce soit zéro px, em, cm, patate, ou chou, ça sera toujours zéro et donc toujours la même valeur.

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Décembre 2005
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Décembre 2005
    Messages : 75
    Par défaut
    Citation Envoyé par Candygirl
    Un tout petit rien qui, je te rassure ne m'a pas sauté non plus aux yeux Dans ton css tu as écris tous tes


    sans les :
    Merci bcp! Le copier-coller avait frappé! ;o)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Différence Chrome/Firefox margin-right + scroll ?
    Par xephres dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 05/07/2011, 12h10
  2. Rechercher avec les RegExp > (padding- ou margin-)
    Par Zineb1987_UNI dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 25/10/2009, 22h33
  3. [XHTML]Problème avec <img> et margin-bottom
    Par Locelot dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 12/09/2005, 22h02

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