28220 sujets

CSS et mise en forme, CSS3

Z-index et internet explorer

Je souhaite utiliser le z-index pour afficher une petite image jpg lorsque l'utilisateur passe la souris sur une icone.

Cela marche très bien avec Firefox mais pose un problème avec IE : les tag html de type <select > vienne au dessus de mon z-index.

Ma question : existe-t-il un moyen d'avoir un comportement "normal" de IE, le meme que celui de firefox ?

voici un exemple de code qui ne marche par bien avec IE et bien avec firefox (exemple tiré de http://www.meyerweb.com/ :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

-->
</style>
</head>
<body>

<div id="links">
<a href="http://www.meyerweb.com/">Home<span> The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</span></a>
<a href="http://www.meyerweb.com/eric/css/">Links<span> A collection of things which interest me, and might interest you</span></a>

<a href="http://www.w3.org/">Away<span> Who knows?  Could be anywhere; you clicks the link and you takes your chances!</span></a>
<a href="http://www.meyerweb.com/eric/">Eric<span> He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</span></a>
<a href="http://www.meyerweb.com/kat/">Kat<span> She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what <em>can't</em> she do?</span></a>
<a href="http://www.meyerweb.com/other/">Other<span> Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</span></a>
<br/>
			<select class="txt05" id="" name="" size="1">
				<option value=""></option>
				<option selected="selected" value="Test">Test 1</option>
				<option value="Test">Test 4</option>
				<option value="Test">Test 3</option>
		</select>
</div>

</body>
</html>
Sujet clos
Aller à