28172 sujets

CSS et mise en forme, CSS3

[reglé] IE7 CSS :hover ne fonctionne plus

Bonjour à toutes et tous,

alors voila mon soucy

IE 7 refuse de m'affiché les :hover, qui fonctionne bien sur certaine pages, genre de page super lourde avec 3 feuilles de styles, du javascript, des tableau immense...

alors qu'avec une simple page que j'ai épuré au strict minimum... non..
Le HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Intranet</title>
	<link rel = "stylesheet" type = "text/css" href = "test.css" />
</head>

<body>

<div class = "message">
	<div class = "message">test sur hover</div>
	<div class = "message">test sur hover</div>
</div>

<p>test sur hover</p>
<button class = "small_button" onClick = "window.location='#'">test</button>
</body>
</html>


et le CSS
.small_button  {
font-size : 12px;
color: #000000;
background-color: #24db72;
width: 110px;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
PADDING-LEFT: 0px;
}

.small_button:hover  {
font-size : 12px;
color: #000000;
background-color: #00ffdd;
width: 110px;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
PADDING-LEFT: 0px;
}

.small_button:active  {
font-size : 12px;
color: #000000;
background-color: #ff0000;
width: 110px;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
PADDING-LEFT: 0px;
}

div.message div
{
   text-indent: 20px;
}

div.message:hover{
	background:yellow;
	}
	
p:hover{
	background:yellow;
	}
	
p{
	background:lime;
	}

hr.message{
	border: 1px dotted lime;
}


Alors ma question est la suivante... est ce normal ou bien est ce que j'ai fait une boulette quelque part...

par ce que là... moi je seche... Smiley eek

Par avance merci de vos réponses

.... ou pas Smiley langue
Modifié par wizgool (23 Feb 2009 - 13:35)
Si mes souvenirs sont bons, la spécification CSS 2.1 ne précise pas quels sont les éléments HTML sur lesquels la pseudo-classe "hover" s’applique. En théorie, elle devrait donc être applicable à tous les éléments. Cependant, la spécification précise que les outils de navigation ne sont pas tenus de remettre en forme la page en cours d'affichage lors des transitions provoquées par les pseudo-classes.

En pratique, IE7 ne tolère (il me semble) cette pseudo-classe que sur les ancres. Si ton problème se limite au survol de ton bouton, tu peux toujours le remplacer par une ancre (ex : <a href="#" class="small_button">Test</a>) qui soumettra tout aussi bien le formulaire s'il y en a un.
Non c'est IE6 qui ne prend en compte les hover que sur l'élément a.

Par contre, deux piste qui ne mèneront peut-être pas à la résolution de ton problème, mais à la conception d'un meilleur code :

Le doctype est mauvais (fais une recherche sur le site pour trouver la syntaxe correcte).

enlève les espaces inutiles dans les balises :

Pas bien : 
<link rel = "stylesheet" type = "text/css" href = "test.css" />
<div class = "message">
	<div class = "message">test sur hover</div>
	<div class = "message">test sur hover</div>
</div>


Bien : 
<link rel="stylesheet" type="text/css" href="test.css" />
<div class="message">
	<div class="message">test sur hover</div>
	<div class="message">test sur hover</div>
</div>
Laurie-Anne a écrit :
Non c'est IE6 qui ne prend en compte les hover que sur l'élément a.

Par contre, deux piste qui ne mèneront peut-être pas à la résolution de ton problème, mais à la conception d'un meilleur code :

Le doctype est mauvais (fais une recherche sur le site pour trouver la syntaxe correcte).

enlève les espaces inutiles dans les balises :

Pas bien : 
<link rel = "stylesheet" type = "text/css" href = "test.css" />
<div class = "message">
	<div class = "message">test sur hover</div>
	<div class = "message">test sur hover</div>
</div>


Bien : 
<link rel="stylesheet" type="text/css" href="test.css" />
<div class="message">
	<div class="message">test sur hover</div>
	<div class="message">test sur hover</div>
</div>


Et bien merci des réponses, j'ai pu trouver la soluce grace à toi, c'etait le doctype qui posait problème...

et maintenant j'ai toute ma mise en page à revoir Smiley langue

en attendant je prend bonne note du coup des espaces... il me semblait avoir lu le contraire quelquepart....mais je vais rectifier Smiley smile

Encore merci pour votre aide Smiley biggrin
Sujet clos
Aller à