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;
}