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.

[trotters213]

Le hover n'est pas revconnu sous IE lorsqu'il est utilisé sur aute chose qu'un lien (a), c'est peut-être de là que vient ton souci sous IE.

Pour ce qui est de Opera, tu pourrais nous montrer le code HTML de tes th et si possible le CSS qui va avec.

Tu devrais peut-être passer ta page aux validateurs CSS et XHTML afin de voir que ça ne soit pas une erreur HTML ou CSS qui ne génère une erreur sous Opera

PS : en ce qui concerne les background-color de ton CSS, tu utilsies des valeurs (InfoBackground, InactiveCaptionText) qui n'existent pas.