[résolu] Erreur styles tutorial

Après utilisation du tutorial " Afficher / Masquer des éléments sans javascript" : à cette adresse : http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript

J'ai une erreur que je ne comprends pas :

Dreamweaver me dit : d'après le code en css : "erreur d'analyse des styles influe sur microsoft internet explorer 6"

J'ai testé le tuto, impécable sur firefox, mais sur internet explorer dès que je survole le premier lien, j'ai un léger décalement vers le bas du bouton...

Puis-je aussi placer le calque à l'endroit que je souhaite sur ma page?

Une idée ?

Merci à vous

Edit : j'ai pû placer mon calque mais toujours même problème l'apperçu est différent de firefox à internet explorer....
Modifié par nemeton (30 May 2008 - 08:19)

Pas d'idée sur la question? Ce qui me gène le plus ce sont les différences d'affichage...Mes pages sont valides xhtml et css, donc je ne comprends pas cette différence. Devrais-je ajouter des hacks css afin de forcer IE à se comporter correctement ?

edit : j'ai réglé le problème, j'avais oublié un "auto" sur un bloc en hauteur et largeur....maintentant ça ne bouge plus !

Mis à part ça, j'ai toujours une diférence assez génante. J'ai mis des tirets autour de certains texte ( à l'aide de style ) sous ie les traits sont plus "fort" que sous firefox...le texte pareil....
Modifié par nemeton (24 May 2008 - 09:11)

Toujours personne pour m'aider à trouver une solution?

J'ai reproduis exactement le tutorial cité plus haut, mais si je décale l'apparition du calque a droite, tout est ok sur IE et firefox. Si je fais apparaitre mes favoris dasn le navigateur, cela décale le calque...Comment bloquer le décalement du calque? J'ai beau chercher sur le net rien à faire....Je commence à croire que pour certaines manips, il vaut mieux du js.

Merci de m'aider à comprendre !

Pas très amusant de soliloquer, je suppose

Pourrais-tu poster le code en question, ou même une page en ligne ?
Difficile sans cela de te venir en aide...

Quelques pistes...

a écrit :
Mes pages sont valides xhtml et css, donc je ne comprends pas cette différence.

Mon site est valide...
Rendu navigateur...

+spécificités et bugs de ces derniers

a écrit :
Je commence à croire que pour certaines manips, il vaut mieux du js.

Tu as de bonnes croyances, c'est effectivement le rôle de js (notamment) de faire ce type de manip

Cdt,
Sylvain

Merci de me donner un début de réponse !

Voici le code xhtml :

<!--debut menuC -->
  <div id="menuC">
    
    <ul>
      <li><a href="#">Maçonnerie générale<span><img src="images/2.jpg" alt="" /></span></a></li>
      <li><a href="#">Décoration<span><img src="images/3.jpg" alt="" /></span></a></li>
      <li><a href="#">Zinguerie<span><img src="images/4.jpg" alt="" /></span></a></li>
      <li><a href="#">Terrassement<span><img src="images/5.jpg" alt="" /></span></a></li>
      <li><a href="#">Isolation Intérieur / Extérieur<span><img src="images/6.jpg" alt="" /></span></a></li>
      <li><a href="#">Plâtre<span><img src="images/7.jpg" alt="" /></span></a></li>
      <li><a href="#">Charpente<span><img src="images/8.jpg" alt="" /></span></a></li>
      <li><a href="#">Menuiserie PVC<span><img src="images/9.jpg" alt="" /></span></a></li>
      <li><a href="#">Couverture<span><img src="images/10.jpg" alt="" /></span></a></li>
      <li><a href="#">Chappe carrelage<span><img src="images/2.jpg" alt="" /></span></a></li>
    </ul>
  </div>
  <!--fin menuC -->

Code css du tutorial alsa pour le rollover sans JS :

<style type="text/css">

a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 770px;
top: 375px;
width: 200px;
height: 100px;
background: none;
text-align: center;
color: white;
}

</style>

J'ai plusieurs soucis :

1) mon calque se décale à droite si j'affiche mes favoris dans ie et firefox.
2) Sous ie6 mes boutons de rollover sont tous décalés, alors que tout est ok sous firefox / résolu /
3) Mon texte ainsi que mes tirets autour du texte ( sur l'ensemble de mes pages ) sont plus "grossier" sous ie que sous firefox.
4) mes calques qui s'affichent au passage de la souris, dedans il y à des images, les images ont un rebord leger blanc sous firefox mais pas du tout sous ie.

Voilà merci du coup de main !
Modifié par nemeton (27 May 2008 - 19:57)

Personne n'a d'idée ?

Bonjour,

Je serais d'avis qu'il faut partir sur une solution plus simple (sans effets de masquage ou d'affichage dynamique de contenu) en attendant de mieux maitriser le sujet.

Donc reprendre les bases si besoin. Pour les effets dynamiques (hors très simples effets de survol), il faudra apprendre les bases de Javascript également, car bidouiller ça en CSS n'est pas vraiment une solution. Ou alors il faut bien maitriser CSS (ça reste de la bidouille, mais de la bidouille d'expert ).

S'il s'agit d'un site professionnel, je rappelle à tout hasard qu'on peut engager un professionnel pour le réaliser.

Bonjour !

Merci pour ta réponse , je vais effectivement revoir certaines bases. J'ai solutionné malgrés tout le problème en ajoutant une position "relative" à mon block...Le calque ne bouge plus donc !

Je reste toujours à la recherche du célèbre "différence d'affichage" entre navigateur....Il y à tellement d'infos, c'est bluffant....@ croire aussi que Microsoft ferait mieux de revoir le comportement de IE, selon les normes web.

Enfin, j'ai du taff !