Aller au contenu

padding défectueux avec IE


pandrekano

Sujets conseillés

Comment se fait-il que Mozilla, firefox, Camino, Safari montre tout parfait et que IE coupe mon padding du haut ? voir à http://ppzx.net/

De plus j'aimerais obtenir le même effet d'ombrage que «http://ppzx.net/divers.php» et je n'y arrive pas...

Avez-vous une idée pour me dépatouiller.

/* intro */

.intro img
         {
          position               : relative;  
          background-color       : #333300;  
          margin                 : -6px;
          background-color       : black;
          border                 : 10px solid #cacaca;
          padding                : 1px;
          }

.intro a:hover img
        {
         top                    : 20px;
         left                   : 6px;
         border                 : 1px solid rgb(255, 200, 50);
         background-color       : black;  
         }

Lien vers le commentaire
Partager sur d’autres sites

Bonjour pandrekano :)

As-tu réussi à corriger ce qui n'allait pas ? Je vois la même chose dans IE et FF que ce soit pour la page index ou pour la page divers. Dans la page divers, j'ai une ombre sur les 2 vignettes dans IE.

Lien vers le commentaire
Partager sur d’autres sites

Je suis désolée mais je ne vois pas le problème :blush:

Les liens se comportent de la même manière sur IE et FF. Pour le a:link, l'image est entouré d'une bordure grise et pour le a:hover, elle est entourée d'une bordure plus fine orange.

Quand on passe sur l'image, cette dernière est légèrement décalée vers le bas.

En revanche, ce n'est pas du tout le même effet que celui que tu as sur les images de la galerie.

Autre chose, une barre de défilement horizontale apparait sur la page d'entrée (uniquement sur IE).

Lien vers le commentaire
Partager sur d’autres sites

C'est moi qui suis désolé d'être peut-être le malade imaginaire... Ce qui serait une solution d'ailleurs.

La barre de défilement c'est réglé.

Le problème avec mon IE (finalement peut-être un problème local!!!)

1 - parfait

«Pour le a:link, l'image est entouré d'une bordure grise et pour le a:hover, elle est entourée d'une bordure plus fine orange.

Quand on passe sur l'image, cette dernière est légèrement décalée vers le bas.»

2 - quand tu reviens du a:hover au a:link le haut de la bordure grise est «coupée» (chez moi avec IE)

Tu as tout à fait raison pour la différence d'effet avec les images de la galerie. Il me suffirait de mettre <div class="imagegalerie"> pour que ça marche bien.

Sauf que, avec ce bout de code, l'image est justifiée complètement à gauche. Or, j'aimerais l'avoir beaucoup plus sur le centre, comme elle est maintenant avec l'accueil. C'est là, que je n'arrive pas à refaire cet effet avec les données de l'accueil.

Comme tu le constates, ma compétence me donne même de la difficulté à cerner mon problème (qui ne m'empêche tout de même pas de fonctionner). Alors, je t'en remercie beaucoup.

Déjà, tu m'as donné pas mal d'informations qui me permettent d'éviter une dépression ! ah ah ah!

Très amicalement, pierreandrekano :wacko:

Lien vers le commentaire
Partager sur d’autres sites

2 - quand tu reviens du a:hover au a:link le haut de la bordure grise est «coupée» (chez moi avec IE)

<{POST_SNAPBACK}>

Surement un problème local car chez moi, tout passe bien et la bordure grise n'est pas coupée. Tu peux peut-être mettre une capture d'écran pour qu'on soit sur qu'on parle de la même chose ? :P Ou alors, quelqu'un pour confirmer ?

Pour le reste, je t'avouerai que je sèche un peu ... j'ai copié collé ton code html et css en local pour travailler dessus tout à l'heure et chez moi, ça s'affiche pas du tout comme sur ta page .. je capte pas ^^ Quand je charge l'index en local, l'image ne se met pas au centre mais sur le coté gauche, en dessous du texte.

J'essaie de regarder ça de plus près ;)

Lien vers le commentaire
Partager sur d’autres sites

Bonjour Azon,

D'abord j'ai mis une image du «problème» ici : http://ppzx.net/accueil.jpg

Si l'image se charge à gauche en local, c'est peut-être pcq tu n'est pas sur php. Tu trouveras également ma feuille de style à : http://ppzx.net/style-1.css pour mieux comprendre le problème.

En tout cas, je souhaite que tu sois vraiment curieux et que tu le fasses aussi par intérêt personnel, parce que je monopolise beaucoup de ton temps. merci encore !

Amitiés, pandrekano

PS Si tu veux bien me dire quand tu as vu la feuille CSS, pour que je puisse l'enlever ensuite.

Lien vers le commentaire
Partager sur d’autres sites

D'abord j'ai mis une image du «problème» ici : http://ppzx.net/accueil.jpg

Ok, et bien je ne vois pas la même chose sur IE :) le haut de la bordure n'est pas coupé comme sur ton image. Un 3ème avis pourrait nous aider à savoir d'où vient le problème peut-être ;)

Si l'image se charge à gauche en local, c'est peut-être pcq tu n'est pas sur php.

Je ne sais pour quelle raison, la feuille de style ne se chargeait pas avec import. J'ai utilisé la balise link, ça marchait nikel ;)

En tout cas, je souhaite que tu sois vraiment curieux et que tu le fasses aussi par intérêt personnel, parce que je monopolise beaucoup de ton temps. merci encore !

Curieuse ;) et oui, je le suis :P

Ok pour la CSS, je l'avais déjà récupérée ;)

Lien vers le commentaire
Partager sur d’autres sites

ah ah ah ! tu me dis être curieu(se) eh bien, tant mieux.

J'imagine, et je ne sais pas pourquoi, que le problème de bordure est local, puisque tu ne le vois pas.

Tant qu'à abuser de ton temps, aurais-tu une idée avec la feuille CSS, pour que je puisse coder l'image de l'accueil comme celle des galeries ET avec la dimension et la place qu'elle occupe à l'accueil.

J'ai essayé des millions de changements... rien à faire !

Amitiés et bonne nuit, si tu vis en France, avec le décalage horaire du Québec.

Amitiés, pandrekano

Lien vers le commentaire
Partager sur d’autres sites

Bon, encore merci, Azon, pour ton attention à mes problèmes. :):blush:

Après encore quelques recherches, j'ai trouvé une solution. Pour ceux que cela intéressent la voici sur le site http://ppzx.net et sur la feuille CSS :

/* intro */

.intro

      {

        margin              : 100px;

        background-color    : #CCCC99;

    float  : left;

}

.intro img

{

        display                : block;

        position            : relative;

        background-color    : #333300;

        border              : 1px solid #cacaca;

        margin              : -8px 8px 8px -8px;

        padding                : 1px;

    }

.intro a:hover img

  {

        top                    : 8px;

        left                : 8px;

        border              : 1px solid rgb(255, 200, 50); 

        }

Amitiés, pierreandrekano

Modifié par pandrekano
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...