Discussion :

[Myfred]

Bonjour à tous,
j'ai un ptit problème qui commence à me faire bouillonner.
Je vous explique:
j'ai trois block positionnés en relative float:left; dans le premier j'ai un block positionner en absolute qui est legerement décalé à gauche et haut (infobulle...).
Je sais pas pourquoi, sous FF ya pas de pb mais sur IE le block positionné en absolute (qui chevauche donc les deux premiers block) passe dessus le premier block (son conteneur), donc normal, mais en dessous du deuxieme block...
Il est pourtant hors du flux pourquoi il se met en dessous?
j'ai essayer avec les z-index, rien à faire...

une tite image:

[BnA]

On dit souvent qu'une image vaut mieux qu'un long discours, mais bon, l'informatique étant ce qu'elle est, ce précepte n'est pas applicable ici...

Tu nous montre ton code?

[Myfred]

mon code simplifié:

html (entouré par une boucle en php)
le code suivant represente un block complet avec une image

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
 
 
<div id="portfolio">
<div style="position: relative; float: left;  margin-bottom:10px;">
	<ul>
		<li>
			<a href="lienaupif.html" target="_blank" alt="" >
				<img src="img/portfolio/test.jpg" id="img-valeur-dynamique" class="portimg"">			
			</a>
		</li>
		<li class="orange2">
			<img src="img/test.jpg" /><a href="test.html" target="_blank" title="test">c'est un test</a>
		</li>
	</ul>
 
 
		<!-- bulle -->
		<div class="divport" id="bulle-val-dynamique" >
			<ul>
				<li class="divport-li1">
					<img src="img/haut-bulle.png" />
				</li>
				<li class="divport-li2">
					<dl>
						<dt>
							valeur dyn php
						</dt>
						<dd>
							valeur dyn php
						</dd>
					</dl>
				</li>
				<li>
					<img src="img/test.png" />
				</li>
			</ul>
 
		</div>
		<!-- Fbulle -->
 
</div>
</div>

css:

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
 
#portfolio
{
	margin-left: 17px !important; 
	margin-left: 15px;
	margin-top:10px; 
	width: 552px; 
	text-align: left;
}
 
#portfolio li{list-style-type: none; }
 
.portimg {border: 2px solid #fff;}
 
#portfolio a
{
	color: #fff;
	text-decoration: none;
}
 
.divport
{
 
	position: absolute; 
	z-index:150; 
	left:70px; 
	bottom:30px;
	width: 258px; 
 
	display: none;
}
 
.divport li
{
	list-style-type: none; 
	width: 258px; 
}
 
.divport-li1
{
	height:3px; 
	line-height:3px; 
	font-size:1px;
}
 
.divport-li2
{
	background-image:url(../img/milieu-bulle.png); 
	background-repeat: repeat y;
}
 
.divport dl{margin: 0 2px 0 3px; width: 248px;}
 
.divport dt
{
	color: #FF9500; 
	font-weight: bold;
}
 
.orange2
{
	background-color: #ff9500;
	text-align: right;
	margin-top:3px;
	vertical-align: middle;
}

[BnA]

Tu as un double "" à la fin de la ligne

Code :

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

1
2
 
<img src="img/portfolio/test.jpg" id="img-valeur-dynamique" class="portimg"">

C'est peut-être ça qui pose problème...

Check et dis-moi quoi!!

[Myfred]

non c'est pas desolé, c'est une erreur de frappes, j'ai enlever du js et du php pour alléger le code.
En faite j'ai trouvé une technique pour que ca marche, dans le div ou ya le float left je dois mettre z-index à 100 et a chaque enregistrement faire z-index : n-1;
je savais pas que les floats avait un empilement comme les positions absolutes...
C'est pas terrible comme technique, mais bon ca marche et je vois pas comment faire autrement