probleme bug hover sur un lien avec IE7

Petit additif pour reproduire le bug :

Le bug ne se manifeste que lors d'un changement de taille des polices
CTRL+/- ou CTRL molette.

Vous pouvez consulter la feuille de style ici :
<http://www.driftgirl.fr/album/fakes/style/barok/screen.css>

Lea GRIS a écrit :

Bonjour,

Depuis plusieurs heures je cherche comment régler/contourner un bug
d'affichage étrange, qui se déclenche lors d'un hover sur les liens avec
IE7, et se manifeste sur une autre balise de lien placée ailleurs dans
la page.

Voici la page en question :

<http://www.driftgirl.fr/album/fakes/roses>

Avec IE7, l'affichage de la page est normal jusqu'à ce qu'on passe la
souris au-dessus d'un des liens du menu à gauche.
À ce moment, le lien "Listen" en haut du texte se voit précédé d'une
ligne de soulignement qui persiste jusqu'à rafraîchissement de la page.

Sauriez-vous m'aider à trouver un remède ?

La page est en HTML 4.01 strict et CSS valide.
Il n'y a pas ce bug avec Firefox et Opera.

Merci,

Lea GRIS a écrit :

<http://www.driftgirl.fr/album/fakes/roses>

Avec IE7, l'affichage de la page est normal jusqu'à ce qu'on passe la
souris au-dessus d'un des liens du menu à gauche.
À ce moment, le lien "Listen" en haut du texte se voit précédé d'une
ligne de soulignement qui persiste jusqu'à rafraîchissement de la page.

Sauriez-vous m'aider à trouver un remède ?

Tu as vu ce que ça donnait avec Firefox ?
Ça ne te gêne pas cet ascenseur inutile horizontal ?

La plage du lien fait 3 kms de long...

La page est en HTML 4.01 strict et CSS valide.
Il n'y a pas ce bug avec Firefox et Opera.

Ben non mais presque ...

Avec :

#play {
display:block; /* hop! le lien fait la largeur du viewport */
font-size: 20px;
position: relative;
top: 0.8em;
left:12em;
text-decoration: underline;
/* ajoute un bord pour y voir */
border: 1px solid white;
}

essaie :

#article {
position: relative; /* histoire de tenter de régler #play */
float:left;
}

--
sm

SAM a écrit :

Tu as vu ce que ça donnait avec Firefox ?
Ça ne te gêne pas cet ascenseur inutile horizontal ?

La plage du lien fait 3 kms de long...

Il s'agit du choix de mise en page de l'auteure de l'album.
L'ascenseur horizontal apparaît dès qu'il n'y a pas assez de place pour
afficher les trois colonnes de texte côte-à-côte.
En attendant que les colonnes CSS3 soient compatibles avec les
principaux navigateurs, il ne semble hélas pas exister beaucoup de
moyens pour produire des colonnes pouvant s'agencer dynamiquement dans
une mise en page élastique.

La page est en HTML 4.01 strict et CSS valide.
Il n'y a pas ce bug avec Firefox et Opera.

Ben non mais presque ...

Avec :

#play {
display:block; /* hop! le lien fait la largeur du viewport */
font-size: 20px;
position: relative;
top: 0.8em;
left:12em;
text-decoration: underline;
/* ajoute un bord pour y voir */
border: 1px solid white;
}

avec le display:block; le problème du bug d'affichage semble avoir disparu.

essaie :

#article {
position: relative; /* histoire de tenter de régler #play */
float:left;
}

Je testerais ça et encore d'autres choses. Si cette feuille de style est
encore bien améliorable, j'apprends et surchauffe ma cervelle par la
même occasion.
Pas facile de trouver un compromis entre les placements relatifs et les
placements flottants, tout en gardant l'avantage d'échelles em pour
bénéficier d'une disposition cohérente quelque-soit l'échelle des polices.

Merci à toi pour les suggestion et le temps passé à regarder.

Amicalement,

--
Léa Gris