• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Lightbox wird unterschiedlich ausgerichtet

U

Urbanicer

New member
Hi Leute,

ich hab mir für meine Homepage das Lightbox Script geholt, da es für mich das schönste und geeignetste is. Ohne Probleme konnte ich es nach Anleitung einbauen und bin auch ziemlich zufrieden damit.
Ein kleines Problem was auftritt ist nun die unterschiedliche Ausrichtung der geöffneten Lightbox in den verschiedenen Browsern.
Im Firefox öffnet sich die Box z.B. so weit unten dass man etwas runterscrollen muss, im IE hingegen ist ganz oben ausgrichtet.

Hier das unveränderte CSS-File:

PHP: 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#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-image: url('data:image/gif;base64,AAAA'); /* Trick IE into showing hover */ display: block }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url('http://www.koch-universum.de/images/prevlabel.gif') no-repeat left 15%; }
#nextLink:hover, #nextLink:visited:hover { background: url('http://www.koch-universum.de/images/nextlabel.gif') no-repeat right 15%; }

#imageDataContainer{ position: relative; font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#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; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Mein Wunsch ist es, die Box in jedem Browser mittig auszurichten, so habe ich also die Funktion "top: 50px;" bei "#outerImageContainer" und "#imageDataContainer" angewendet. Jetzt war die Box im IE zwar so ausgerichtet wie ich es wollte, aber im Firefox war sie noch weiter unten als zuvor.

Gibt es hier irgendeine Möglichkeit das zu vereinheitlichen für jeden Browser?
Also eine Angabe die es ermöglicht überall eine mittige Darstellung zu erzielen?

Hier die Seite auf der das Script läuft. Beim anklicken der Bilder sollten sie sich in der Box öffnen.
Momentan ist aber wieder die Standard CSS drauf, also der Code wie er oben im Beitrag eingefügt ist.

Koch-Universum.de - Magazin - Restaurantbericht - Wanga "Diner Club Lounge"

Danke

Gruß
Tobi
 
Zuletzt bearbeitet:
Da das Problem beim Originalscript nicht auftritt, vermute ich mal, dass es an Deiner Seite liegt, speziell daran, dass Du ein Problem mit den includes hast. Vor Deinem Doctype werden angezeigt:
PHP: 
<html>
<head>
Soweit ich das sehe, muss sich die Seite im Standardmode befinden, Deine Seite ist dadurch aber im Quirksmode.
 
Welche version der Lightbox benutzt du denn ?

Habe ähnliche Probleme mit dem download einer aktuelleren Version gelöst.
 
Zuletzt bearbeitet von einem Moderator:
Ersteinmal danke an alle die mir geholfen haben. Ich benutze die Lightbox 2, aber wie ich gesehen habe muss ich noch einiges überarbeiten am Grundgerüst meiner Homepage. Werd mich mal bisschen durchackern und mit css etc. arbeiten.

Also nochmal danke.

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben