[RichFaces]Décalage CSS sous IE7 lors du survol de composant

Version imprimable

09/11/2009, 18h21
Fafhrd

[RichFaces]Décalage CSS sous IE7 lors du survol de composant

Bonjour,

J'ai un petit soucis CSS qui n'est pas grave en soit mais qui rend ma page beaucoup moins jolie sous IE7 (et IE8).

Mon problème est le suivant : j'ai une page de cadre avec un bandeau (rich:toolBar), un menu (rich:panelMenu) et une partie centrale.
La partie centrale a une marge à gauche de 5px pour ne pas coller le menu :
#central{
width: 765px;
float: left;
position:relative;
margin-left: 5px;
}

Sous FF pas de soucis. Sous IE7, la page se charge correctement... mais lorsque je passe ma souris sur un onglet de mon rich:panelMenu ou de mon rich:toolBar, la marge de 5px disparait ??!!

Quelqu'un aurait-il une idée pour éviter cet effet de bord sous IE7 ?
10/11/2009, 17h27
Sniper37

tu n'a pas redéfinis le style lorsque tu passe la souris (hover)
tu peux regarder le style appliqué avec firebug.
10/11/2009, 20h11
Fafhrd

Oui mais normalement on ne redéfinit pas le hover sur les composants qui ne sont pas sensés agir ?

Bon je vais tester ça... si ça marche ça sera évidemment mieux que rien :p.
10/11/2009, 20h20
Fafhrd

Ca ne marche pas !
12/11/2009, 09h19
Sniper37

je voulais dire est ce que tu l'a pas redéfinis toi même, regarde le style appliqué avec firebug ou IE developer tool bar.

Ha non, je ne l'ai pas redéfini.

Le hover sur les composants richfaces est généré par Richfaces... mais pourquoi interragit-il avec les marges des autres composants ?

Est-ce que c'est déjà arrivé à quelqu'un d'autre ?
Si vous voulez, je vous montre le positionnement des composants de ma page et la css correspondante :

jsf

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<body>
        <div id="conteneur">
            <div id="bandeau">
                <h:form id="bandeauMenu">
                    <rich:toolBar>
                        ...
                    </rich:toolBar>
                </h:form>
            </div>
 
            <div id="mainPanel">
                <div id="menu">
                    <rich:panelMenu>
                        ...
                    </rich:panelMenu>
                </div>
                <div id="central">
                    ...
                </div>
            </div>
        </div>
    </body>

css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
#conteneur {
    width: 952px;
    margin: 0 auto;
}
 
#bandeau {
    min-height: 118px;
}
 
#bandeauMenu {
    width:952px;
}
 
#bandeauMenu a{
    text-decoration: none;
    border-width: inherit;
}
 
#mainPanel {
    margin-top: 3px;
    position: relative;
}
 
#menu {
    list-style: none;
    margin-right: 2px;
    width:180px;
    color:#99B53C;
    font-size: 18px;
    float: left;
}
 
#central{
    width: 765px;
    float: left;
    position:relative;
    margin-left: 5px;
}

16/11/2009, 10h30
Fafhrd

Personne n'a d'idée ? Je ne sais pas ce que je peux donner de plus comme détails :calim2:.