Bonjour à tous,

J'ai adapté un menu sous forme de liste (ul li) avec des coins arrondis.
Seulement, l'ensemble des menus sont collés les uns aux autres et je souhaiterai mettre un espace entre chaque item...
J'ai donc créé 2 class différentes suivant le type (une classe spacer et une classe menu).
Le résultat est OK sur IE7 mais pas bon sous FF, quelqu'un aurait une idée d'ou cela peut-il provenir ?

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
ul.crn{
    float: left;
    list-style: none ;
    width:215px;
}
 
ul.crn li.menu{
    background: #ccc url(../images/crn_05.gif) no-repeat top right;
    float: left;
    height: 30px;
    width:100%;
    margin: 0 20px;
    text-align: center ;
 
}
 
ul.crn li.spacer{
    padding-top:10px;
    height: 10px;
    width:100%;
    color:#FFFFFF;
    background-color:#FFFFFF;
 
}
 
ul.crn li.spacer:hover{
    height: 10px;
    width:100%;
    color:#FFFFFF;
    background-color:#FFFFFF;
 
}
 
ul.crn li.menu a:link, ul.crn li.menu a:visited{
    background: url(../images/crn_03.gif) no-repeat top left;
    color: #333;
    float: left;
    font-weight: bold;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none
}
ul.crn li.menu:hover{
    background: #333 url(../images/crn_10.gif) no-repeat top right
}
ul.crn li.menu a:hover, ul.crn li.menu a:focus{
    background: url(../images/crn_09.gif) no-repeat top left;
    color: #EBD938;
    text-decoration: none
}
ul.crn li.menu img{
    float: left;margin-top:2px
}
HTML
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
<ul class="crn">
    <li class="menu"><a href="#" >Les Statuts</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Devenir Chauffeur</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Devenir Exploitant</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Le C.C.P.C.T.</a></li>
</ul>
Merci pour votre aide