0
http://www.webdevout.net/test?013&rawPourquoi IE affiche-t-il les cases grises sous le contenu, au lieu de ci-dessus?
Réduire la fenêtre dans IE6/7 pour voir de quoi je parle.
J'ai supprimé toutes les parties critiques de mon application (à devoir), mais en gros ces boîtes grises sont censées être des boîtes déroulantes. Dans les navigateurs modernes, cela fonctionne bien ... mais dans IE6/7, le contenu de la page l'éclipse (ainsi que certains des liens de navigation) .... des idées? Je peux donner plus d'informations nécessaires, faites le moi savoir.
(page & Code @ lien ci-dessus, et également affiché ici pour la facilité)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0; }
body {
font-size: 62.5%; }
/* END OF RESET ------------------------------ */
/* ======= GENERAL SITE STYLES ==================== */
a img {
border: none; }
h1 {
font-weight: bold;
font-size: 19px;
color: #333;
margin-bottom: 20px; }
h2 {
margin: 10px 0;
font: bold 11px Verdana;
color: #333; }
html, body {
height: 100%; }
body {
font-family: Verdana;
border: 0;
width: 100%;
position: relative; }
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; }
form label {
display: block; }
.page_defaults {
height: 100%;
width: 100%;
position: relative; }
#header {
width: 100%;
height: 60px;
padding: 15px 0;
background: #FFFFFF;
position: relative; }
#header_nest {
float: right;
margin-right: 5%; }
#header_nest img {
display: inline-block;
vertical-align: middle; }
body.ie6 #header_nest img, body.ie7 #header_nest img {
display: inline; }
#header_nest p {
font: normal 10px Verdana;
display: inline-block;
vertical-align: middle;
text-align: center;
margin: 0 25px 0 15px; }
body.ie6 #header_nest p, body.ie7 #header_nest p {
display: inline; }
ul#nav {
padding: 0 0 0 20px;
position: relative;
}
ul#nav li {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana, sans-serif;
list-style-type: none; }
body.ie6 ul#nav li, body.ie7 ul#nav li {
display: inline; }
ul#nav li h2 {
display: inline-block;
vertical-align: middle;
z-index: -1;
margin: 0;
font: normal 11px Verdana, sans-serif; }
body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
display: inline; }
ul#nav li h2 a {
display: inline-block;
vertical-align: middle;
z-index: 4;
text-decoration: none;
position: relative;
color: #999;
padding: 20px 10px 20px 40px;
white-space: nowrap; }
body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
display: inline; }
ul#nav li.mega {
position: relative; }
ul#nav li.mega div {
position: absolute;
z-index: 5;
padding: 10px;
border-left: 1px solid #999;
border-right: 3px solid #999;
border-bottom: 2px solid #999;
top: 52px;
left: 0;
margin-right: 40px;
background: #CCC;
}
ul#nav li.mega div h3 {
display: inline;
font: bold 13px Verdana, sans-serif; }
ul#nav li.hovering div {
display: block; }
ul#nav img {
position: absolute;
z-index: -1;
top: 50%;
margin-top: -12px;
left: 8px; }
/* --------- Main portion (content, sidebar) ---------- */
#wrap {
min-height: 100%;
position: relative; }
#main {
overflow: auto;
padding-bottom: 150px;
position: relative; }
#content-wrapper {
float: left;
width: 100%; }
#content {
padding: 40px;
overflow: auto;
position: relative; }
#contentwrapper {
float: left;
min-height: 100%;
overflow: hidden;
width: 100%;
position: relative; }
/* NEW STYLES ------------------------- */
body.ie7 #main {
display: table;
height: 100%; }
body.ie6 #main {
float: left; }
body.ie6 #wrap {
display: table;
height: 100%; }
.dataset {
position: relative; }
.fg-toolbar {
clear: both; }
/* --------- Bottom portion (footer) -------------------- */
#footer {
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
background: #333; }
</style>
</head>
<!--[if lte IE 6]>
<body class="ie6">
<![endif]-->
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gte IE 8]><!-->
<body>
<!--<![endif]-->
<div id="" class="page_defaults grp_dash">
<div id="wrap">
<div id="header">
<div id="header_nest">
<p>Hello, <strong>User</strong><br />
<a href="/help/contact/">Get Help</a> |
<a href="/logout/">Logout</a>
</p>
</div>
</div>
<ul id="nav">
<li class="mega">
<h2><a href="/">Test</h2></li>
<li class="mega" style="z-index: 40;">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>
</p>
</div>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
</div>
</li>
<li>
<h2><a href="#">Test</a></h2>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
<h3>Test</h3>
<p>
<a href="#">Test</a>
</p>
<p>
<a href="#">Test</a>
<p>
</div>
</li>
</ul>
<div id="main">
<div id="contentwrapper">
<div id="content">
<h1>Page Title</h1>
<h2>Subtitle</h2>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
</ul>
</div>
</div>
</body>
</html>
Parce que IE déteste tout, y compris sa propre existence abominable. –