Bonjour à tous, me voila devant un probleme de css. Problème d’intercompatibilité, tout ca…
/my life
Je suis en train de refondre le site du festival ART’scène, le Festival Internationnal des Arts de la Scène. J’essaye pour le besoins du développement d’utiliser un max de css. Je connais plutot pas mal la chose, mais la l’optimisation entre IE et moz est difficile.
//my life
Pour le moment, ce que je veux avoir est visible sous IE niquel. Sous mozilla et compagnie, on est loin du compte.
Voici l’adresse du site :
http://81.80.29.230/festival-artscene/as2006/
Ce qui me pose réellement problème, c’est le menu, qui comme vous le voyez, n’est pas à sa bonne place sous Moz, (la bonne place voulut étant celle de IE). et du coup, ca décale, tout le reste et c’est moche.
Comment corriger ce probleme ?
Voici les bouts de code :
page html
|
|
|
|
/* CSS Document */
.menuh_puces_conteneur {
display: inline;
margin: -2px;
text-align: center;
}
.menuh_puces {
display: inline;
background-color: #FF5C5C;
border: 1px solid #333333;
list-style-type: none;
height: 28px;
width: 110px;
margin-top: 0px;
margin-right: 2px;
margin-left: 5px;
font-size: 11px;
vertical-align: bottom;
font-weight: bold;
color: #FFFFFF;
text-align: center;
background-image: url(images/menuh_fond.jpg);
}
.menuh_soutitre {
background-image: url(images/menuh_soustitre.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 20px;
font-size: 11px;
padding-top: 4px;
text-align: center;
}
.menuv{
background-image: url(images/menuv_fond.jpg);
background-repeat: repeat-y;
background-position: left top;
height: 20px;
vertical-align: top;
color: #FFFFFF;
font-weight: bold;
font-size: x-small;
}
.menuv_puces_conteneur {
margin: 0px;
}
.menuv_puces {
background-color: #FF5C5C;
border: 1px solid #333333;
list-style-type: none;
height: 20px;
width: 125px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 11px;
vertical-align: middle;
padding-top: 2px;
padding-left: 27px;
background-image: url(images/menuv_fondmenu.jpg);
background-repeat: no-repeat;
}
.menuv_puces_light {
background-color: #333;
border: 1px solid #333;
list-style-type: none;
height: 20px;
width: 125px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 11px;
vertical-align: middle;
padding-top: 2px;
padding-left: 27px;
background-image: url(images/menuv_fondmenu_light.jpg);
background-repeat: no-repeat;
}
.conteneur_menutxt {
vertical-align: top;
background-color: #FFFFFF;
}
.conteneur_menutxt_bord_d {
background-image: url(images/conteneur_menutxt_bord_d.jpg);
background-repeat: repeat-y;
background-position: right top;
}
.module_table {
width: 274px;
margin-top: 5px;
margin-bottom: 10px;
vertical-align: top;
}
.module_texte {
padding: 2px ;
}
.module_haut {
background-image: url(images/module_haut.jpg);
background-repeat: no-repeat;
padding-left: 45px;
font-size: 11px;
font-weight: bold;
color: #fff;
}
.module_bas {
background-image: url(images/module_bas.jpg);
background-repeat: no-repeat;
}
.module_bord {
background-image: url(images/module_bord.jpg);
background-repeat: repeat-y;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 18px;
vertical-align: top;
}
.module2_table {
width: 95%;
margin-top: 5px;
margin-bottom: 10px;
vertical-align: top;
}
.module2_texte {
padding: 2px ;
padding-left: 5px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FF5C5C;
}
.module2_haut {
background-image: url(images/module2_haut.jpg);
background-repeat: no-repeat;
padding-left: 45px;
font-size: 11px;
font-weight: bold;
color: #fff;
}
.module2_bas {
background-image: url(images/module2_bas.jpg);
background-repeat: no-repeat;
}
.module2_bord {
background-image: url(images/module2_bord.jpg);
background-repeat: repeat-y;
padding-top: 5px;
padding-right: 25px;
padding-bottom: 5px;
padding-left: 15px;
vertical-align: top;
}
.page {
background-image: url(images/page_bord.jpg);
background-repeat: repeat-y;
Merci donc si vous avez une idée. Je suppose un probleme dans les padding ou marging, mais quand je change c’est encore pire…[/quote][/quote]