28172 sujets

CSS et mise en forme, CSS3

Bug IE9 et infobulle CSS ?

Hello ! J'ai besoin de l'avis d'expert es CSS Smiley smile
J'ai un petit souci avec une infobulle en CSS (avec un effet de rotation CSS3, technique trouvée chez css3create : http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS) qui ne s'affiche pas sur IE9. Cela semble être un bug du navigateur, j'ai tout essayé mais sans résultat Smiley decu

Si vous regardez http://roro.yusumi.com/test/ avec un Firefox ou Webkit, aucun problème : les 2 liens (machin1 et machin4) affichent une infobulle au survol.
Sous IE9, seul le 1er lien (machin1) affiche l'infobulle. Pour faire afficher l'infobulle avec le 2ème lien (machin4), il faut viser très précisément le soulignement du lien !

J'ai trouvé plusieurs façons pour que IE affiche correctement l'infobulle, mais c'est juste pour tester. Je ne souhaite pas modifier ces valeurs Smiley smile

Notamment dans le div#content_offres :
div#content_offres {
	width: 70%;
	float: left;
}

Si je met un width à 100% ou si je l'enlève, IE m'offre le comportement attendu.

Dans le div#content_offres .offre li a + ul :
div#content_offres .offre li a + ul {
	position:absolute;
	margin: -3em 0 0 13em;
	width: 25em;
....
}

Si j'enlève le "width: 25em;" ou si je réduis le width, IE m'offre le comportement attendu.

Enfin dans le div#content_offres .offre :
div#content_offres .offre {
	width: 45%;
	float: left;
...
}

Si j'enlève le "float: left;", IE m'offre le comportement attendu.

Le HTML valide : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Froro.yusumi.com%2Ftest%2F%23
Le CSS valide presque mais je met ça sur le compte des propriétés CSS3 : http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Froro.yusumi.com%2Ftest%2F%23

Après avoir passé plusieurs heures sur ce truc, peut-être que certains d'entre vous trouveront tout de suite ce que je ne vois pas Smiley lol Je ne suis pas convaincu que ce soit un bug de IE...
Modifié par romaint (07 Oct 2012 - 19:50)
72 vues mais pas de réponse, je vois que mon problème n'est pas aussi évident que ça Smiley smile

Si certains ont la flemme d'aller voir, je vous met le source complet ici :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Truc.fr</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="icon" type="image/png" href="/images/favicon.png" />
	<link rel="stylesheet" media="screen" type="text/css" href="style/default.css" />
	<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="cadre">
	<div id="content">
		<div id="content_offres">
			<div class="offre hebergement">
				<h2>truc1</h2>
				<ul>
					<li><a href="#">machin1</a><ul><li>bla1</li><li>bla2</li></ul></li>
					<li>machin2</li>
				</ul>
			</div>
			<div class="offre messagerie">
				<h2>truc2</h2>
				<ul>
					<li>machin3</li>
					<li><a href="#">machin4</a><ul><li>bla3</li><li>bla4</li></ul></li>
				</ul>
			</div>
		</div>
	</div>
</div>

</body>
</html>


/* Divers */

html {
	font-size: 100%;
	margin: 0 0;
	padding: 0 0;
}

body {
	margin: 0 0;
	padding: 0 0;
	font-size: 0.8em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background : #DCE0DF;
	color : #777;
}


a:link, a:visited {
	color: #444;
/* 	text-decoration: none; */
}

a:hover, a:active {
	color: #777;
/* 	text-decoration: none; */
}

/* Encadrés */

div#content_offres {
	width: 70%;
	float: left;
}

div#content_offres .offre {
	width: 45%;
	float: left;
	margin: 2em 2% 2em 2%;
	border: #aaa solid 0.1em;
	background-color: #f2f2f2;
	-moz-box-shadow: -1px -1px 0 #ddd, -1px -1px 0 #ddd inset;
	-webkit-box-shadow: -1px -1px 0 #ddd, -1px -1px 0 #ddd inset;
	box-shadow: -1px -1px 0 #ddd, -1px -1px 0 #ddd inset;
	border-radius: 10px;
}

div#content_offres .offre h2 {
	text-align: center;
	font-size: 1.4em;
	padding: 0.2em 0 0em 0;
}

div#content_offres .offre ul {
	margin: 0 0 0 0;
	padding: 0;
	margin-bottom: 5em;
}

div#content_offres .offre li {
	padding-left: 3em;
	margin-bottom: 0.8em;
	list-style-type: none;
    background-image: url("../images/icons/tick.png");
    background-repeat: no-repeat;
    background-position: 1em top;
}

/*  Infobulles */

div#content_offres .offre li a {
    cursor: help;
}

div#content_offres .offre li a + ul {
    position:absolute;
	margin: -3em 0 0 13em;
	width:25em;
	min-height: 3em;
	
	color:#fff;
	text-shadow: 1px 1px 1px #777;

    background:rgba(170,170,170,.9);
    padding:0.8em 1em 0 0;
    border-radius:3px;
   -moz-box-shadow:0 0 2px rgba(170,170,170,.5);
   -webkit-box-shadow:0 0 2px rgba(170,170,170,.5);
	box-shadow:0 0 2px rgba(170,170,170,.5);

	-moz-transform:scale(0) rotate(-12deg);
	-webkit-transform:scale(0) rotate(-12deg);
	transform:scale(0) rotate(-12deg);

   -moz-transition:all .25s;
   -webkit-transition:all .25s;
	transition:all .25s;
	opacity:0;
}

div#content_offres .offre li a:hover + ul, div#content_offres .offre li a:focus + ul {
    -moz-transform:scale(1) rotate(0);
   -webkit-transform:scale(1) rotate(0);
    transform:scale(1) rotate(0); 
   opacity:1;
}

div#content_offres .offre li a + ul::before{
	content:'';
	position:absolute;
	top:2em;
	left:-6px;
	width:0;
	height:0;
	border-bottom:6px solid transparent;
	border-top:6px solid transparent;
	border-right:6px solid rgba(170,170,170,.9);
}

Modifié par romaint (08 Oct 2012 - 23:22)
A défaut de réponse, est-ce que quelqu'un pourrait me dire s'il constate le même "bug" sur son IE9 avec ma page ?
Merci Smiley smile
Bonjour,

fais F12 dans IE9, et inspecte un peu ta démo.

Ton ul qui sert de première infobulle se promène par-dessus ton lien machin4, et le recouvre. Ça n'est effectivement pas un bug navigateur, juste un problème de compréhension des positionnements.

Baisser ton infobulle en opacité ne suffit pas, tu devrais lui appliquer un display: none, et le repasser en block quand elle doit apparaître.
Edit: ou éventuellement mettre un positionnement relatif et un z-index inférieur..

Bonne continuation !
Modifié par Ten (13 Oct 2012 - 13:28)
Sujet clos
Aller à