rollover en css qui ne passe que sur Safari?

[skystef]

Bonjour,

Je suis entrain de développer un site web et j'utilise pour un menu du code css pour faire varier les boutons à côté des items du menu. J'ai trois variante: le lien, le lien survolé et le lien sélectionné.

Voici le code css associé qui donne bien un changement de l'image pour ces trois états mais uniquement sur Safari 3 (pas testé sur la v2):

a.mainlevel:link, a.mainlevel:visited {
    display:             block;
    height:              18px !important;
    height:              20px;
    vertical-align:      middle;
    font-size:           12px;
    font-weight:         normal;
    text-align:          left;
    text-decoration:     none;
    text-transform:      capitalize;
    color:               #333333;
    padding-top:         2px;
    /*background-image:    url(../images/menu_c_.png);*/
    background-image:    url(../images/button_a.png);
    background-repeat:   no-repeat;
    background-position: left 3px;
    border-bottom-width: 1px;
    border-bottom-color: #E2E2E2;
    border-bottom-style: dotted;
    padding-left:        15px;
}
a.mainlevel:hover {
    text-decoration: none;
    color:           #653232;
    font-weight:     bold;
    background-image:    url(../images/button_a_hover.png);
    background-repeat:   no-repeat;
    //background-position: left 3px;

}
a.mainlevel#active_menu {
    color:       #336ac8;
    font-weight: bold;
    background-image:    url(../images/button_a_active.png);
    background-repeat:   no-repeat;
    background-position: left 3px;

ça ne marche ni sous IE, ni sous Firefox (même la dernière bêta 4). Sur plusieurs sites, j'ai trouvé une autre méthode non encore testé qui consiste à n'avoir qu'une seule image que l'on décale lors du survol. Mais pourquoi ma méthode ne fonctionne que sous Safari?

 

[grumff]

Tu peux préciser ce qui marche pas exactement ? Est-ce que quoi qu'il arrive ton image ne change pas, est-ce que c'est bien celle par défaut qui reste affichée...
En fait comme tu définie un style pour chaque état je me demande comment le navigateur tranche quand ils sont cumulés par exemple, genre :visited:hover
Mais ça n'a peut-être aucun rapport.
T'as essayé des cas plus simple ? En définissant juste le cas normal et le :hover par exemple ? ou en précisant #active_menu:hover par exemple ?

 

[hemelune]

Une partie du HTML serait le bienvenue aussi

 

[Delusive]

La combinaison d’une classe et d’un ID (a.mainlevel#active_menu) est pratique mais pas très compatible. Le problème vient peut-être de là*?

 

[grumff]

Pourquoi pas très compatible ? l'id spécialise la classe, c'est un fonctionnement normal (ce qui n'exclut pas qu'il puisse être source de problème dans ce cas précis).
Mais c'est une forme d'héritage tout à fait courante...

 

[hemelune]

c'est marrant ça me fait penser à une feuille de style pour joomla, je veux bien t'aider mais je veux bien un bout du html car là .... c'est comme avoir la carosserie mais pas le moteur .

 

[momo-fr]

La méthode avec décalage est très pratique et bien gérée passe partout (IE > 5.5), bien faire gaffe à ta valeur "height" et ajouter un "overflow: hidden;" pour Explorer 6 et 7.