[CSS]lien survolé sur une image et déclaration doctype

**gwendal84** · 10/02/2006, 12h21

voilà mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>exemple</title>
<style type="text/css" media="screen">
body {
	background-color:white;
}
a {
	text-decoration:none;
	color:#03aF03;
}
img {
	border:0px;
}
a:hover>img{
	text-decoration:none;
}
a:hover {
	text-decoration:underline overline;
	color:green;
}
</style>
</head>
<body> 
<div>
<a href="http://google.fr"> <img src="http://www.google.fr/images/firefox/google.gif" alt="google"/><br />Google</a>
</div>
</body>
</html>

le problème est que le underline overline s'applique aussi sur l'image. ce qui me surprends c'est que quand je retire la déclaration doctype, le problème disparait. mais je veux absolument garder cette déclaration. Ce problème n'aparait que sous firefox.

Le code que j'ai donné n'est évidement pas l'original, mais le bug y est présent.

avez vous des idées pour résoudre mon problème ?

**_dranece_** · 10/02/2006, 13h53

Mets 2 liens différents, 1 pour l'image, l'autre pour le texte. Puis tu appliques au lien de l'image un style spécifiant le "text-decoration:none;".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
...
 
a:hover {
   text-decoration:underline;
   color:green;
}
.imageLink:hover{
   text-decoration:none;
}
</style>
</head>
<body>
<div>
<a href="http://google.fr" class="imageLink"> <img src="http://www.google.fr/images/firefox/google.gif" alt="google"/></a>
<br />
<a href="http://google.fr">Google</a>
</div>
</body>
</html>

**gwendal84** · 10/02/2006, 15h52

c'est une bonne idée, mais quand je survole l'image, le lien ne dessous ne se sourligne pas :'(

j'ai l'impression que c'est un bug firefox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>exemple</title>
</head>
<body> 
<div>
<a href="http://google.fr"><img src="http://www.google.fr/images/firefox/google.gif" alt="google" /><br />google</a>
</div>
</body>
</html>

l'image ne devrait pas être soulignée

**gwendal84** · 10/02/2006, 16h35

c bon j'ai trouvé une feinte molle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a:hover+a{
	text-decoration:underline overline;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="http://google.fr"><img src="http://www.google.fr/images/firefox/google.gif" alt="google" /></a>
 
<a href="http://google.fr"><br />google</a>

je sépare les liens et je les remet ensemble en css...

[CSS]lien survolé sur une image et déclaration doctype

CSS

Vue hybride

Discussions similaires

Partager

Partager