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 :

scintillement sous IE6


Sujet :

CSS

  1. #1
    Membre éclairé
    Profil pro
    Étudiant
    Inscrit en
    Janvier 2006
    Messages
    501
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 501
    Par défaut scintillement sous IE6
    Bonjour,

    J'observe le phénomène de scintillement sous mon site sous IE6.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    ul#buttons li#small a
    {
    	width: 22px;
    	background: url("../images/button_a_small.png") left top no-repeat ;
    }
     
    ul#buttons li#small a:hover
    {
    	background: url("../images/button_a_small.png") 0px -23px no-repeat scroll;
    }
    En fait c'est lors du survol, l'image est recherchée de nouveau par IE donc pendant ce temps il n'y a plus d'image qui s'affiche ce qui fait l'effet de scintillement.

    J'ai cherché et trouvé plusieurs solutions déjà mais je ne suis pas parvenu à combler le problème, à moins que je m'y suis mal pris.
    Enfin si quelqu'un connait ce problème et qu'il sait comment réellement le résoudre, merci de m'aider.

    Bonne journée
    ++

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

    Ton problème doit être du au fait que lorsque ta souris survol l'image, l'autre image doit d'abord se charger avant de s'afficher.

    La solution est donc de précharger tes images à l'ouverture de ta page.

    Une petite recherche sur google plus tard :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <HEAD> 
    <SCRIPT LANGUAGE="JavaScript">
    i1 = new Image;
    i1.src = "images/monimages1.gif";
    i2 = new Image;
    i2.src = "images/monimages2.gif";
    </SCRIPT>
    </HEAD>
    Je n'ai pas testé ce code. Dit-moi si cela ne fonctionne pas.
    Dernière modification par Deepin ; 31/05/2011 à 08h55.

  3. #3
    Membre éclairé
    Profil pro
    Étudiant
    Inscrit en
    Janvier 2006
    Messages
    501
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 501
    Par défaut
    Non le problème ne vient pas du chargement de l'image parce que l'image est la même.
    En effet sur la même image, j'ai mis l'image de départ et celle du survolement, je la déplace juste pour le survol.

    Voici une explication plus détaillée du phénomène : http://www.ultra-fluide.com/ressourc...#scintillement

    J'ai essayé de faire ce qui est écrit mais je ne peux modifier la configuration du serveur sur lequel je suis...

    Si quelqu'un a une autre idée

    Merci quand même
    ++

  4. #4
    Invité
    Invité(e)
    Par défaut
    Excuse-moi, je comprends ton problème maintenant.

    As-tu essayé de déplacé l'image en javascript plutôt qu'avec les styles css ? Ca fait peut être un peu bricolage mais il y a des chances que ça fonctionne.

    Tu mets un onMouseOver sur ton image qui pointe vers une fonction qui change juste la position de l'image.

    Pourrait-on avoir un petit bout de ton code ?

  5. #5
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Salut,

    Peut-être est-ce le cache de ton navigateur qui est désactivé. Tu peux vérifier cela...

    Sinon, ce que tu peux faire, c'est créer une seule image qui contient les deux états (normal et hover), puis tu la décales grâce à background-position pour faire apparaître la partie que tu veux...
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  6. #6
    Membre éclairé
    Profil pro
    Étudiant
    Inscrit en
    Janvier 2006
    Messages
    501
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 501
    Par défaut
    Citation Envoyé par MasterOfChakhaL Voir le message
    Peut-être est-ce le cache de ton navigateur qui est désactivé. Tu peux vérifier cela...

    Sinon, ce que tu peux faire, c'est créer une seule image qui contient les deux états (normal et hover), puis tu la décales grâce à background-position pour faire apparaître la partie que tu veux...
    Oui en fait, ce bug c'est que avec IE6 quand le cache est désactivé, mais chez beaucoup de personnes, c'est justement désactivé par défaut et la plupart des gens ne connaissent pas.

    Pour l'image qui contient les deux états, c'est justement ce que j'ai fait, mais le problème c'est que IE6 va quand même chercher l'image au moment du survol même si c'est une image qu'il avait déja chargé. C'est la le bug ! Lis le lien que j'ai mis dans mon précédent post, c'est plus détaillé !

    Bon j'ai trouvé une parade. N'ayant pas eu envie de m'embarquer dans du javascript juste pour IE6.

    J'ai fait une feuille de style spéciale pour IE6 pour ces cas la que je charge avec les commentaires conditionnels.
    Et ce que je fais en fait, c'est mettre en fond du <li></li> l'image du survol, et le <a></a> l'image normal.
    Ainsi, au survol du <a>, j'enleve le background du <a>, du coup, apparait l'image du survol qui était déja présente dans le fond du <li>...

    Je ne sais pas si c'est claire ? lol

    Enfin, comme ca je ne fais pas trop de changements sur le reste mais juste une feuille de style pour IE6 avec ces petites modifs.

    Merci de votre aide
    ++

  7. #7
    Invité
    Invité(e)
    Par défaut
    Plutôt malin comme technique. Tu viens d'atteindre le grade de bricoleur italiasky !

    N'oublie pas le tag résolu et bonne journée

  8. #8
    Membre éclairé
    Profil pro
    Étudiant
    Inscrit en
    Janvier 2006
    Messages
    501
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 501
    Par défaut
    Citation Envoyé par babastutz Voir le message
    Plutôt malin comme technique. Tu viens d'atteindre le grade de bricoleur italiasky !
    lol oui mais des fois on n'a pas le choix, faut bricoler ! surtout pour IE

    Merci à vous

    ++

  9. #9
    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
    Sinon au lieu de toucher à la configuration du serveur auquel tu n'as pas accès, tu peux mettre le code que ton lien propose dans un fichier .htaccess.

  10. #10
    Membre éclairé
    Profil pro
    Étudiant
    Inscrit en
    Janvier 2006
    Messages
    501
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 501
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    Sinon au lieu de toucher à la configuration du serveur auquel tu n'as pas accès, tu peux mettre le code que ton lien propose dans un fichier .htaccess.
    Déja essayé dans le fichier .htaccess, ca me crée une erreur...

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

Discussions similaires

  1. Probleme de menu deroulant Sous IE6
    Par Althor dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/09/2006, 14h31
  2. [W3C] Parlons bordure et positionnement sous IE6.0 et FF
    Par bébé dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/10/2005, 19h47
  3. Réponses: 3
    Dernier message: 12/09/2005, 20h27
  4. [Windows 2000 server] Téléchargement FTP impossible sous IE6
    Par o151181 dans le forum Windows Serveur
    Réponses: 6
    Dernier message: 24/11/2004, 18h00
  5. URGENT : Request.Form ne marche pas sous IE6
    Par Laurent Outan dans le forum ASP
    Réponses: 9
    Dernier message: 16/07/2004, 15h25

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