28173 sujets

CSS et mise en forme, CSS3

Affichage désastreux sur Internet Explorer d'une liste de puce dans u

Coucou à tous,
Je suis entrain de réaliser un menu en utilisant le CSS.
J'avais jusqu'à présent résolu bcp de problème de compatibilité mais là je sèche !
Alors je me penche vers les forums !
Mon menu est dispo à l'adresse http://www.easyconseil.com/test/test.html

Le code est le suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Conseil en stratégie</TITLE>
<style type="text/css">
<!--
#vmenu {
position:absolute;
left:15px;
top:15px;
margin:0px;
padding:0px;

}

#vsmenu {
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}
#vssmenu {
width:182px;
border-style:solid;
border-width:1px;
border-color:#990033;
margin-bottom:4px;
}
#vssmenu ul {
list-style-type:none;
list-style-position:inside;
width:163px;
padding:0px 10px 0px 10px;
margin-bottom:5px;
margin-top:5px;
}
#vssmenu ul li {
line-height:12px;
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
}
.serrer {
letter-spacing:-1px;
}
.actif {
background: url(images/fleche.gif) no-repeat 0px 1px;
padding-left:25px;
color:#990033;
}
#vssmenu ul li a {
text-decoration:none;
color:#666666;
font-size:11px;
font-family:Arial;
font-weight:bold;
}
#vssmenu ul li a:hover {
text-decoration:none;
color:#990033;
}
-->

</style>

</HEAD>
<BODY>
<div id="vmenu">
<div id="vsmenu"><a href="page1.html"><IMG SRC="images/vmenu1.gif" WIDTH="184" HEIGHT="33" border="0" alt=""></a></div>
<div id="vssmenu">
<ul><li><a href="page1.html"><span class="actif">Les métiers du conseil</span></a></li>
<li><a href="page1.html">Conseil en stratégie</a></li>
<li><a href="page1.html"><span class="serrer">Conseil en stratégie opérationnelle</span></a></li>
<li><a href="page1.html">Conseil en organisation et système d'information</a></li>
</ul>
</div>

<div id="vsmenu"><a href="page3.html"><IMG SRC="images/vmenu2.gif" WIDTH="184" HEIGHT="33" border="0" alt=""></a></div>
<div id="vsmenu"><a href="page4.html"><IMG SRC="images/vmenu3.gif" WIDTH="184" HEIGHT="33" border="0" alt=""></a></div>
</div>
</BODY>
</HTML>


2 pb principaux :
- sur FF les images sont séparées par un espace, alors que sur IE les images sont collées les unes aux autres. Si je veux mettre un espace entre chaque image sous IE, ça me fait un espace trop grand sur FF, je voudrai avoir le même espace qq soit le navigateur
- sur FF le texte de la case blanche est bien aligné à gauche, alors que sur IE il y a un alinéa et qu'en plus il est sacrément décalé vers la droite ! Au même endroit, la première ligne du menu doit être en rouge avec une flèche rouge devant, elle est très bien sur FF mais n'apparait pas sur IE.

Merci beaucoup de votre aide.

++
Pierrick
Modifié par Pierrick81 (10 Feb 2007 - 10:09)
Un petit point corrigé.
En changeant ces 2 lignes :
list-style-type:none;
list-style-position:inside;

par
list-style:none;

La fleche rouge apparait sur IE7 et l'alinéa disparait. Il y a par contre toujours un décalage important à gauche.
et il n'y a toujours pas d'espace entre les images.
Modifié par Pierrick81 (10 Feb 2007 - 10:10)
Autant pour moi, le message est tout joli tout beau !
J'avais cherché hier soir la balise code, mais je ne la voyais pas... quel boulet je suis !!
Merci de votre aide.
Pierrick
Pierrick81 a écrit :
2 pb principaux :
- sur FF les images sont séparées par un espace, alors que sur IE les images sont collées les unes aux autres. Si je veux mettre un espace entre chaque image sous IE, ça me fait un espace trop grand sur FF, je voudrai avoir le même espace qq soit le navigateur
- sur FF le texte de la case blanche est bien aligné à gauche, alors que sur IE il y a un alinéa et qu'en plus il est sacrément décalé vers la droite ! Au même endroit, la première ligne du menu doit être en rouge avec une flèche rouge devant, elle est très bien sur FF mais n'apparait pas sur IE.


Bonjour,

Ces deux problèmes sont traités dans la FAQ du forum, dans la section « Décalages, marges, bugs divers ».
Merci Florent,
Je découvre Alsacreations et je vous félicite vraiment pour le travail effectué ! Tout est clair, et effectivement, je n'avais pas vu cette FAQ qui est ma foi... bien sympa !
J'ai néanmoins un dernier problème, et je ne vois pas bien quoi faire.
En fonction de la page active, je rajoute une puce dans le lien (fleche rouge).
Mais vu que j'ai des liens qui s'affichent sur 2 lignes ma fleche n'apparait pas de la même manière sur IE et sur FF.
VOus pouvez le voir au niveau du lien suivant :
http://www.easyconseil.com/test/test.html
Sur FF, les 2 fleches s'affichent parfaitement, mais sur IE, lorsque le lien tient sur une ligne pas de pb, mais qd il passe sur 2 lignes la fleche ne s'affiche pas, il y a un décallage de 9px!

Je vous remets mon code CSS comme il est maintenant Smiley smile 

#vmenu {
   position:absolute;
   left:15px;
   top:15px;
   }
   #vsmenu {
   width:182;
   height:33;
   margin-bottom:3px;
   }
   #vsmenu img {
   display:block;
   }
   #vssmenu {
   width:182px;
   border-style:solid;
   border-width:1px;
   border-color:#990033;
   margin-bottom:3px ! important;
   margin-bottom:3px;
   }
      #vssmenu ul {
      list-style:none;
      width:162px;
      padding:0px 10px 0px 10px;
      margin-left:0px;
      margin-bottom:5px;
      margin-top:5px;
      }
      #vssmenu ul li {
      line-height:14px;
      padding-left:0px;
      padding-top:5px;
      padding-bottom:5px;
      }
      .serrer {
      letter-spacing:-1px;
      }
      .actif {
      background: url(images/fleche.gif) no-repeat 0px 1px;
      padding-left:25px;
      color:#990033;
      }
         #vssmenu ul li a {
         text-decoration:none;
         color:#666666;
         font-size:11px;
         font-family:Arial;
         font-weight:bold;
         }
         #vssmenu ul li a:hover {
         text-decoration:none;
         color:#990033;
         }


Merci d'avance pour votre aide.

++

Pierrick
Re,
Je viens de trouver une solution temporaire en ajoutant la ligne de code 
background-position:left 35%;

dans ma classe ".actif"
L'alignement n'est pas exactement identique dans les 2 navigateurs, mais au moins en attendant mieux ça marche.
Est-ce que qq1 pourrait me donner son avis sur ce rajout ?
Merci d'avance.
Sujet clos
Aller à