Finalement, j'ai réussi à mettre des commentaires conditionnelles en insérant le code <style></style> sur la page html. Je ne sais pas trop pourquoi je n'ai pas réussi à faire le lien sur la page css mais bon.
Comme vous pouvez le voir, les résultats sont différents sur la page Chrome et IE.
Je me suis arraché les cheveux depuis hier matin à résoudre ce problème sur IE.
Si vous pouviez m'aider, ce serait super !
Voici les commentaires conditionnelles sur IE :
<!--[if IE 7]> <style>body {
background-image:url(http://www.isoflex.fr/ald08/images/fond-ecran.png);
}
#menutest li ul ul {
margin-top:-20px;
min-width: 350px;
}
#menutest li:hover ul {
margin-left:-115px;
margin-top:20px;
top:auto;
}
.hydraulique:hover ul {
margin-top:20px;
}
#ul_hydraulique:hover {
margin-left:-115px;
top:auto;
margin-top:0px;
}
#double_ul_hydraulique:hover {
min-height:300px;
margin-left:-100px;
margin-top:0px;
}
#ul_industrie:hover {
margin-top:20px;
}
#double_ul_industrie:hover {
margin-top:auto;
min-height:300px;
}
#ul_inox:hover {
margin-top:20px;
}
#double_ul_inox:hover {
margin-top:auto;
min-height:300px;
}
#ul_lavage:hover {
margin-top:20px;
}
#double_ul_lavage:hover {
margin-top:auto;
min-height:300px;
margin-left:-100px;
}
#ul_machine:hover {
margin-top:20px;
}
#double_ul_machine:hover {
margin-top:auto;
min-height:300px;
margin-left:-100px;
}
#menutest, #menutest ul /* Liste */
{
margin-top : 0px; /* ni extérieure */
margin-left: 0px;
margin-right:0px;
margin-bottom:0px;
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 20px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
</style>
<![endif]-->
Et le code sur Chrome :
#menutest, #menutest ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 20px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menutest /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau */
font-size : 13px; /* hauteur du texte : 12 pixels */
}
#menutest a /* Contenu des listes */
{
display : inline-block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding-left :18px ;
padding-right:26px;
text-align:left;
color : #000000; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
font-size:10px;
width:310px;
}
#menutest li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menutest li
{
}
#menutest li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 240px; /* Largeur des sous-listes */
top: -999em; /* Hop, on envoie loin du champ de vision */
}
#menutest li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menutest li ul li
{
}
#menutest li ul ul
{
margin: -40px 0 0 240px; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
min-width:350px;
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète [cligne] */
html>body #menutest li ul ul
{
}
#menutest a:hover /* Lorsque la souris passe sur un des liens */
{ /* ... et au contraire, le fond en blanc */
background-image: url(a_menubutton1.png);
color:#DF7005;
}
#menutest li:hover ul ul, #menutest li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
top: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menutest li:hover ul, #menutest li li:hover ul, #menutest li.sfhover ul, #menutest li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
top: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
