2009-11-02 4 views
2

J'ai quelques boutons qui fonctionnent bien dans les navigateurs autres que IE. Je n'utilise pas JQuery et ce n'est pas IE6 - je ne l'ai pas encore testé dans IE6. C'est dans IE8.Image d'arrière-plan qui disparaît dans IE8

Vous pouvez voir ce qui se passe ici (regardez dans IE vs Firefox):

http://www.brighttext.com/socialtech/index.html

J'utilise la technique de montrer un ou l'autre bouton en réponse à un roulement en modifiant la arrière-plan. J'ai essayé différentes solutions proposées pour IE6 mais rien n'a fonctionné. Quelqu'un peut-il voir ce qui se passe ici? Et pourquoi pouvons-nous voir le bouton Home dans IE, mais pas les autres?

code:

<ul> 
    <li id="homeLink" class="ord"><a href="index.html">Home</a></li> 
    <li id="faqLink" class="current"><a href="faq.html">FAQ</a></li> 
    <li id="speakersLink" class="ord"><a href="speakers.html">Speaker Info</a></li> 
    <li id="sponsorsLink" class="ord"><a href="sponsors.html">Sponsor Info</a></li> 
    </ul> 

pour les deux css premiers boutons (je l'ai fait pour les quatre) à l'intérieur du div, qui est appelé mastheadLeft:

#mastheadLeft li#homeLink a { 
     height: 32px; 
     width: 86px; 
     display: block; 
     text-indent: -1000em; 
     background: url(../images/home_dual.jpg) no-repeat left top ; 
     border: none; 
    } 

    #mastheadLeft li#homeLink.current a { 
     background-position: left top; 
    } 

    #mastheadLeft li#homeLink.current a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#homeLink.ord a { 
     background-position: left bottom; 
    } 

    #mastheadLeft li#homeLink.ord a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink a { 
     height: 34px; 
     width: 75px; 
     display: block; 
     text-indent: -1000em; 
     background: url(../images/faq_dual.jpg) no-repeat left bottom; 
     border: none; 
    } 


    #mastheadLeft li#faqLink.current a { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink.current a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink.ord a { 
     background-position: left bottom; 
    } 

    #mastheadLeft li#faqLink.ord a:hover { 
     background-position: left top; 
    } 

Répondre

2

J'ai essayé beaucoup de trucs y compris recréer votre projet (copier et coller votre source et css à partir du site donné). de mon côté en utilisant mes propres images, cela fonctionne parfaitement dans IE 8 et Firefox 3.

cependant j'ai essayé

http://www.brighttext.com/socialtech/images/faq_dual.jpg

dans les deux navigateurs. et il ouvre l'image dans Firefox mais ouvre une image indisponible dans IE 8. alors peut-être que vous devriez jeter un oeil à où vos images sont stockées. Comme je l'ai dit, avec mes images de test, cela semble fonctionner parfaitement.

+0

Salut Kamal, d'abord, merci million pour prendre le temps de faire ce que vous avez fait! Deuxièmement - je viens de confirmer votre test. Aucune des trois images qui n'apparaissent pas s'ouvrira dans IE! Eh bien, cela simplifie au moins le problème, car nous savons que même si tous les CSS sont supprimés, IE ne voit pas l'image. Pourquoi cela pourrait être, je n'en ai aucune idée. Nous savons que les images sont là parce que firefox les voit. Je vais essayer d'autres tests ... peut-être déplacer les fichiers image dans le même dossier que les pages html ... bien que cela ne devrait pas être nécessaire. – David

0

Y a-t-il une raison pour laquelle certaines images sont des images PNG et d'autres des images JPG? Je suis curieux de savoir si le problème du fichier manquant a quelque chose à voir avec le type de fichier. Probablement pas, mais je suis intéressé.

Aussi, quand je fais des images d'arrière-plan dans les balises d'ancrage comme celui-ci, l'image a la moitié sans vol stationnaire assis au-dessus de la moitié de vol stationnaire et faire mon CSS comme ceci:

#mastheadLeft li a { 
     height: 34px; 
     display: block; 
     text-indent: -1000em; 
     border: none; 
    } 

    #mastheadLeft li a:hover, #mastheadLeft li.current a { 
     background-position:0 -34px; 
    } 

    #homeLink a { 
     width: 86px; 
     background: url(/images/home_dual.jpg) no-repeat; 
    } 

    #faqLink a { 
     width: 75px; 
     background: url(/images/faq_dual.jpg) no-repeat; 
    } 

Cela rend le CSS beaucoup plus propre et définit exactement les mêmes règles pour tous les éléments sauf ceux qui sont uniques, ce qui, dans ce cas, est juste l'image de fond utilisée et la largeur. De cette façon, si quelque chose ne va pas, ce sera faux pour toutes les images. J'utilise également des pixels exacts au lieu de dépendre des valeurs génériques "top", "left", etc. dans CSS. Un contrôle plus précis.

Peut-être pas une réponse finale, mais au moins, il va nettoyer votre CSS afin qu'il soit plus facile de trouver le problème.

1

Eh bien, je pense qu'il ya plusieurs raisons qui causent ce problème. J'ai eu le même problème et je ne pouvais pas comprendre comment résoudre le problème puis je réalise que je n'ai pas mis un espace entre ")" et "gauche" arrière-plan: url (../ images/sample.jpg) gauche haut non-répétition

Après avoir ajouté un espace entre ces deux résoudre mon problème dans ie6,7 et 8.

Questions connexes