nicht angemeldet
Bildergalerie mit css & z-index
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;
}
-
Hi,
Den HTML und CSS Code habe ich angehängt.
Abgesehen davon, dass Online-Beispiele für einen schnellen Blick auf's Problem grundsätzlich von vielen bevorzugt werden, sind sie noch mal besser für die Nachvollziehbarkeit, wenn viele Bildressourcen drin vorkommen. Die hätte ich nämlich immer noch nicht vorliegen, selbst wenn ich deinen Code per Copy&Paste testen würde; der Aufwand dafür, einen Testcase zu erstellen, an dem das Problem wirklich anschaulich nachvollziehbar wird, wäre hier also für jeden einzelnen Mitleser hoch - weshalb es selbstverständlich sein sollte, dass du ihn uns abnimmst, in dem du ein Online-Beispiel zur Verfügung stellst.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Den HTML und CSS Code habe ich angehängt.
Abgesehen davon, dass Online-Beispiele für einen schnellen Blick auf's Problem grundsätzlich von vielen bevorzugt werden, sind sie noch mal besser für die Nachvollziehbarkeit, wenn viele Bildressourcen drin vorkommen. Die hätte ich nämlich immer noch nicht vorliegen, selbst wenn ich deinen Code per Copy&Paste testen würde; der Aufwand dafür, einen Testcase zu erstellen, an dem das Problem wirklich anschaulich nachvollziehbar wird, wäre hier also für jeden einzelnen Mitleser hoch - weshalb es selbstverständlich sein sollte, dass du ihn uns abnimmst, in dem du ein Online-Beispiel zur Verfügung stellst.
MfG ChrisB
Hallo ChrisB.
Ich dachte den Code zu sehen, würde den meisten Cracks hier reichen.
Sorry, mein Fehler...Ich habe die Gallerie jetzt mal Online gestellt.
GalerieBitte das Ganze im IE 7 & Firefox betrachten... Dann fällt es ins Auge. ;-)
Vielen Dank noch mal,
logo
-
Hallo ChrisB.
Ich dachte den Code zu sehen, würde den meisten Cracks hier reichen.
Sorry, mein Fehler...Ich habe die Gallerie jetzt mal Online gestellt.
GalerieBitte das Ganze im IE 7 & Firefox betrachten... Dann fällt es ins Auge. ;-)
Vielen Dank noch mal,
logo
N'abend zusammen.
Hat denn wirklich niemand eine Idee, wie ich mein Problem lösen könnte?
Über ein Feedback würde ich mich sehr freuen.MfG,
logo
-
-