Lightbox Problem im IE

[Pussychecker]

Hallo liebe Comunity,

Seit über einer Woche habe ich zwei Probleme mit einer Webseite, die mich noch um den Verstand bringen. Ich habe mich schon tot gegooglet, aber ich habe nichts gefunden, das mir helfen kann. Vielleicht kann mir ja einer von euch helfen. Zu meinen zwei Problemen:

1.

Ich habe die Lightbox 2 in die Webseite eingebaut, was ja eigentlich auch nicht schwierig war. Im Firefox und Opoera wird die Lightbox auch korrekt dargestellt. Nur im Internet Explorer 7 mal wieder nicht. Das Overlay füllt nicht die ganze Seite aus, denn ab da wo man Scrollen muss, ist der Hintergrund wieder hell. Ursprünglich hatte ich das Lightbox CSS ausgelagert. Mir war klar dass sich meine CSS von der Seite und das Ligtbox CSS irgendwie nicht vertragen, deshalb habe ich ein CSS draus gemacht. Wenn ich im Stylesheet die Klasse rahmenpos wegmache, dann geht der overlay im IE auch über die ganze Seite. Aber die Klasse brauche ich um den Rahmen für den Content zu Positionieren. Ich bin mit meinem Latein auf jeden Fall am Ende und kann nur noch auf eure Hilfe hoffen.
Hier könnt Ihr euch das Elend mal ansehen:

Die Toiletten - Gasthaus Bad - Ihr freundliches Schwarzwald Restaurant in Furtwangen

und die CSS

http://www.gasthaus-bad.de/css/gasthaus-bad.css

2.

Ursprünglich sollte ich die Navigation der Seite vertical machen. Dementsprechend habe ich die Seite gestaltet. Plötzlich hieß es die Navigation kommt doch nach links. So und nun ist der Platz natürlich zu klein und das Menü übelappt den Contentbereich. Bei einer 1024 er Auflösung überlappt das Menü jetzt den daneben liegenden Rahmen um ca 80 Pixel. Ich dachte erst kein Problem dann Marge ich es eben um die 80 Pixel nach rechts. Doch mein Problem ist, wenn ich es Marge oder Padde um diese 80 Pixel, wird der komplette Hintergrund mit verschoben und ich habe bei einer 1024 er Auflösung einen Scrollbalken vorhanden. Das will ich ja natürlich nicht. Gibt es irgendeine Möglichkeit den Contentbreich so zu verschieben ohne das sich der komplette Viewport der Seite verschiebt? Daher kommt meiner Meinung nach ja der Scrollbalken.

Gasthaus Bad - Ihr freundliches Schwarzwald Restaurant in Furtwangen

Ich hoffe ich habe mich einigermassen verständlich ausgedrückt und möchte mich jetzt schonmal für eure Hilfe bedanken und hoffe dass mir jemand helfen kann.

Liebe Grüsse Martin

PS: das Menü wird im übrigen auch nicht abgedunkelt, warum auch immer, aber damit kann ich zur Not leben

[Pussychecker]

Hallo,
weiss niemand einen Lösungsansatz für mich...
Ich wäre schon für den kleinsten Tipp dankbar..

Liebe Grüsse Martin

[stb_87]

Versuche mal für den IE die Erweiterung im CSS:

*html #idfürhintergrund (height: 100%);

[Pussychecker]

Hallo stb_87 und danke für den Tipp. Aber das daran liegt es nicht. Das hatte ich schon ausprobiert. Ich habe es niur wieder aus dem CSS genommen, weil es nichts gebracht hat! Sieht wohl so aus, dass IE Benutzer halt keinen komplett abgedunkelten Hintergrund bekommen. Vielleicht hast Du aber eine Idee, wie ich mehr Abstand zwischen Navigation und den Rahmen hinbekomme, ohne dass ich ein Scrollrahmen bekomme.

Vielen Dank für Deine Hilfe.

Liebe Grüße Martin

Hi Martin,

so wie es aussieht, hast du es ja doch gelöst oder? Jedenfalls wird deine Seite nun richtig angezeigt... Steh gerade vor dem selben Problem und es wär super wenn du mir weiterhelfen könntest?!

Danke im Voraus

Daniel

[Pussychecker]

Hi ristic,
das Problem liegt in der Lightbox.js
Öffne diese und ersetzte das:

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeigh t)
return arrayPageSize;
}

mit dem hier:

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
} else { // Explorer Mac...would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeigh t)
return arrayPageSize;
}

Dann sollte es gehen. Gib bitte Rückmeldung ob es geklappt hat.
Liebe Grüße Martin

Hi Martin,

hab das Ganze mal ausprobiert. Das erste Problem kommt hier " arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeigh t)". Beim t kommt zuvor ein Leerzeichen, das hab ich rausgelöscht und dann kam schon der nächste Fehler "y is not defined". Hast du das aus dem Code direkt kopiert oder händisch ins Forum geschrieben?
Weil so zerlegts mir natürlich alles...

Wäre super wenn du es mit der Code-Funktion nochmal posten könntest?

Viele Grüße und Danke im Voraus

Daniel

[Pussychecker]

Hallo Daniel,
ich hatte den Text nur kopiert. Keine Ahnung warum es den so zerschossen hat. Ich habe mal den Quelltext auf meinen Server geladen(ist nur der Code, den Du bei Dir ersetzen must. Ich hoffe es passt jetzt!

http://www.in-the-web.de/code.js

Liebe Grüße Martin

Vielen Dank Martin. Das hat wunderbar geklappt. Brauchte das Ganze für Typo3 und hab hierzu auch einen Blogeintrag verfasst und nochmal meinen Dank an dich ausgesprochen.

Hier die Lösung für die kj_imagelightbox2 1.4.1 in Typo3

[Pussychecker]

Hallo Ristic,
das freut mich, dass ich Dir helfen konnte :-)
Danke übrigens für die Erwähnung in Deinen Blog. Falls Du mal Hilfe brauchst Melde Dich einfach.

Liebe Grüße Martin

[Pussychecker]

PS: Ich lass den Quellcode ma auf meinem Server. Vielleicht kann es ja mal wieder jemand brauchen....

[asatreu]

Vielen Dank auch von meiner Seite, die kleine Änderung in der js-Datei hat mir weitergeholfen.

Hallo,

also ich hab das gleiche Problem und komm auf keine lösung...

habe sogar schon den code hieraus kopiert, aber ich habe immer noch den feler im IE.

hirtreiter.name - Galerie - Kategorie: test

Woran liegt das denn?

viele grüße
marcus

[stb_87]

Bei mir wird alles korrekt angezeigt.

Wo liegt der Fehler d. E. denn genau?

Der Fehler im IE ist, dass die Seite nach unten nicht komplett dunkel wird und dass der "CLOSE" Button nicht in einer Linie mit dem Bild ist.