[Résolu] Décalage d'1 px sous Chrome

Bonjour j'ai une différence de rendu sous Chrome.
Comme vous pouvez le voir sous les images ci dessous : le top menu a un décalage d'1 px

Firefox et IE
http://img824.imageshack.us/img824/9943/ieouff.jpg

Chrome
http://img221.imageshack.us/img221/4628/chromet.jpg

La page est formée de la façon suivante

<div class="page">
            <div class="ligne_top">&nbsp;</div>
            <div class="header">
                <div class="logo">
                    <a href="#">                       
                        <img alt="logo du lycée la viste" src="./images/logo/logo.png" />
                    </a>                    
                </div>
                <div class="menu_top">
                    <ul>
                        <li><a class="inactive" href="#">A</a></li>
                        <li class="active"><a href="#">B</a></li>
                        <li><a class="inactive" href="#">C</a></li>
                    </ul>
                </div>   
            </div>
... etc

Vous le code CSS correspondant au code HTML :

.header{
    height : 150px ;
    background : #193388 url(../images/bandeau/bandeau.jpg) no-repeat ;
    background-position : right ;
        margin:0;
    padding: 0;

}
.logo{
    display:block;
    float: left;  
    padding-top : 18px ;
}

.menu_top{ 
    display:block;
    float: right;  
    margin:0;
    padding: 0;
    
}

.menu_top ul {
    padding-top : 114px ;
    margin : 0;
    list-style-type : none;
     
}
.menu_top ul li{
    float : left;
    margin-left: 10px ;
    margin-right: 10px ;
    
}

.inactive {
    display : block;
    float : left;   
    width : 200px;
    background: url(../images/menu_top/item.png) repeat-x;
    line-height:36px; /*hauteur de l'image de fond*/
    text-decoration:none;
    text-align:center;
}

.active{
    display : block;
    float : left;   
    width : 200px;
    background: url(../images/menu_top/item_active.png) repeat-x;
    line-height:36px; /*hauteur de l'image de fond*/
    text-decoration: underline;
    text-align:center; 
}

Quelqu'un aurait une idée ?

Merci

Nicolas
Modifié par bdaboah (10 Mar 2012 - 18:12)

Si t'enlèves le padding et margin sur tout le document ça donne quoi ?

html, body
{
margin : 0;
padding : 0;
}

Salut,

Personnellement j'ai déjà remarqué que FF et Chrome ne fonctionnait pas de la même façon au niveau des arrondis de certaines valeurs, et ça peut donner ce genre de résultat.

Mais bon, déjà à mon avis si tu positionnais ton .top_menu autrement qu'avec un padding (un padding pour positionner un élément c'est plutôt bof).

Je te propose comme solution :

.header {
position: relative;
}

.menu_top {
position: absolute;
bottom: 0;
right: 0;
}

Et peut être mettre une height sur ton header ça dépend du rendu.

PS: juste comme ça; les div vides c'est à éviter, le div .menu_top ne sert à rien, un ul seul aurait très bien suffit.

Merci Gili c'est tout bon