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

**Fafhrd** · 09/11/2009, 18h21

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 ?

**Sniper37** · 10/11/2009, 17h27

tu n'a pas redéfinis le style lorsque tu passe la souris (hover)
tu peux regarder le style appliqué avec firebug.

**Fafhrd** · 10/11/2009, 20h11

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.

**Fafhrd** · 10/11/2009, 20h20

Ca ne marche pas !

**Sniper37** · 12/11/2009, 09h19

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.

**Fafhrd** · 12/11/2009, 10h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Fafhrd** · 16/11/2009, 10h30

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

.

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

JSF Java

Discussions similaires

Partager

Partager