Opacité des enfants sous IE [Résolu]

SpaceFrog · 08/12/2011, 09h57

J'ai un menu JQuery qui ne fonctionne pas correctement sous IE

Les enfants (#A à #J) n'héritent pas du display none de leur parent ???

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>Nouvelle page 1</title>
    <style type="text/css">
html, body {
      margin:0;
	padding:0;}
body {	
	width:100%;
	height:100%;
	background-color:#137CB5;
	}
#navimg {
	border:0;
	margin:0;
	padding:0;
	background:url('../Pics/gammes_2012_c.jpg') no-repeat;
	height:137px;  
	position:relative;
	width:1024px;
	margin:auto;
	display:block;
	}
 
#A, #B, #C, #D, #E, #F, #G, #H, #I, #J {
	top: 26px;
	position : relative !important;
	width:10%;
	height:108px;
	display:none;
	float:left;
	background-color:#ffffff;
	cursor:pointer;
	}
.even, .odd {
	position: absolute;
	margin: 5px 0;
	text-align: center;
	display:block;
	height:auto;
	width:100%;
	font-family: verdana;
	}
 
.odd {	
 
	bottom:0;
 
}
 
</style> 
<script type='text/javascript'>
 $(function(){
 
 $('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').css({ display:'block',opacity: 0 })
									   .mouseenter(function(){
									   				      $(this).stop(true).fadeTo(500,0.45)} )
									   .mouseleave(function(){
			      										$(this).stop(true).fadeTo(1200,0)} );
})
 </script>
</head>
<body>
<div id="navimg" >
	<div id="A"><div class="odd">Diffusion</div></div>
	<div id="B"><div class="even">Registres et régulateurs</div></div>
	<div id="C"><div class="odd">Gaines rigides, flexibles ...</div></div>
	<div id="D"><div class="even">Supportage et fixations</div></div>
	<div id="E"><div class="odd">Protection incendie</div></div>
	<div id="F"><div class="even">Produits d'isolation</div></div>
	<div id="G"><div class="odd">Filtration d'air</div></div>
	<div id="H"><div class="even">Outillage à main</div></div>
	<div id="I"><div class="odd">Caissons centrales</div></div>
	<div id="J"><div class="even">Batteries terminales et regulation</div></div>
</div>
</body>
</html>

Sous ffx et chrome aucun souci ...

A noter aussi que IE ne sait pas gérer un pourcentage de largeur qui ne donne pas un compte rond ... sous IE il y a sur certain divs un petit décallage...
Sous FFX et chrome aucun souci ...

SpaceFrog · 08/12/2011, 10h13

Haaaaaaaaaaaa
ça vient de l'affichage de compatibilité IE7 IE8

j'ai rajouté

Code :

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

    <meta http-equiv="X-UA-Compatible" content="IE=7">

et ça passe ...

mais si vous mettez

Code :

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

    <meta http-equiv="X-UA-Compatible" content="IE=8">

les divs enfant n'heritent ni de l'opacité, ni du display none !!

Encore une victoire de IE

SpaceFrog · 08/12/2011, 13h33

Bon ben un gros merci à Cahnory qui a trouvé la vraie parade ...

En fait c'est une histoire de z-index ...

les deux doivent avoir un z-index déclaré, et ce à partir d'IE 8

08/12/2011, 10h13	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	Haaaaaaaaaaaa ça vient de l'affichage de compatibilité IE7 IE8 j'ai rajouté Code : Sélectionner tout - Visualiser dans une fenêtre à part <meta http-equiv="X-UA-Compatible" content="IE=7"> et ça passe ... mais si vous mettez Code : Sélectionner tout - Visualiser dans une fenêtre à part <meta http-equiv="X-UA-Compatible" content="IE=8"> les divs enfant n'heritent ni de l'opacité, ni du display none !! Encore une victoire de IE __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	10

08/12/2011, 13h33	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	Bon ben un gros merci à Cahnory qui a trouvé la vraie parade ... En fait c'est une histoire de z-index ... les deux doivent avoir un z-index déclaré, et ce à partir d'IE 8 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email