Partage
  • Partager sur Facebook
  • Partager sur Twitter

IE rajoute des marges sur mon image!

a cherché tout la nuit, help!

Sujet résolu
    20 février 2006 à 10:43:58

    Hello!

    Je reviens une fois de plus a cause d'un probleme d'affichage avec IE!

    Un jour je vous jure, je creerai une liste des trucs que fait IE a la difference de FF et les moyens de les contourner ;)

    Mais pour l'instant voici mon probleme:
    j'ai une image que FF centre parfaitement, mais IE la decale vers le bas car il a rajouté une marge en haut et en bas de l'image o_O
    petites images:
    Image utilisateur
    pour IE

    Alors que sur FF:
    Image utilisateur

    et le code qui concerne tout ça:


    <div id="title">
        <div id="title_barre">
            <img src="images/title/title_intro.gif" alt="=>Intro<=" width="70" height="9" border="0" />
        </div>
    </div>

    et pour le CSS:
    #title
    {

    width: 575px;
    height: 20px;
    background: url("../images/title/title_barre_back.gif") no-repeat;
    }

    #title_barre
    {

    width: 70px;
    height: 9px;
    margin-top:0px;
    margin-left:12px;
    border: 1px dashed;
    }


    NOTE: j'ai aussi essayé de remplacer les margins par un positionnement relatif mais ça n'a rien changé.
    L'image fait bien 70*9px, les pointillés sont justes pour surligner le probleme.

    Pour le code en entier, le site est: www.grafix-session.info

    Merci a tous ceux qui m'aideront, vous comprendrez si vous avez regardé le site que c'est important comme detail quand meme :honte:

    @++
    • Partager sur Facebook
    • Partager sur Twitter
      20 février 2006 à 11:17:08

      ajoute display:block;
      line-height:1px
      a #title_barre
      • Partager sur Facebook
      • Partager sur Twitter
        20 février 2006 à 11:45:35

        mmm, pas bete, j'y avais pas pensé.
        Malheureusement j'ai essayé et ça ne marche pas :(

        D'autres idées?
        • Partager sur Facebook
        • Partager sur Twitter
          20 février 2006 à 12:46:26

          si ca marche tu as du te planter dans les valeurs
          #title_barre
          {

          width: 70px;
          height: 9px;
          margin-top:0px;
          margin-left:12px;
          border: 1px dashed;
          line-height:1px;
          display:block;
          }
          • Partager sur Facebook
          • Partager sur Twitter
            20 février 2006 à 14:03:27

            Essaie de rajouter ça :
            img
            {
            margin : 0px;
            }
            • Partager sur Facebook
            • Partager sur Twitter
              20 février 2006 à 15:07:16

              avec mon code tu peux meme afficher une image de 1px de height sans probleme
              • Partager sur Facebook
              • Partager sur Twitter
                20 février 2006 à 15:12:10

                @jp949: il ne me semble pas m'etre trompé, j'avais meme fait un copier-coller de ta solution (en rajoutant le ; oublié)

                @nabboloc: désolé j'avais oublié que le debut de mon css commençais par:
                * {margin: 0; padding: 0; border: 0;}

                (qui remet tous les margins, padding et border a 0px)

                j'ai finalement viré tout la partie #title_barre du HTML: au lieu de faire une image de fond avec une petite image qui se recharge en fonction de la page c'est maintenant toute la barre en entier qui change.
                Certes ça fait 255octets de plus a telecharger a chaque fois, mais bon, c'est VRAIMENT négligeable et au moins ça resoud le probleme facilement...


                Des fois a trop vouloir bien faire, on se complique la vie pour des trucs inutiles jvous jure....

                De toute façon les codeurs finissent tous fous c'est bien connu.

                Merci pour les reponses.
                @++
                • Partager sur Facebook
                • Partager sur Twitter
                  20 février 2006 à 15:18:04

                  pourtant je te jure que testé sous 4 navigateurs dont IE biensur mon code affiche l'image de la hauteur que tu veux si tu veux je mets en ligne un exemple pour te le prouver. et pourquoi perdre 250 octs a chaque fois?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    20 février 2006 à 18:32:14

                    je perd pas 250octet, je rajoute 250octets a chaque changement de page.

                    En fait il s'agit d'un bandeau, avec dessus marqué le nom de la page.
                    Design oblige, je ne pouvait pas "ecrire" le texte en html, il falait que je fasse une petite image du texte.

                    Et comme je l'avais fait avant, la petite image du nom etait detachée du bandeau
                    donc a chaque changement de page, le navigateur n'avait qu'a telecharger la petit image qui differait, pas le bandeau qui etait deja téléchargé.

                    mais comme c'etait se compliquer la vie pour meme pas 1Ko, j'ai laissé tombé et maintenant la petite image de texte fait parti du bandeau, qui est rechargé en fonction de la page. (ex: bandeau_intro, bandeau_contact...)

                    Voila je sait pas si c'est tres clair...

                    @jp949: tu as surement raison j'ai du faire une faute de frappe, désolé.

                    M3PHISTOS, Zero-Boulet :p
                    • Partager sur Facebook
                    • Partager sur Twitter
                      21 février 2006 à 5:32:11

                      si tu t'en sors autrement c'est tres bien, pas la peine de se compliquer l'existence.
                      Sinon ce n'est pas toi qui as fait une faute de frappe mais moi qui n'ai pas mentionné que la class doit s'appliquer a l'img et non pas au conteneur.

                      <div id="title">
                      <img id="title_barre" src="... " alt="..." />
                      </div>
                      • Partager sur Facebook
                      • Partager sur Twitter

                      IE rajoute des marges sur mon image!

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur
                      • Markdown