Lightbox2 und IE Problem

F

Frosty5o

Mitglied
Hi Leute, hab mal eine Frage,

hat jemand von euch Erfahrung mit Lightbox, verwende es auf meiner Seite und läuft auch "fast" alles bis im IE. Im FF und Safri werden die Bilder korrekt angezeigt und der Hintergrund verfärbt sichflächendeckend schwarz, nur im IE geht er nicht bis ganz nach unten auf der Page. Konnte mit google das problem nicht lösen. Anscheinend hat es damit zu tun, das dass .css der Lightbox sich mit dem bodyeintrag im normalen .cc nicht verträgt, habe aber so ziemlich alles angepasst. Villeicht weiß jemand einen Rat.

Hier geht´s zum problem, einfach auf ein Bild klicken: http://webgestaltung.kilu.de/index.php?site=maya

Gruß
 
Hm, das ist strange, vielleicht könnte noch wer testen, hab grad nen Bekannten im ICQ testen lassen, bei dem wird es nicht richtig dargestellt, also der Schatten bedeckt da die Seite im IE nur ca 20%. Leider kann mir der nicht helfen. Komisch.
 
Hi,

und wie verhält sich der IE, wenn du das Original-Stylesheet der Lightbox nutzt, anstelle deiner modifizierten Fassung?

Denn grundsätzlich gibt's im IE keine derartigen Probleme.

mfg Maik
 
Moin,

die Ursache, dass sich beim Öffnen der Lightbox das Abdunkeln nicht bis zum Seitenende erstreckt, findet sich in der absoluten Positionierung von #container, mit der der Block im Viewport horizontal zentriert werden soll:
CSS: 
#container {
...
position: absolute;
left: 50%;
width: 1000px;
margin-left: -500px;
top: 0;
...
}

Diese Positionierungstechnik zur horizontalen und vertikalen Zentrierung eines Elements (siehe z.B. http://d-graff.de/selfhtml/center1.html) birgt zusätzlich ein grundsätzliches Darstellungsproblem in den Browsern, wenn ihre Fenstergröße die Boxdimension unterschreitet. In deinem Fall verschiebt sich der linke Seitenbereich aus dem Fenster, wo er nicht mehr zugänglich ist.

Verwende stattdessen diese Formatierung, um die Box im Fenster horizontal zu zentrieren, und das Problem in der IE-Familie (6 - 8) zu fixen:
CSS: 
#container {
margin:0 auto;
min-height:100%;
height:auto !important;
height:100%;
position:relative;
width:1000px;
background:url(images/3cols.png) repeat-y;
}

Desweiteren fehlt in diesem Regelblock das Semikolon am Ende der height:100%-Deklaration:
Code: 
body, html {
background-color: #2E2E2E;
color: #D8D8D8;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
font-size: 11px;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background:url(images/bg.png) repeat;
}


Und wenn du zu Beginn deines Stylesheets mit dem Universalselektor * die Außen- und Innenabstände auf null zurücksetzt, brauchst du dies in den nachfolgenden Selektoren nicht mehr zu wiederholen, da er alle im HTML-Dokument enthaltenden HTML-Elemente beinhaltet ;)

mfg Maik
 
Danke, hat funktioniert. Versteh nur nicht wieso der ladekreis der lightbox im FF in der Mitte des Bildes lädt und im IE an ner anderen Position. (habs im Lightbox .css festgelegt). Interpretiiert der IE das anders?

Im Lightbox css siehts so aus:

#loading{ position: absolute; top: 40%; left: 45%; height: 50%; width: 100%; text-align: center; line-height: 0; }
 
Ich erkenne da keinen Unterschied zu den anderen Browsern. Dafür positionieren aus der IE-Familie der IE6 und IE7 die Vorladegrafik auf der X-Achse außermittig, was der Positionsangabe left:45% (im Original left:0) geschuldet ist, denn eigentlich wird die Grafik mittels text-align:center im Anzeigebereich horizontal zentriert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück