1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Menu horizontal avec image + compatibilité ie6 [Résolu]

Signaler
Messages postés
16
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
17 octobre 2008
 -
Messages postés
232
Date d'inscription
jeudi 30 août 2007
Statut
Membre
Dernière intervention
31 juillet 2009
 -
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

3 réponses

Réponse 1 / 3
Messages postés
232
Date d'inscription
jeudi 30 août 2007
Statut
Membre
Dernière intervention
31 juillet 2009
pense à mettre le tag "résolu" si tous est bien qui fini bien
Réponse 2 / 3
Messages postés
232
Date d'inscription
jeudi 30 août 2007
Statut
Membre
Dernière intervention
31 juillet 2009
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
Réponse 3 / 3
Messages postés
16
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
17 octobre 2008
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
Répondre Posez votre question