Liens dans menu inactif sous IE

sur certaines pages seulement

Sujet résolu

8 juin 2006 à 17:05:31

Bonjour à toutes et tous, :soleil:

Je viens de finir la refonte de mon site (mise en conformité W3C)grâce aux tutoriaux de m@téo21.

J'ai 2 fichiers css 1 pour FF et 1 pour IE.
Sous FF : tout fonctionne.
Sous IE : sur certaine de mes pages, les liens du menu sont devenus inactifs et je ne comprends pas pourquoi.

Je n'ai pas encore transféré mon site.

Si vous avez la solution, je suis preneur.

Merci.

Fylhan

8 juin 2006 à 17:19:43

Hum... bah sans ton code, cela va être difficile !

(très difficile)

Cela dit, si tu utilises du flash, ou des images transparentes en mode absolu, vérifient qu'elles ne passent pas au dessus du lien, le bloquant.
C'est la seule hypothèse que j'peux faire sans en taper une tone

Pascal02

8 juin 2006 à 17:51:20

Voici une partie du code de l'une des pages qui pose poblème.

<div id="le_menu">
<table>
<tr >
<td class="cellule"><a href="index.html">~Accueil~</a></td>
</tr>
<tr>
<td class="cellule"><a href="emploi.html">~Recherche<br />d'Emploi~</a></td>
</tr>
<tr>
<td class="cellule"><a href="bourg.html">~Notre village~</a></td>
</tr>
<tr>
<td class="cellule"><a href="oceane.html">~Notre chienne~</a></td>
</tr>
<tr>
<td class="cellule"><a href="lavande.html">~La Lavande~</a></td>
</tr>
<tr>
<td class="cellule"><a href="recettes1.html">~Nos recettes~</a></td>
</tr>
<tr>
<td class="cellule"><a href="cocktails1.html">~Nos cocktails~</a></td>
</tr>
<tr>
<td class="cellule"><a href="liens.html">~Nos liens~</a></td>
</tr>
<tr>
<td class="cellule1"><a href="mailto:pdeb9@hotmail.fr"><img src="images/arobasedore.gif" alt="Arobase tournant" title="Nous contacter"/></a></td>
</tr>
<tr>
<td class="cellule"><a href="historique.html" title="Historique des mises à jour">~Historique~</a></td>
</tr>
</table>
</div>


<div id="corps">
<h5>Voici quelques recettes parmi celles que nous réalisons le plus souvent</h5>

<table class="table4">
<tr>
<td><span>Les Plats uniques</span><br />
<div class="nomrecette">
<div><a href="recettes2.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Tartiflette</div>
<div><a href="recettes3.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Pissaladière</div>
</div>
</td>
<td><span>Les Poissons</span><br />
<div class="nomrecette">
<div><a href="recettes4.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Colombo de thon</div>
<div><a href="recettes5.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Saumonette aux échalotes</div>
</div>
</td>
</tr>
<tr>
<td><span>La Volaille</span>
<div class="nomrecette">
<div><a href="recettes6.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Poulet à la bière</div>
</div>
</td>
<td><span>La Viande</span>
<div class="nomrecette">
<div><a href="recettes7.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Estouffade de boeuf aux olives</div>
</div>
</td>
</tr>
<tr>
<td><span>Les Desserts et Les Gateaux</span>
<div class="nomrecette">
<div><a href="recettes8.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Tiramisu</div>
<div><a href="recettes9.html"><img class="pucelien" src="images/fleche001.gif" alt="fleche"/></a>Boboche</div>
</div>
</td>
</tr>
</table>
</div>

#le_menu /*DEFINI LE MENU*/
{
float:left;
width:160px;
height:auto;
padding-top:70px;
font-weight:bold;
font-family:"Comic Sans MS",Georgia,Garamond,serif;
font-size:105%;
font-style:italic;
text-align:center;
}

.cellule
{
width:130px;
height:35px;
font-size:90%;
}

.cellule1
{
width:130px;
height:120px;
}

#corps
{
font-family:Garamond,Georgia,Arial,serif;
font-size:110%;
width:auto;
text-align:left;
margin-left:185px;
padding:15px;
}
.table4
{
text-align:center;
margin:auto;
width:90%;
font-size:180%;
font-family: "French Script MT","Brush Script MT","Comic Sans Ms", Serif;
}

.nomrecette
{
text-align:left;
margin-left:30px;
}

.pucelien
{
margin-right:20px;
}

Voici une image de la page en question.
Image utilisateur

Fylhan

8 juin 2006 à 18:05:49

re-salut !

Heu le lien il est que au niveau des flêches là ou je me trompe ?

Pascal02

8 juin 2006 à 18:11:50

salut,

C'est les liens du menu qui ne fonctionnent pas.
Les liens sur les fleches fonctionnent.

Sous FF, la même page fonctionne.

Fylhan

8 juin 2006 à 18:15:43

Ok !! J'me suis trompé de menu alors !!

Tu pourrais préciser le "y marche pas" ? Cela veut dire que quand tu cliques dessus il ne se passe rien ? Ou qu'au passage de la souris le a:hover ne se met pas en place ?
(j'ai jamais testé de mettre un font-size en %. J'avais quelques expériences de décalement avec ça (mais pas sur des liens) as-tu testé sans ?)

strucky

8 juin 2006 à 18:19:35

Sûrement un bloc qui recouvre les liens, met une bordure à tous tes blocs pour vérifier leur taille.

Pascal02

8 juin 2006 à 18:37:57

La définition des liens suivante :

/*DEFINITION DE L'AFFICHAGE DES LIENS LORS DU PASSAGE DE LA SOURIS*/

a:link,a:visited
{
text-decoration:none;
background-color:transparent;
color:rgb(0,0,255);
}

a:hover /*Quand la souris passe sur le lien*/
{
text-decoration:none;
background-color:transparent;
color:rgb(0,200,255);
}

a:active,a:focus /*Quand le lien est sélectionné*/
{
text-decoration: none;
background-color:transparent;
color:black;
}

ne fonctionne plus. Le clic sur le lien ne fonctionne pas non plus.

J'ai testé avec des bordures, il n'y a pas de chevauchement.

Fylhan

8 juin 2006 à 18:42:41

...
C'est étrange. Y doit y avoir un truc bateau quelque part qui fait que... bigre...

Hum... J'ai un jour quelque part (chai pu où) qu'il fallait afficher les :hover, :visited, etc... pour les liens dans un ordre précis pour que cela fonctionne partout. (moi aussi je trouve ça quiche, oui.) Il serait peut-être tant de tester si c'est véridique.
de mémoire :
a (normal)
a:hover
a:active
a:focus
a:visited

A moins que ce ne soit l'ordre donnait par M@téo (ou mémoire dur, dur^^)

Désolé de ne pouvoir aider plus.

Pascal02

8 juin 2006 à 18:48:56

OK, merci.

Je vais essayer en reconstruisant les quelques pages qui m'embetent.

Le plus rageant, c'est que cela fonctionne hyper bien sous FF.

@++

Fylhan

8 juin 2006 à 18:52:38

Quelle idée de faire un fichier CSS spécial IE aussi^^ Tu cherchais à éviter la complication, et la complication t'as trouvé !!

Tiens nous au coruant si ça marche stpl ! (ça m'intéresse^^)

Pascal02

9 juin 2006 à 0:04:26

J'ai trouvé. :magicien:

En reconstruisant une page j'ai découvert que c'était un margin-top dans le CSS pour IE qui me pourrisait le fonctionnement.

Pour conclure : le margin-top est présent dans le CSS pour FF, mais non présent dans le CSS pour IE.

Le fonctionnement est redevenu normal. Mes 2 fichiers CSS ont passés le validateur W3C.

Mon fichier CSS pour IE me permets de résoudre assez facilement les problèmes de compatibilité. Je n'ai rien inventé c'est M@téo21 qui en parle dans son tuto.

@++