[résolu] Cellules redimensionnées lors du clic sur un lien (firefox)

Bonjour,

Voici un curieux problème.

Lors du clic sur un lien, dans un tableau, les cellules sont redimensionnées et le lien se déplace. L'action ne se déroule alors pas car la souris n'est plus dessus au moment où l'on relâche. Quand on se déplace jusqu'au lien pour cliquer dessus, il reste à sa place et l'action se déroule.

Voici les images :

http://img502.imageshack.us/img502/3127/capture1oa2.png
http://img101.imageshack.us/img101/4012/capture2ab8.png

Et le code du tableau :

<table>
    <thead>
        <tr class="listeMenu">
            <th scope="col">Nom</th>
            <th scope="col">Actif</th>
            <th scope="col">Acc&#232;s</th>
        </tr>
    </thead>
    <tbody>
        <tr class="sousTitre">
            <td colspan="3"><h4>std-elia</h4></td>
        </tr>
        <tr class="client">
            <td>ffrs</td>
            <td><img src="images/actif.png" alt="Actif" /></td>
            <td><a href="?instance=std-elia&amp;client=ffrs">Acc&#232;s</a></td>
        </tr>
        <tr class="client">
            <td>ffct</td>
            <td><img src="images/actif.png" alt="Actif" /></td>
            <td><a href="?instance=std-elia&amp;client=ffct">Acc&#232;s</a></td>
        </tr>
        <tr class="client">
            <td>ffkama</td>
            <td><img src="images/actif.png" alt="Actif" /></td>
            <td><a href="?instance=std-elia&amp;client=ffkama">Acc&#232;s</a></td>
        </tr>
        <tr class="client">
            <td>ffsa</td>
            <td><img src="images/actif.png" alt="Actif" /></td>
            <td><a href="?instance=std-elia&amp;client=ffsa">Acc&#232;s</a></td>
        </tr>
    </tbody>
</table>

Avez-vous une idée du problème ? Merci.

EDIT : A noter que le code est valide XHTML 1.0 ; le CSS est valide également.
Modifié par 84mickael (25 Sep 2007 - 14:50)

Bonjour,

84mickael a écrit :
Avez-vous une idée du problème ?

Pas la moindre. Et sans le code CSS impliqué (notamment d'hypothétiques utilisations de :hover) et le code Javascript éventuel, ça va être dur de dire quoi que ce soit.

De plus, tu dis:

84mickael a écrit :
L'action ne se déroule alors pas car la souris n'est plus dessus au moment où l'on relâche.

Tu as une action qui ne se déroule que si le pointeur de la souris survole le lien une fois que tu viens de cliquer sur le lien?

Il n'y a ni Javascript ni ":hover" dans le CSS, mais j'essaierai de poster davantage de code demain.

L'action qui consiste à diriger l'utilisateur vers le lien pointé n'est effectué que lorsqu'il a relâché son bouton de souris. Là ça se passe comme ceci :
1- Clic sur le lien : les cellules sont redimensionnées ;
2- "Déclic" : il ne se passe rien car le curseur n'est plus sur le lien.
Modifié par 84mickael (24 Sep 2007 - 20:08)

84mickael a écrit :
L'action qui consiste à diriger l'utilisateur vers le lien pointé n'est effectué que lorsqu'il a relâché son bouton de souris.

Là ça se passe comme ceci :
1- Clic sur le lien : les cellules sont redimensionnées ;
2- "Déclic" : il ne se passe rien car le curseur n'est plus sur le lien.

Bonjour,

En attendant le code, pourrais-tu nous en dire plus sur la finalité d'un tel comportement .

C'est le fonctionnement par défaut du navigateur ! Il n'y a ni Javascript, ni CSS abusif. Je cherche simplement à avoir un tableau "fixe" et des liens sur lesquels je puisse cliquer du premier coup !

84mickael a écrit :
C'est le fonctionnement par défaut du navigateur ! Il n'y a ni Javascript, ni CSS abusif. Je cherche simplement à avoir un tableau "fixe" et des liens sur lesquels je puisse cliquer du premier coup !

On va donc attendre le code

Voici le code CSS susceptible d'avoir des effets sur ce tableau :

body {
	background-color: white;
	font-family: Helvetica, verdana, arial;
	font-size: .7em;
	color: black;
	margin: 0;
}

#content table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
}

#content td {
	margin: 0;
	padding: 1.5em 0 .1em 1%;
}

#content td a {
	color: #000;	
}

#content td a:hover {
	color: #f60;	
}

#content .listeMenu th {
	color: #f60;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	text-align: left;
	padding: 1em 0 .1em 1%;
}

#content .sousTitre {
	margin: 0;
	border-bottom: 1px solid #f60;
}

#content .sousTitre h4 {
	font-size: 1.3em;
	padding: 0;
	margin: 0;
}

#content .client {
	border-bottom: 1px solid #ddd;
	padding: 0;
	margin: 0;
}

Merci de votre aide.

84mickael a écrit :
Il n'y a ni Javascript ni ":hover" dans le CSS

Alors je ne m'explique pas ce comportement. J'ai testé ton code HTML et le CSS associé, et comme je m'y attendais il n'y a strictement aucun comportement étrange, décalage, clic impossible, ou autre bizarrerie.

Le comportement obtenu:

Rien à signaler.

Pourrait-on voir la page complète plutôt que des bouts de code?
Et le problème constaté a-t-il lieu avec tous les navigateurs, ou avec un navigateur en particulier?
Modifié par Florent V. (25 Sep 2007 - 12:21)

Autant pour moi, le CSS ne s'appliquait pas car j'ai utilisé le code HTML que tu donnes dans ton premier message, code dans lequel il manque au moins un petit <div id="content">...</div> pour entourer le tableau.

(D'où l'utilité de fournir une page en ligne pour éviter ce genre d'erreurs et de perte de temps...)

Pour le problème lui-même, je ne l'avais jamais rencontré mais en procédant par élimination on découvre que le style suivant pose problème:

#content td {
	margin: 0;
	padding: 1.5em 0 .1em [b][#red]1%[/#][/b];
}

Le padding en pourcentages fait apparemment buguer Firefox. Les autres navigateurs ne bronchent pas, par contre.

Hop, détails du bug de Firefox:
http://web.covertprestige.info/test/30-bug-firefox-td-padding-pourcentages.html

Hello,

Je pense que ce bug est lié à la gestion du outline par Firefox, qui le prend parfois de façon erronée en compte, comme dans le cas suivant :

<p style="overflow: auto; height: 50px;"><a style="display: block; height: 50px;" href="#">Test</a></p>

<edit>Le bug en question est recensé chez QuirksMode
Modifié par Julien Royer (25 Sep 2007 - 14:56)

Merci beaucoup Florent ! Je n'avais pas imaginé que ça puisse venir d'un bug du navigateur.

Je suis en stage et j'ai juste Firefox. C'est aussi pour cette raison que je n'ai pas posté tout le code (propriété de l'entreprise). Mais quand j'ai besoin d'aide sur mes projets persos, pas de problème pour tout dévoiler !

J'ai corrigé le problème en remplaçant toutes les marges en % par des pixels. Le rendu n'est pas aussi bon qu'auparavant mais ça ira. J'ai déjà dû me dépatouiller avec les maquettes qu'on m'a données : frames, tableaux imbriqués et X fichiers CSS.

Ah la vie de l'entreprise n'est pas tout rose... mais ceci est une autre histoire !

Julien Royer a écrit :
Je pense que ce bug est lié à la gestion du outline par Firefox, qui le prend parfois de façon erronée en compte, comme dans le cas suivant :

<p style="overflow: auto; height: 50px;"><a style="display: block; height: 50px;" href="#">Test</a></p>

Ah oui, ça explique certains problèmes d'apparition de barres de défilement intempestives lors de l'utilisation de overflow: auto (utilisé pour créer un contexte de formatage, empêcher le dépassement des flottants, etc.).

Ceci dit, je ne sais pas si tu as vu ma page de test Julien, mais si le outline est bien l'élément déclencheur, il n'explique pas à lui tout seul le bug. Voir notamment les derniers exemples.
Modifié par Florent V. (26 Sep 2007 - 11:36)

Florent V. a écrit :
Ceci dit, je ne sais pas si tu as vu ma page de test koala...

euh... si, j'ai vu mais je n'ai rien dit moi...

84mickael a écrit :
Je n'avais pas imaginé que ça puisse venir d'un bug du navigateur.

Toujours tester avec plusieurs navigateurs, dont au moins deux navigateurs «conformes» (Firefox, Opera, Safari, Konqueror... et aussi Camino ou Epiphany ou Netscape 9 mais pas en complément de Firefox vu que c'est le même moteur).

84mickael a écrit :
C'est aussi pour cette raison que je n'ai pas posté tout le code (propriété de l'entreprise).

Cela n'empêche pas de créer une page de test minimale et anonymisée, reproduisant le problème (ce qui est déjà un bon moyen pour corriger la moitié des problèmes qu'on rencontre), et mise en ligne sur un hébergement neutre (genre compte perso Free...). Ça facilite beaucoup la tâche de tout le monde.

koala64 a écrit :
euh... si, j'ai vu mais je n'ai rien dit moi...

C'est parce que vous avez tous les deux un avatar à bec jaune.

Florent V. a écrit :
Ceci dit, je ne sais pas si tu as vu ma page de test Julien, mais si le outline est bien l'élément déclencheur, il n'explique pas à lui tout seul le bug. Voir notamment les derniers exemples.

Oui, en effet, c'est très rigolo.