Lightbox - Hintergrundproblem beim Scrollen
0 
Marian
Lightbox - Hintergrundproblem beim Scrollen
Hallo
ich habe folgendes Problem mit der Lightbox:
Der abgedunktelte Hintergrund füllt zwar den gesamten Bildschirm, bleibt aber "stehen" wenn ich auf einer Seite nach unten scrolle. Das bedeutet, habe ich eine Seite, auf der viele Vorschaubilder zu sehen und scrolle zu einem Bild nach unten, öffne dieses, hängt mein abgedunkelter Hintergrund zu weit oben und deckt den unteren Bereich nicht ab.
Dieses Problem tritt aber nur beim IE auf. Beim Firefox läuft die Geschichte ohne Probleme.
Muss irgendwas mit der Positionierung des abgedunkelten Hintergrunds sein.
Natürlich habe ich auch schon gegoogelt und bin darauf gestoßen, im Body Tag margin und padding auf 0 zu setzen. Bringt aber nix.
Ich arbeite mit css und habe dort und im Quelltext <Body> meiner Homepage margin und padding auf 0 gesetzt.
Wie gesagt der Bildschirm ist ja dunkel, nur wenn ich scrolle, hört der Hintergrund auf und deckt nicht mehr alles ab.
Vielleicht kann mir ja jemand von euch helfen.
Vielen Dank
-
Hallo Matze,
Der abgedunktelte Hintergrund füllt zwar den gesamten Bildschirm, bleibt aber "stehen" wenn ich auf einer Seite nach unten scrolle. Das bedeutet, habe ich eine Seite, auf der viele Vorschaubilder zu sehen und scrolle zu einem Bild nach unten, öffne dieses, hängt mein abgedunkelter Hintergrund zu weit oben und deckt den unteren Bereich nicht ab.
Dieses Problem tritt aber nur beim IE auf. Beim Firefox läuft die Geschichte ohne Probleme.
Muss irgendwas mit der Positionierung des abgedunkelten Hintergrunds sein.(Ohne nachgeguckt zu haben:) Der Hintergrund ist wahrscheinlich mit position:fixed positioniert. Das versteht der Internet Explorer 6 noch nicht. Was du versuchen könntest: die CSS-Eigenschaft top des Hintergrunds immer auf http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset@pageYOffset zu setzen. Setzt aber Javascript voraus und funktioniert deshalb nicht mit jedem Browser. (Setz das Script in Conditional Comments, andere Browser brauchen es nicht)
Viele Grüße aus Freiburg,
Marian--
Microsoft broke Volkswagen's world record: Volkswagen made only 22 million bugs!
<!--[if IE]><meta http-equiv="refresh" content="0; URL=http://www.getfirefox.com"><[endif]-->-
Hallo Marian,
der Hintergrund müsste in der lightbox.css unter #overlay definiert sein. Habe dort schon ein bißchen rumgespielt. Dort ist er aber mit position: absolute angegeben.
Ich poste Dir hier jetzt mal die lightbox.css. Vielleicht erkennst du das Problem.#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}#imageContainer{
padding: 10px;
}#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }#overlay{
position: absolute;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}* html>body .clearfix {
display: inline-block;
width: 100%;
}* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}Vielen Dank für Eure Hilfe.
-