Problem mit Bildergalerie & CSS

[logoh]

Einen schönen guten Morgen.

Schon mal vorweg:
Ich habe das Problem schon woanders geschildert, doch habe ich dort keine Hilfe erhalten und wende mich jetzt Euch und Eurem Rat zu:

Ich habe eine Bildergalerie mittels CSS(nach)gebaut und habe nun das Problem, daß die Vorschaubilder 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.


Vielen Dank für die Hilfe,

logo

Ps. Ich habe den CSS -Code angehangen.
Der HTML Code ist ja im Link zu sehen.

*{
padding:0;
margin:0;
}
body {
background:url("bilder/swl.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;
}

[sejuma]

Versuch's mal hier mit einem höheren z-index:

.bilder_kasten a:hover .vorschau

[logoh]

Versuch's mal hier mit einem höheren z-index:

.bilder_kasten a:hover .vorschau

Hallo sejuma.

Leider hat das keinen Erfolg. Die Darstellung im IE 7 passt immer noch nicht.

Trotzdem vielen Dank,

logo

[sejuma]

Hab jetzt leider keine Zeit.
Sieh mal hier. Da ist so was ähnliches mit Spezialangaben für den IE (blauer CSS-Code).
Vielleicht hilft dir das weiter.

[logoh]

Hab jetzt leider keine Zeit.
Sieh mal hier. Da ist so was ähnliches mit Spezialangaben für den IE (blauer CSS-Code).
Vielleicht hilft dir das weiter.

Vielen vielen Dank!!

Jetzt funzt es.

Habe eine zusätzl. CSS Datei als Conditional Comment eingebunden.

*+html .bilder_kasten a:hover {
 z-index: 1;}
*+html .bilder_kasten dt {
position: static;
padding-bottom:4em;
}
*+html .bilder_kasten a {
position: relative;
}

Nochmals vielen Dank,

logo

[Boris]

Dein CSS ist voller Logikfehler, da ist es eigentlich Zufall, wie ein Browser das darstellt.

Das CSS Boxmodell addiert alle Angaben wie width, margin, padding und border, sprich: deine Elemente sind über 100% groß oder über 100% breit, z.B. der #wrapper, #header und #footer.

Vielleicht solltest du das grundlegend erstmal in Ordnung bringen

[logoh]

Hallo Boris.

Verstehe den Einwand nicht so recht. Alle Browser stellen die Seite wunschgemäss dar.
Wenn ich die width - Angaben entferne, verhalten sich die Container nicht wie gewollt.

Mit width:100% zwinge ich doch den betreffenden Container die Breite des übergeordneten Containers anzunehmen, oder nicht?
Zumal 100% - 10px nur schwer zu errechnen ist. ;-)

Vielleicht kannst Du mir ja noch mal erklären, was Du meinst.

Grüße,

logo

[Boris]

Mit width:100% zwinge ich doch den betreffenden Container die Breite des übergeordneten Containers anzunehmen, oder nicht?

Alle Blockelemente (wie DIVs) nutzen bereits die volle, maximale Breite, die verfügbar ist.

Setzt du nun 100%, ist es quasi das gleiche. Vergibst du aber zu diesen erzwungenen 100% noch ein padding von 10px, dann sind das über 100% (100% + 10px) - und das ist falsch. Ob ein Browser das nun für dich "richtig" darstellt oder nicht, ist reiner Zufall.

Nimm die Breite von 100% einfach raus, fertig.

[logoh]

Hallo Boris.

Brauchte float nicht immer eine Breitenangabe?
Hier die 100%...
logo

[Boris]

float mit einer Breite von 100% hat nicht mal einen Sinn, ehrlich gesagt. Mit float bringst du ein Element dazu, links oder rechts zu stehen. Wozu soll ein Element links stehen, wenn es eh 100% breit ist?