Discussion :

[BiAiB]

Bonjoir.

j'ai implante des infobulles en css qui sont censees s'afficher au survol d'une zone.


le code ressemble a ca :

Code :

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

1
2
3
4
5
6
7
8
<span class="bubbleBoxContainer">
  <a href="#">
    <img src="pics/icons/genres/adventure.png" alt="Adventure" class="Icon"/>
  </a>
  <div class="bubble">
    le contenu de ma bulle magique
  </div>
</span>

et voila le 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
.bubbleBoxContainer {
	position: relative;
	cursor: help;
	font-size: 100%;
}
.bubbleBoxContainer .bubble {
	display: none;
	position: absolute;
	border: thin solid Black;
	background-color: InfoBackground;
	padding: 0.81em;
	left: 2.5em;
	top: 1.46em;
	width: 17em;
	font-size: smaller;
	text-decoration: none;
	white-space: normal;
	text-align: justify;
	z-index: 250;
}
.bubbleBoxContainer:hover {
	background: none;
	background-color: InactiveCaptionText;
}
.bubbleBoxContainer:hover div.bubble {
	display: block;
}

Sous Firefox, c'est niquel, IE, y'a des couilles mais peu importe, par contre Opera c'est de la chiasse, la bulle fait n'importe quoi , elle s'affiche parfois derriere les <th> des tableaux, parfois devant, parfois elles sont coupees on ne sait trop comment .. :S et le z-index n'y change rien du tout.

Voila un screen :



Merci d'avance pour toutes vos solutions.