problème de positionnement avec opera ou chrome

[neufrdb]

Bonjour a tous ,


j'ai un souci avec un menu et je ne sais comment le résoudre,

j'ai crée un menu qui se compose du titre, d'un élement qui tourne , et d'un image en font d'image qui bouge aussi.

voici la page en question :

http://keokaz.fr/transmission-mecanique/

j'ai 3 titres de menu, sous ie7/8 et firefox les menus et l'animation est correcte.

par contre sous chrome ou opéra j'ai un os sur le premier titre et l'élément de fond d'image qui bouge est complétement décalé

je donne le 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
40
41
42
43
44
45
46
47
48
 
 
.espace /*espace entre les textes */
{
    display: block;
}
#sidebar ul
{
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}
 
#sidebar ul li.cat
{
 
    display: block;
    margin:0;
    padding: 0;
    background: url('image/fleche.png') no-repeat;
    /* overflow:hidden;/*supprimer le petite espace sous l'image*/
}
#sidebar ul li a img.tourne  /*imag de la route*/
{
    float: left;
    padding:0;
    margin:0;
}
 
#sidebar ul li a.text_categorie/*texte de la categorie */
{
    text-decoration: none;
    padding:0;
    margin: 0;
    display: block;
    position: relative;
    top:-55px;
    height:50px;
    text-transform: uppercase;
    font-size: 14px;
    text-align: right;
    width:270px;
    background: url('image/rouleau.png') no-repeat;
    color:#012508;
    font-weight: bolder;
    font-style: oblique;
}

voici le html

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 
<ul>
 
    <li class="cat">
        <a>
            <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/>
        </a>
 
        <a class="text_categorie" href="<?php echo  bloginfo('url'); ?>/?cat=10" title="Voir tous les articles class&#65533;s dans Bandes de transport">
            probleme titre avec chrome 
        </a>
    </li>
 
    <li>
        <div class="espace">&nbsp</div>
    </li>
 
    <li class="cat">
            <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/>
        <a class="text_categorie" href="<?php echo  bloginfo('url'); ?>/?cat=11" title="Voir tous les articles class&#65533;s dans Bandes de transport">
                   titre 2
        </a>
    </li>
 
        <li>
        <div class="espace">&nbsp</div>
    </li>
 
    <li class="cat">
            <img class="tourne" src="<?php echo bloginfo('home'); ?>/wp-content/themes/modele/image/tourne.png"/>
        <a class="text_categorie" href="<?php echo  bloginfo('url'); ?>/?cat=12" title="Voir tous les articles class&#65533;s dans Bandes de transport">
                  titre3
        </a>
    </li>
 
 
</ul>
 
 
 
<script type="text/javascript">
    $(document).ready(function () {
$('#sidebar li').css({backgroundPosition: '30px 0px'}); /* initialisation de la postion de depart*/
 
        $('.tourne').rotate({
            maxAngle: 90,
            minAngle: -55
        });
 
        $('#sidebar li').hover(function () {
            $(this).find('.tourne').rotateAnimation(85);
        }, function () {
            $(this).find('.tourne').rotateAnimation(-35);
        });
 
        $('#sidebar li')
        .mouseenter(function(){
            $(this)
            .animate({backgroundPosition: '300px 0px'},2500)
            ;
        });
 
                $('#sidebar li')
        .mouseleave(function(){
            $(this)
            .animate({backgroundPosition: '20px 0px'},2000)
            ;
        });
 
 
 
    });
</script>

je ne sais pas comment m'y prendre pour arrivé a correctement position le premier titre ?

merci d'avance pour vos aident.

[dominos]

Bonjour, tu utilises

Code :

1
2
3
    <li>
        <div class="espace">&nbsp</div>
    </li>

pour servir d'espace entre les menu, pourquoi ne pas utiliser padding-top ou padding-bottom ?