Geckozone

Voilà j'ai un petit problème d'affichage d'image sous IE. J'aimerais faire comme sur le portail de Geckozone, avec un petit livre à droite des liens "infobulles" et un globe à droite des liens externes.

J'ai donc commencé ici : http://oli22.free.fr/presentation.html#3
J'ai mis une infobulle au mot "W3C" et donc une petite encyclopédie à sa droite. Sous FF ça passe bien mais sous IE l'image est coupée à un bord et se termine au bord opposé. Enfin essayez-vous même ça sera plus clair

Voilà mon code HTML :

Code : Tout sélectionner

<p>
<span class="lettrine">C</span>
e site est optimisé pour les navigateurs internet respectueux des standards énoncés par le 
<a href="#W3C" id="W3C" class="info">W3C
<span>World Wide Web Consortium : ensemble de sociétés qui fixe les normes à respecter en créant un site web afin de rendre Internet accessible à tous.</span>
</a>
, dont ne fait pas partie Internet Explorer que 90% d'entre vous utilisent malheureusement, souvent par ignorance d'une alternative.
</p>

et mon CSS :

Code : Tout sélectionner

/*---Info bulles---*/

#article a.info {
                position: relative;
                z-index: 24;
                padding-right: 19px;
                color: #000000;
                text-decoration: none;
                background-image: url(images/design/dico.png);
                background-position: right;
	             background-repeat: no-repeat;
                }

    #article a.info:visited {
                            z-index: 24;
                            color: #000000;
                            padding-right: 19px;
                            text-decoration: none;
                            background-image: url(images/design/dico.png);
                            background-position: right;
	                         background-repeat: no-repeat;
                            }

    #article a.info:hover {
                          z-index: 25;
                          color: #000000;
                          padding-right: 19px;
                          background-color: transparent;
                          text-decoration: none;
                          cursor: help;
                          }

        #article a.info span {
                             display: none;
                             text-decoration: none;
                             }
    
        #article a.info:hover span {
                                   display:block;
                                   position:absolute;
                                   padding:4px;
                                   top:2.2em;
                                   left:-13em;
                                   width:15em;
                                   border:1px solid #404040;
                                   background-color:#FFFEE0;
                                   color:#000000;
                                   text-align:left;
                                   font-size:85%;
                                   font-family:"Arial", "Microsoft Sans serif", "Sans Serif";
                                   }

Pouvez-vous m'aider ?

Si vous avez d'autres remarques sur mon code, je ne demande qu'à l'améliorer

(je débute)

PS: J'en profite pour demander si ça ne dérange pas que je reprenne les images de ce site ?

Pour ma part, je mettrais l'image en "a span:before {content:url(image.png);}", je mettrais ça dans un abbr et j'inclurais la feuille de style avec un "@import(feuille.css) screen,projection,tv", comme ça ce serait bon pour les 50 prochaines années

Mais comme c'est vraiment pas constructif, je vais essayer de trouver,

A mon avis, c'est le même problème que tu peux trouver sur complexspiral : IE ne supporte pas le background-attachment:fixed sur autre chose que le body, donc il doit essayer de positionner ça d'une manière un peu spéciale...
Je pense que si tu mettais ce background sur body, ça s'emboiterait parfaitement entre le fond d'écran et le fond du <a>.. Mais je peux me tromper...

J'ai pas tout compris mais j'avais pensé faire un span:after pour mettre l'image, mais en regardant le code de la page de geckozone j'ai vu que c'était différent et j'ai fais pareil

Ça marche bien sur la page de geckozone y a pas de raison que je puisse pas faire la même chose

Raaah marre de ces petites images de m..!
Y a pas un webmestre de geckozone qui pourrait m'expliquer comment il a fait svp ??

C'est OlaB qui a fait le design

Merci d'avoir cafté Hoaxyde

Olaaaaaaaaab

elo
background-position: right top;

c'est peut être mieux pour l'image non ?

ça ne marche pas en tout cas

Bon j'ai finalement contourné le problème en copiant le css d'Olab

Pour ceux que ça intéresse, j'ai finalement mis ça dans mon css :

Code : Tout sélectionner

#article a[href^="http://"] {
	                        background-image: url(images/design/lien.gif);
                         	padding-right: 17px;
	                        background-position: right;
	                        background-repeat: no-repeat;
	                        }

#article a[href^="#info"] {
                          background-image: url(images/design/dico.png);
                          padding-right: 17px;
	                      background-position: right;
	                      background-repeat: no-repeat;
	                      }

et changé le href et viré l'id de mes liens "infobulles" dans mon xhtml :

Code : Tout sélectionner

<a href="#info" class="info">W3C<span>World Wide Web Consortium : ensemble de 
     sociétés qui fixe les normes à respecter en créant un site web afin de rendre Internet accessible à tous.</span></a>

En gros j'ai défini une image de fond pour les liens en http et les liens qui ont le href "#info", ça m'évite de faire une classe, et donc ce n'est pas reconnu par IE... du coup plus de problème avec l'affichage sous IE, les images s'afficheront seulement sous les navigateurs qui respectent les standards

Par contre je me demande juste, est-ce que c'est valide de pointer un lien vers un ID qui n'existe pas ? Le lien me sert juste à identifier le type de lien et à faire le truc des infobulles en css.

merci à tous

Je crois que tu peux carrément te passer du href, il ne me semble pas qu'il soit obligatoire... voir le faire avec un span plutôt qu'un a

Geckozone

[pb contourné] Affichage des background-image avec IE

[pb contourné] Affichage des background-image avec IE