logo: Bildergalerie mit css & z-index

Beitrag lesen

Einen schönen guten Morgen.

Ich habe eine Bildergalerie mittels CSS(nach)gebaut und habe nun das Problem, daß die Vorschaublder im IE 7 nicht ordentlich über dem Thumbs angezeigt werden. Teilweise liegen sie darunter, teilweise darüber.
Der Firefox, Opera, IE 8 und Apple Safari verhalten sich völlig in Ordnung. Es scheint also ein IE 7 - Problem zu sein.

Irgendwie kommt der IE mit dem vergebene Reihenfolgen (z-Index) nicht klar.

Den HTML und CSS Code habe ich angehängt.

Die Thumbs habe die Größe: 120 x 80
Vorschaubilder: 400 x 267

Vielen Dank für die Hilfen,

logo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
  
  
<html>  
<head>  
   <title>Bildergalerie</title>  
   <meta http-equiv="X-UA-Compatible" content="IE=7">  
   <meta name="author" content="logoh">  
   <meta name="editor" content="html-editor phase 5">  
   <link rel="stylesheet" href="style.css" type="text/css">  
  
</head>  
  
<body>  
   <div id="wrapper">  
      <div id="header">  
         <h1>Bildergalerie</h1>  
      </div>  
  
      <div id="content">  
         <dl class="bilder_kasten">  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt="" class="erster"><img src=  
            "vorschau/pr_dummie.JPG" alt="Bild1" class="vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/01.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt="" class="erster"><img src=  
            "vorschau/pr_dummie.JPG" alt="Bild2" class="vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/02.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt="" class="erster"><img src=  
            "vorschau/pr_dummie.JPG" alt="Bild3" class="vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/04.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="Bild4"  
            class="vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/05.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="Bild5"  
            class="vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/06.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/07.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/08.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/09.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/10.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/12.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/13.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/14.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/15.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/16.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/17.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="downloads/18.zip">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/th_dummie.JPG" alt=""><img src="vorschau/pr_dummie.JPG" alt="" class=  
            "vorschau"></a>  
            </dt>  
  
            <dd><a href="#">download</a>  
            </dd>  
  
            <dt><a href="#"><img src="thumbs/download.JPG" alt="alle Bilder zum download"></a>  
            </dt>  
  
            <dd><a href="#">Download aller Bilder (Achtung ca.95 Mb !!)</a>  
            </dd>  
         </dl>  
  
  
      </div>  
  
      <div id="footer">  
         <p id="adr">Copyright by ...<br>  
         <a href="mailto:logoh@gmx.net">Mail</a><br>  
         29.09.2009</p>  
      </div>  
   </div>  
</body>  
</html>
*{  
padding:0;  
margin:0;  
}  
body {  
background: url(../bilder/schwarz-weiss-lang.jpg)top left repeat-x;  
}  
html{  
font-family:verdana;  
font-size:12px;  
  
}  
  
#wrapper {  
margin-top:30px;  
margin:0 auto;  
/*border:1px solid red;*/  
width:75%;  
height:100%;  
}  
#header{  
text-align:center;  
border:2px solid #6F6F6F;  
width:100%;  
background:#C0C0C0;  
margin-top:2em;  
}  
#content {  
border:2px solid #6F6F6F;  
float:left;  
width:100%;  
background:#DFDFDF;  
border-top:2px solid #6F6F6F;  
height:100%;  
  
}  
#footer {  
float:left;  
height:4em;  
width:100%;  
background:#C0C0C0;  
margin-bottom:4em;  
border-bottom:2px solid #6F6F6F;  
border-left:2px solid #6F6F6F;  
border-right:2px solid #6F6F6F;  
}  
h1 {  
font-size: 18px;  
padding:.5em;  
}  
a {  
text-decoration:none;  
color:#000;  
}  
a:hover{  
text-decoration:underline overline;  
}  
a:visited{  
text-decoration:line-through;  
}  
/*********************Galerie**********************/  
  
.bilder_kasten a .vorschau {  
display:none;  
}  
.bilder_kasten .vorschau{  
width:400px;  
height:266px;  
background: #fff;  
border:3px solid #aaa;  
  
}  
  
.bilder_kasten a:hover .vorschau {  
display:block;  
position:absolute;  
top:-50px;  
left:90px;  
z-index:1;  
}  
  
.bilder_kasten dt img  {  
vertical-align:bottom;  
background: #fff;  
border:3px solid #aaa;  
padding: 2px;  
width: 120px;  
height: 80px;  
}  
  
dl {  
padding-top:2em;  
float:left;  
text-align:center;  
padding-left:5em;  
}  
dt,dd {  
position:relative;  
width:13em;  
float:left;  
}  
dt {  
margin-bottom:4em;  
}  
dd {  
margin:100px 0 0em -13em;  
}  
 /*************************************************/  
#adr {  
font-size:80%;  
padding:.5em;  
text-align:center;  
}  
#adr a {  
padding-top:1em;  
font-size:120%;  
text-align:center;  
}  
.text {  
clear:both;  
padding:.8em;  
color:#A00020;  
}