menu horizontal avec image + compatibilité ie6Résolu

Question

Bonjour,
Help me please !!!
Je n'arrive pas à trouver de solutions pour mon bug ie6.
J'ai créé un menu horizontal avec image mais sur ie6 l'affichage est différent.
ma page est visible sur ce lien
http://www.grafikom.fr/quisuisje.html

sur ie6 les li apparaissent en quinconce.
Je ne vois pas ou est le probleme.
J'ai essayé de mettre une hauteur à mon ul et à ma div nav pour contraindre les éléments mais ce n'est pas la solution !!

mon css :

@charset "UTF-8";
/* CSS Document */

/* ------valeur à zero ------*/
* {
margin: 0 auto;
}

body{
    background: url(images/fd-header.jpg) repeat-x 0 0;
    background-color: #CCCC99;
    font-family: Georgia, "Times New Roman", Times, serif;
}

/* --------div global avec centrage des elements--------*/

#global {
    background-repeat:repeat-x;
    background-image: url(images/fd-header.jpg);
    width: 1000px;
    position:absolute;
    margin-left:50%;
    left:-500px;
    height: 183px;
}

/* -------div header  :  header top & header bottom-------*/

#header-bottom{
    background-image: url(images/fd-header-bottom.jpg);
    height:21px;
    width:748px;
}

/*-------- div content--------*/

#content{
    background-color:#FFFFFF;
    width:748px;
}

    /*-------  div menu----*/

#nav{
    padding-top:5px;
    width:748px;
    
}
ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
    
}

ul#menu li {
    background-color:#FFFFFF;
    
}

ul#menu li a {
    float: left;
    display: block;!important; /* pris en compte par Firefox */
    display:inline;
    height: 36px;
    width: 140px;
    padding-top: 4px;
    background: url(images/bouton.jpg) bottom;
    text-decoration: none;
    color: #999999;
    text-align: center;
    line-height: 2.2;
    font-size: 14px;
    
}
ul#menu li a:hover {
    
    color: #fff;
    text-decoration: none;
}

/*-------  div contain-----*/

#contain{
    width:748px;
    clear: left;
}

img#qui{
    margin: 0 auto;
    padding-top:5px;

}
h1{
    color:#CC0000;
    font-size:14px;
    padding-left:35px;
    line-height: 4;
}
img#puce{
padding-right:5px;

}
p{
    Padding-top:10px;
    font-size:12px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:50px;
    text-align:justify;
    color:#333333;
}
a.lien-externe{
    text-decoration:none;
    color:#333333;
}
a:hover.lien-externe{
    border-bottom: 1px dotted #333333;
    color:#333333;
}
Y a t il une âme charitable pour m'aider ......
misskiss

cs_mike1310 · Accepted Answer

pense à mettre le tag "résolu" si tous est bien qui fini bien

cs_mike1310 · Answer

Essai de mettre un mettre un float:left sur tes li ... ça devrait refaire un peu tout puis après tu n'auras plus qu'a modifier les margin des li ou un truc comme ça .... et avec un peu de chance tu n'auras rien à modifier :D

misskis · Answer

merci !!! c'était tout bête et j y ai passé pas mal de temps...
plus qu'a mettre un padding et le tour est joué.
merci mike.

misskiss

Menu horizontal avec image + compatibilité ie6

3 réponses

Votre réponse

Discussions similaires