WebYep lightbox pop-up not working on Vista PC

Does anyone have access to a Windows Vista PC to view and test this page for me?

http://www.laforcevitale.eu/smallanimals.php

This WebYep site reports that they can only open the first pop-up photo on the page, and the 2nd and subsequent photos do not pop-up at all.

They are viewing on a Windows Vista with IE unknown.

It runs OK on IE6 and IE7 - on Windows XP

Thanks in advance

David

quote

Hi David I see you are using version 1.2.4.. have you tried the latest 1.2.5 pre4 it has better light box support which targets light box and loops specifically http://www.obdev.at/downloads/WebYep/nightly/WebYep_Plain_1.2.5Pre4_en.zip

I don’t have vista here so cant see that problem and as you mentioned it works fine on other browsers. I am assuming you are using the webyep menu and then loops on the page have you tried testing it without the menu. In other words just a loop on a single test page, that way we could isolate if its the menu system or the loops or the lightbox part. The other thing is are you using the standalone loop start action, the new item loop start function, or the crowbar method?

cheeers max

quote

Hi Max,

Updated to a newer lightbox compatible version, but the issue still persists, on all versions of IE (The background “overlay” does not reach 100% to the bottom of longer pages.

Looking at the Lightbox 2 CSS file at the background overlay properties:

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

The height is 500px, which looks like what is extactly happening in IE. But is showing 100% depth in PC Firefox, and Mac Browsers on long pages.

Are there any CSS gurus that could advise how to make the lightbox overlay background stretch to 100% depth? (putting the height as 100% does not work by the way)

quote

After searching around a bit this sounds like is a common issue with lightbox. http://www.huddletogether.com/forum/search.php? PostBackAction=Search&Keywords=overlay&Type=Topics&btnSubmit=Search

(On IE only the page displayed has the transparent overlay, start to scroll down and the overlay moves up showing the page behind)

Lightbox support offers a tip, but does not seem to work http://www.huddletogether.com/projects/lightbox2/#support

 body{ margin: 0; padding: 0; }

Has anyone come across this issue? Can anyone chip in with any thoughts of a solution?

David

On 10 Aug 2008, at 12:00, David Owen wrote:

(The lightbox background “overlay” does not reach 100% to the bottom of longer pages.

quote

Hi David

I have heard about this problem before and from what I recall… if you do have a background colour and you apply not only the browse window but the entire HTML page, IE sloooowwwds down to a bit of a crawl.. well that’s what I remember, I think I read this problem about the slimbox (Mootools version). I suspect the only way round this speed issue was for the developer of these effects to restrict the colour overlay to just effect the visable browser window. I have never seen a viable work around but thats not to say it doesnt exist.

Have you tried contacting the Lightbox developer directly?

kind regards max

quote

Hi Max,

Perhaps this is why only the top (first loaded) visible part of the html page is covered by the overlay in IE.

Its a big disappointment, IE spoils the party again, big time. This means that many Mac users are thinking lightbox its working correctly, but IE users see the fault on any long page on images where your scroll down. :-(

David

On 12 Aug 2008, at 09:15, max wrote:

Hi David

I have heard about this problem before and from what I recall… if you do have a background colour and you apply not only the browse window but the entire HTML page, IE sloooowwwds down to a bit of a crawl.. well that’s what I remember, I think I read this problem about the slimbox (Mootools version). I suspect the only way round this speed issue was for the developer of these effects to restrict the colour overlay to just effect the visable browser window. I have never seen a viable work around but thats not to say it doesnt exist.

Have you tried contacting the Lightbox developer directly?

kind regards max

David Owen Freeway Friendly Web hosting and Domains :: (Test Drive a web hosting account for Free) http://www.ineedwebhosting.co.uk http://www.printlineadvertising.co.uk/freeway

Printing:: (leaflets, letterheads, cards etc) http://www.printlineadvertising.co.uk/print.html

quote

This looks like the section of lightbox.js getting the page height. Could any Javascript guru’s comment as to why the IE problem?

  //  getPageSize()
//
getPageSize: function() {

     var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {  
        xScroll = window.innerWidth + window.scrollMaxX;
        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
        if(document.documentElement.clientWidth){
            windowWidth = document.documentElement.clientWidth; 
        } else {
            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 = xScroll;        
    } else {
        pageWidth = windowWidth;
    }

    return [pageWidth,pageHeight];
}

quote

Max,

After looking at http://www.lokeshdhakar.com/projects/lightbox2/ on a PC box, which the overlay works OK in scrolling IE6 page. I have to assume there is something on my page, Web-Yep loop, or how FW5 is creating the code that is causing the issue.

David

On 12 Aug 2008, at 09:15, max wrote:

Hi David

I have heard about this problem before and from what I recall… if you do have a background colour and you apply not only the browse window but the entire HTML page, IE sloooowwwds down to a bit of a crawl.. well that’s what I remember, I think I read this problem about the slimbox (Mootools version). I suspect the only way round this speed issue was for the developer of these effects to restrict the colour overlay to just effect the visable browser window. I have never seen a viable work around but thats not to say it doesnt exist.

Have you tried contacting the Lightbox developer directly?

quote

Hi David If you have seen it working on a pc then what I am remembering must be the slimbox only problem. I was recalling it from memory so I wasn’t sure if applied. I don’t know why the loop or freeway would have any bearing on the problem but if it does then you will need to go back to Johannes at OBD, as I don’t think there were any real items that you could adjust or change at the freeway end that will make mush of a difference.

Has OBD had this problem before?

and do you have an example online that I could look at.

cheers max

quote

Max, It was on my original post:

but here is it again: http://www.laforcevitale.eu/smallanimals.php

David

On 12 Aug 2008, at 15:23, max wrote:

and do you have an example online that I could look at.

quote

Max,

I’ve done just a really basic page, here: http://www.laforcevitale.eu/lightbox/index.php

No loop, just a single (lastest) Web-Yep pop-up action with lightbox 2.0.4 and still the overlay does not work in IE.

Obdev says; “we’ve created a test page with WebYep (image in a loop) and the dimming works fine over the full page also when the page gets very long”, so its must be a Freeway 5 issue (It’s most likely due to the page structure)

Any ideas?

On 12 Aug 2008, at 15:23, max wrote:

Has OBD had this problem before?

and do you have an example online that I could look at.

quote

I would ask Obdev to post a public page where it works, and then you post one that does not. Xyle scope should be able to sort the differences. Also, which version of Freeway 5 are you using?

Walter

On Aug 12, 2008, at 1:42 PM, David Owen wrote:

Obdev says; “we’ve created a test page with WebYep (image in a loop) and the dimming works fine over the full page also when the page gets very long”, so its must be a Freeway 5 issue (It’s most likely due to the page structure)

Any ideas?

quote

The Lastest

On 12 Aug 2008, 5:49 pm, waltd wrote:

Also, which version of Freeway 5 are you using?

Walter

quote

Hi David …. I just checked your example, and yep it cuts off, it also cuts off if you use firefox too. though slightly differently. Open up your example in a small firefox browser window launch your lightbox example and rather than scroll just re-size the window to a larger size… it too now shows this cutting off problem I could not repeat this problem on the official lightbox site demo’s though I could with OBD demo page. If you open up one of the OBD images and resize the page it too shows this problem i will send in the screen shots to OBD and see if they have seen this before.

speak soon max

quote

Hi Max,

Never thought of checking the Obvev demo site with IE6 here, and yes you’re right the overlay cuts off. And Firefox Mac gives a similar error if you have the browser to a smaller size and the enlarged.

Thanks for looking at this it much appreciated, I started to think its just me with the issue !!

So here works OK, http://www.huddletogether.com/projects/lightbox2/

but this test page here it does not http://www.laforcevitale.eu/lightbox/

I’ll have a look in Xyle scope to see if I can spot anything.

Walter, would you like to take a peak, and see if you can spot anything that might be causing the issue?

David

On 13 Aug 2008, at 09:33, max wrote:

Hi David …. I just checked your example, and yep it cuts off, it also cuts off if you use firefox too. though slightly differently. Open up your example in a small firefox browser window launch your lightbox example and rather than scroll just re-size the window to a larger size… it too now shows this cutting off problem I could not repeat this problem on the official lightbox site demo’s though I could with OBD demo page. If you open up one of the OBD images and resize the page it too shows this problem i will send in the screen shots to OBD and see if they have seen this before.

speak soon max

quote

Hi david I have had a reply back from OBD and from what Johannes has described it looks like the problem I have see in firefox is a different issue altogether.

Below is the reply but it does look like it’s something that either the actual lightbox is doing or freeway or a combination .. or something else altogether.

I know its not getting us very far in terms of fixing this issue but Walter may know a lot more if he gets a chance to look at it.

Anyway I have pasted the response I received from Johannes… where I described my quick experimentation with firefox as it may help.

Have you seen this before or know what my be causing it.

I’ve only seen this in the page mentioned in the forum post.

In my example and test pages using the Image Element (single, in a loop, etc.) this behavior does not show up.

So I assume it’s a problem of the combination of Lightbox with the HTML/CSS code generated by Freeway.

In a small firefox browser window launch lightbox example and rather than scroll just re-size the window to a larger size… it too now shows this cutting off problem

IMHO that’s a different issue. If the page really is that short and the browser window is resized to a height greater than the page’s content, than the dimmed area will always stop where the page’s content stops.

But usually (and in the Lightbox demo) this is not the case: http://www.huddletogether.com/projects/lightbox/

Wheres when changing the window’s width, this issue can be observed here: http://www.lokeshdhakar.com/projects/lightbox2/

but not here: http://www.huddletogether.com/projects/lightbox/

So, I’m not sure what exact HTML/CSS structure produces which behavior, but I’m afraid it something we cannot do much about.

quote

I had a look at the Lightbox2 example in Xyle scope, and it appears that the JavaScript which is styling the overlay and the full-size picture is setting the dimensions to (calculated) fixed values. So it’s going to be very hard to have this survive a page resize width-wise. Lightbox2 is setting the height of the overlay to a ridiculous extreme of over 5,000px, though.

I made a simple example in a text editor:

#lightbox
{
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}
#picture
{
    width: 300px;
    height: 300px;
    background-color: #FFF;
    margin: auto;
    margin-top: 20%;
}

And this resized nicely, even inside of a Freeway 5 page. But this is a really simple way to do this trick, and if it were really possible to do it this way cross-browser, I have to imagine that the Lightbox crew would have done so rather than messing around with all that math.

Walter

quote

The OBDEV demo page has been fixed in IE and works by “setting the body tag’s margins to 0 pixels”

So this now comes back the Freeway 5 generated pages…..

The Lightbox support mentions:

“The shadow overlay doesn’t stretch to cover full browser window.” Remove the default margin and padding from the body tag. Add body { margin: 0; padding: 0; } to your stylesheet.

David

quote

I must be a bit dense today because looking at your source, your body tag is already set at 0px….. is it stating that the body tag needs to be in an external style sheet? I cant see how that makes any difference.. though I am probably missing something here. any one have any idea why??

max

quote

Max,

Just to double check the lightbox installation, you can view the a test page: http://www.laforcevitale.eu/webyep-system/program/opt/lightbox/

The Overlay does not work in IE (not stretching the width or depth):

body { color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;    }

But adding; margin: 0; padding: 0; it now works correctly in IE.

body { margin: 0; padding: 0; color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }

Heres the fixed page: http://www.laforcevitale.eu/webyep-system/program/opt/lightbox/fixed.html

So why does FW5 refuse to work with the same method? What am I missing?

On 13 Aug 2008, 3:34 pm, max wrote:

I must be a bit dense today because looking at your source, your body tag is already set at 0px….. is it stating that the body tag needs to be in an external style sheet? I cant see how that makes any difference.. though I am probably missing something here. any one have any idea why??

max

quote

After raising the issue with Softpress support, It looks like this issue might effect anyone using lightbox and FW5 in IE.

Does anyone have a standard lightbox installation on their FW5 site, I could have a look at in IE?

quote

I picked any FW5 site with lightbox at random, and it does not work correctly in IE. e.g.

http://latinamericanadventuresllc.com/costa_rica/costa_rica.php

quote

I have been mucking about for hours on this and got nowhere. It’s starting to look like it’s a combination of the lightbox system and the way freeway constructs the pages. Weavers slimbox does not have this problem and looking at both css style sheets, (specifically at the overlay part) there is nothing much to choose between them. So as far as I can tell it has to be a js and freeway incompatibility. Walter did you try your example in IE6 and if you did what happend?

This problem also effects the light-box when not used within the webyep system so I am assuming everyone who has used this effect has the same problem and either not tried and tested it in IE or not tried to scroll a page or maybe someone has found an asnswer!!!

max

quote

No, I didn’t. Can’t work on it right now, but it’s really simple if you want to copy and paste my CSS into a new BBEdit XTHML document and put a pair of nested DIVs in it.

Walter

On Aug 18, 2008, at 12:00 PM, max wrote:

Walter did you try your example in IE6 and if you did what happend?

quote

Weavers slimbox does not have this problem…

I can verify this. I use it without any issue (that i’m aware of).

quote

Walter,

It looks like Freeway users are between a rock and a hard place with lightbox 2. (The title of this thread should now be re-named “lightbox overlay not working with Freeway”)

Joe from Softpress kindly took a look at the issue, and said…

The problem is that IE takes the 100% height used in several places on the page (body, html and PageDiv) to be 100% of the window height, not the page height.

and

You may need to remove something that is integral to the page which means you’d need to either create an Action to remove it such as an inline style in the PageDiv, let me know if you need help with that or want me to make one for you quickly, or you may need to override a style in the body or html selector.

I hope this helps and sorry we couldn’t get to the root of the problem.

I don’t suppose you could take a look at the issue and comment?

David

On 18 Aug 2008, at 18:46, Walter Lee Davis wrote:

No, I didn’t. Can’t work on it right now, but it’s really simple if you want to copy and paste my CSS into a new BBEdit XTHML document and put a pair of nested DIVs in it.

Walter

On Aug 18, 2008, at 12:00 PM, max wrote:

Walter did you try your example in IE6 and if you did what happend?

quote

Circling back to the beginning, which I glossed over, how exactly are you adding the effect? Are you adding the script references manually, or are you using an Action?

My best guess is that you need to move the overlay DIV outside of the main PageDiv, and then use inline CSS to make it absurdly difficult to ignore its positioning and dimensions. How you are adding this script will determine how we go about fixing the problem.

Walter

On Aug 19, 2008, at 6:15 AM, David Owen wrote:

I don’t suppose you could take a look at the issue and comment?

David

quote

Walter,

The script references are added via the Freeway WebYep action > WebYep system folder software, to a standard lightbox installation. I’m sure the WebYep software is only amending the links to the standard lightbox script held in the WebYep system folder, by putting in the following:-

How to use the lightbox script is here: http://www.huddletogether.com/projects/lightbox2/#how

But perhaps Max could comment if I’m wrong.

David

On 19 Aug 2008, at 13:19, Walter Lee Davis wrote:

Circling back to the beginning, which I glossed over, how exactly are you adding the effect? Are you adding the script references manually, or are you using an Action?

My best guess is that you need to move the overlay DIV outside of the main PageDiv, and then use inline CSS to make it absurdly difficult to ignore its positioning and dimensions. How you are adding this script will determine how we go about fixing the problem.

quote

Here’s an example of a simple overlay div, set to 100% height x width, appearing and disappearing at the whim of the visitor. It works in IE6/XP, don’t have any other flavors of IE to test with.

http://scripty.walterdavisstudio.com/overlay

If the page is shorter than the window, then it works just fine. But if you scroll the window up to force vertical scrollbars, then the problem occurs here as well. It doesn’t seem to matter if the overlay is inside or outside of the PageDiv, either.

I’ll fiddle with this a little more.

Walter

quote

Hi Walter,

I’m not sure where you’re going with this. Its only the Freeway standard styles preventing it from working. But I’m not sure in which combination. Other non-Freeway sites work OK with lightbox and overlay in IE with body { margin: 0; padding: 0; }. So I thought by deleting/amending the right styles it would work. But anything I’ve tried so far just does not work.

Are you saying a new overlay is used in preference to the overlay lightbox.js is creating?

David

On 19 Aug 2008, at 14:29, waltd wrote:

Here’s an example of a simple overlay div, set to 100% height x width, appearing and disappearing at the whim of the visitor. It works in IE6/XP, don’t have any other flavors of IE to test with.

http://scripty.walterdavisstudio.com/overlay

If the page is shorter than the window, then it works just fine. But if you scroll the window up to force vertical scrollbars, then the problem occurs here as well. It doesn’t seem to matter if the overlay is inside or outside of the PageDiv, either.

I’ll fiddle with this a little more.

Walter

quote

No, this is just an example of the code I posted earlier in this thread, one which you could try out on your own system. As I noted, it is broken in exactly the same way as your Lightbox code, and doesn’t actually improve on that code in any way. The reason why I did the separate inside and outside versions was to see if that could work around the issue.

What I have been able to deduce so far (and I did do some tests with this page, adding and deleting CSS code to see if I could force it to work with a “vanilla” Freeway page) is that when you have a page with absolute positioning, as most Freeway CSS layout pages tend to be, then you will have this problem.

My guess is that a page coded with all of the elements as relative positioned inline neighbors (using floats and clears and margins rather than absolute x/y positioning) might not have this issue. That would explain why the effect would work on a non-Freeway site.

I would love to be proven wrong on this, maybe Ernie has some thoughts on the subject…

Walter

On Aug 19, 2008, at 10:08 AM, David Owen wrote:

Hi Walter,

I’m not sure where you’re going with this. Its only the Freeway standard styles preventing it from working. But I’m not sure in which combination. Other non-Freeway sites work OK with lightbox and overlay in IE with body { margin: 0; padding: 0; }. So I thought by deleting/amending the right styles it would work. But anything I’ve tried so far just does not work.

Are you saying a new overlay is used in preference to the overlay lightbox.js is creating?

David

On 19 Aug 2008, at 14:29, waltd wrote:

Here’s an example of a simple overlay div, set to 100% height x width, appearing and disappearing at the whim of the visitor. It works in IE6/XP, don’t have any other flavors of IE to test with.

http://scripty.walterdavisstudio.com/overlay

If the page is shorter than the window, then it works just fine. But if you scroll the window up to force vertical scrollbars, then the problem occurs here as well. It doesn’t seem to matter if the overlay is inside or outside of the PageDiv, either.

I’ll fiddle with this a little more.

Walter

quote

After just digging around on the Lightbox forum (Lots with similar issues), http://www.huddletogether.com/forum/comments.php? DiscussionID=1815&page=1#Item_0

It mentions here: “By trial and error, I’ve determined that Lightbox and IE don’t like the “position:absolute” bit of the div.”

David

On 19 Aug 2008, at 15:22, Walter Lee Davis wrote:

No, this is just an example of the code I posted earlier in this thread, one which you could try out on your own system. As I noted, it is broken in exactly the same way as your Lightbox code, and doesn’t actually improve on that code in any way. The reason why I did the separate inside and outside versions was to see if that could work around the issue.

What I have been able to deduce so far (and I did do some tests with this page, adding and deleting CSS code to see if I could force it to work with a “vanilla” Freeway page) is that when you have a page with absolute positioning, as most Freeway CSS layout pages tend to be, then you will have this problem.

My guess is that a page coded with all of the elements as relative positioned inline neighbors (using floats and clears and margins rather than absolute x/y positioning) might not have this issue. That would explain why the effect would work on a non-Freeway site.

I would love to be proven wrong on this, maybe Ernie has some thoughts on the subject…

Walter

On Aug 19, 2008, at 10:08 AM, David Owen wrote:

Hi Walter,

I’m not sure where you’re going with this. Its only the Freeway standard styles preventing it from working. But I’m not sure in which combination. Other non-Freeway sites work OK with lightbox and overlay in IE with body { margin: 0; padding: 0; }. So I thought by deleting/amending the right styles it would work. But anything I’ve tried so far just does not work.

Are you saying a new overlay is used in preference to the overlay lightbox.js is creating?

David

On 19 Aug 2008, at 14:29, waltd wrote:

Here’s an example of a simple overlay div, set to 100% height x width, appearing and disappearing at the whim of the visitor. It works in IE6/XP, don’t have any other flavors of IE to test with.

http://scripty.walterdavisstudio.com/overlay

If the page is shorter than the window, then it works just fine. But if you scroll the window up to force vertical scrollbars, then the problem occurs here as well. It doesn’t seem to matter if the overlay is inside or outside of the PageDiv, either.

I’ll fiddle with this a little more.

Walter

David Owen Printline Advertising 4 Chapel Hill, Yeadon, Leeds LS19 7RG Tel: 0113 2508606 Skype: PrintlineAdv

http://www.PrintlineAdvertising.co.uk Creative Design, Print, Copy, Web Design,

http://www.printlineAdvertising.co.uk/hosting Web Design, Web hosting, Domain Registration

http://www.TheLogoWorks.co.uk Logo Design, Corporate Image.

http://www.printlineadvertising.co.uk/Cat Online Promotional Gifts Catalogue

quote

Right. And that’s a complete non-starter (as they like to say in England) when it comes to Freeway, as it likes to use nothing BUT position:absolute.

There’s always my GetFirefox Action…

Walter

On Aug 19, 2008, at 10:31 AM, David Owen wrote:

It mentions here: “By trial and error, I’ve determined that Lightbox and IE don’t like the “position:absolute” bit of the div.”

quote

Not quite, perhaps a way round would be to have a IE only style that colours the pop-up surround box, to a pale grey (to make its stand out on a whiter page for example) and make the overlay no transparent.

At least then IE wont show a cut off overlay when scrolling (sort of what they don’t see they don’t miss!)

David

On 19 Aug 2008, at 15:39, Walter Lee Davis wrote:

Right. And that’s a complete non-starter (as they like to say in England) when it comes to Freeway, as it likes to use nothing BUT position:absolute.

There’s always my GetFirefox Action…

Walter

On Aug 19, 2008, at 10:31 AM, David Owen wrote:

It mentions here: “By trial and error, I’ve determined that Lightbox and IE don’t like the “position:absolute” bit of the div.”

quote

Yes, but this will have to be done at the JavaScript level. I had a look at it with Safari’s Web Inspector, and the one style you would need to change here (opacity) is being set as an inline style attribute, which cannot be overridden by a page or external stylesheet. Those inline styles are magically set by the script when it generates and injects the overlay DIV into the page.

Walter

On Aug 19, 2008, at 10:49 AM, David Owen wrote:

Not quite, perhaps a way round would be to have a IE only style that colours the pop-up surround box, to a pale grey (to make its stand out on a whiter page for example) and make the overlay no transparent.

At least then IE wont show a cut off overlay when scrolling (sort of what they don’t see they don’t miss!)

David

quote

HI Walter I thought the PageDiv was positioned relative? and everything inside it was absolute, anyway If everything inside needed to be relative then as you said its a non starter. I had a quick read of the
http://www.huddletogether.com/forum/comments.php?%20DiscussionID=1815&page=1#Item_0

I have a sneaky suspicion it’s not just the position absolute problem that’s causing this in freeway. From reading the huddles forum this area seems to be problematic.

max

quote

OK, so not wanting to be beaten on this, I noticed most of the site examples out there are using tables so….

I created everything as tables on the page here: http://www.laforcevitale.eu/LB/

And the overlay works in IE :-)

but hang on this still leaves the FW5 PageDiv in there but it still works?!

So I layered everything on the page except the WebYep picture item here: http://www.laforcevitale.eu/LB/1.php

And it still works in IE.

So is the fault something to do with the actual linked photo element/ style on the page, and how lightbox 2 interacts with it? Looks this way.

Could anyone test the links above in IE7, and see if they work OK?

Could you advise on the WebYep image action Max?

David

On 20 Aug 2008, at 07:10, max wrote:

HI Walter I thought the PageDiv was positioned relative? and everything inside it was absolute, anyway If everything inside needed to be relative then as you said its a non starter. I had a quick read of the <http://www.huddletogether.com/forum/comments.php?%> 20DiscussionID=1815&page=1#Item_0

I have a sneaky suspicion it’s not just the position absolute problem that’s causing this in freeway. From reading the huddles forum this area seems to be problematic.

max

quote

Where it seem to stop working is the moment the WebYep image action is put inside a div or another table.

David

quote

HI David… in IE7 what you get now is the alpha background does cover the bottom of the actual thumbnail picture which is better than before as it did stop in the middle of it though still not 100% of the page

max

quote

Can you try again (reload in IE7) the bottom if the page was the bottom of the pic, I’ve put something a bit lower down the page.

http://www.laforcevitale.eu/LB/

David

On 20 Aug 2008, at 12:52, max wrote:

HI David… in IE7 what you get now is the alpha background does cover the bottom of the actual thumbnail picture which is better than before as it did stop in the middle of it though still not 100% of the page

max

quote

got the bat******tard ok forget all the layering stuff on the webyep page

all you need to do is make sure the page is going to be taller than the popup say 2000px then at the bottom of the page draw a small tiny winy html box and turn of layer so its blue now regardless what the webyep thing is Layered or not the alpha will be as long as the page hooooray bloody ray.. :o)

thanks christ for that!!!

max

quote

Guys, I have been looking at this quite a bit and have found that if the item name item1 (which appears to be a WebYepTextElement) is set to position relative, float left and clear both it works fine:

http://users.softpress.com/joe/lightbox/

I haven’t tried IE6 or Opera.

I’m not sure what the best way to do this is, whether the Action should look out for it or what but it is certainly an IE7 issue with absolutely positioned items as you found earlier David.

Joe

On 20 Aug 2008, at 13:02, David Owen wrote:

Can you try again (reload in IE7) the bottom if the page was the bottom of the pic, I’ve put something a bit lower down the page.

http://www.laforcevitale.eu/LB/

David

On 20 Aug 2008, at 12:52, max wrote:

HI David… in IE7 what you get now is the alpha background does cover the bottom of the actual thumbnail picture which is better than before as it did stop in the middle of it though still not 100% of the page

max

quote

Max, Like this?

http://www.laforcevitale.eu/LB/2.php

Can you test on IE7 (Only got IE6 here)

(un-layered html red box 2000px down the page)

David

On 20 Aug 2008, at 13:09, max wrote:

got the bat******tard ok forget all the layering stuff on the webyep page

all you need to do is make sure the page is going to be taller than the popup say 2000px then at the bottom of the page draw a small tiny winy html box and turn of layer so its blue now regardless what the webyep thing is Layered or not the alpha will be as long as the page hooooray bloody ray.. :o)

thanks christ for that!!!

max

quote

Hi David yes it works in IE 7 and in IE6….. yipppeeeee
So one solution is to place a non layered item at the bottom of the page and as long as the pop up isn’t any taller than the original window then it will work, the alpha background will cover the entire page…
Now I am going to look at Joe’s answer as this method wont always be ideal.

max

quote

Thanks Joe, you beat me to it, with my tinkering this morning I realised the only item left was the action which still had style=”position:absolute; still in it. And making everything into tables to remove it made it work.

Max, could this be addressed in the action?

On 20 Aug 2008, at 13:12, Joe Billings wrote:

Guys, I have been looking at this quite a bit and have found that if the item name item1 (which appears to be a WebYepTextElement) is set to position relative, float left and clear both it works fine:

http://users.softpress.com/joe/lightbox/

I haven’t tried IE6 or Opera.

I’m not sure what the best way to do this is, whether the Action should look out for it or what but it is certainly an IE7 issue with absolutely positioned items as you found earlier David.

David

quote

Hi joe your method works in IE6 and 7
so… if the webyep image item is part of an inline then people need to make it a float left and clear both, is that what you are saying…? I haven’t got your artwork so don’t know which webyep element you have adjusted

max

quote

Could either you David or ideally you Joe… seeing as your is fixed send me the freeway artwork and then I can have a butchers :o)… ta

max

quote

I just edited the HTML directly. David would be the man to send that through as it is his site.

Joe

On 20 Aug 2008, at 13:48, max wrote:

Could either you David or ideally you Joe… seeing as your is fixed send me the freeway artwork and then I can have a butchers :o)… ta

max

quote

Max,

Its on its way,

David

On 20 Aug 2008, at 13:48, max wrote:

Could either you David or ideally you Joe… seeing as your is fixed send me the freeway artwork

quote

cheers Joe

Hi david any chance I can have your freewy file

max

quote

you beat me to it max… ta

quote

HI Joe Hi David ok looked at the artwork and yes jo I can see from the output that the line

<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:1024px">
    <div id="item1" class="WebYepTextElement br f-x2" style="position:absolute; left:132px; top:5px; width:759px; z-index:1; padding-top:250px; background-color:#f3f6fb; font-size:1px">
    <div>

is showing a class of WebYepTextElement and a position of absolute; but this item isn’t a WebYep item.
I know… I know… it’s odd and cant be!! But I couldn’t figure it out what this item was when I looked at the artwork. so I have removed every ounce of webyep in fact all I have is 1 html box which is empty nothing in it on an empty page. with no webyep code, nothing and there is still a class of WebYepTextElement. even after a forced full publish. I even checked to see if a class had been added manually on this html iem and it hasn’t
so

1. how is this html box getting it’s class?
2. and two this box isn’t made by a webyep action it’s a standard Freeway HTML box that used to contain inline webyep items. and so this would need to be adjusted via the normal inspector palette with: float, clear both and relative, which it cant because its a non inline container. I cant see how I get round that.

Do you want me to send in the artwork Joe, because either I am off my bonce, or blind or there is something I don’t know about…. probably all three!!
speak soon max

quote

Max

The WebYepTextElement br is something I put in by importing from another stylesheet. It dates back to another issue of styling two br’s in long text items, so I’d ignore that bit, sorry.

David

On 20 Aug 2008, at 14:54, max wrote:

is showing a class of WebYepTextElement and a position

quote

thank god for that I can see it now ok so forget the first one… the only real issue is it’s not a web yep item but a container for inline webyep items and this would still be normally adjusted via the inspector palette

max

quote

Well not quite, to fix the site I was originally working on, you need to go through the Item > extended palette and add the style last, and override the style=”position:absolute; that Freeway gives for the first div.

There is probably a neater way to do this…

But at least ifs fixed.

On 20 Aug 2008, at 15:15, max wrote:

the only real issue is it’s not a web yep item but a container for inline webyep items and this would still be normally adjusted via the inspector palette

quote

Ok now I am back after watching Bolt smashing the World record…
David the only way I know how to adjust this html box is clicking on it and then going up to Item/extended and then in the click <div style> button and adding three new attributes:

name: position
value: relative

then

name: float
value: left

and finally

name: clear
value: both

I think this duplicates what Joe did but I have no idea what effect this does to the site as a whole? as I haven’t checked it

though this is the result in code

<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:1024px">
    <div id="item1" class="f-x2" style="position:relative; left:132px; top:193px; width:759px; z-index:1; padding-top:250px; background-color:#f3f6fb; font-size:1px; float:left; clear:both">
    <div>

max

quote

Hi David looks like you beat me to it… I was watching the 200 meters…. :o) I don’t know of a neater way… its not in the inspector palette and I don’t think anyone has made an action for this but I am probably wrong.

So in the short term using extend is the way I would do it Anyway its working so at least you can get that page finished… yippeeee

max… :o)

quote

All looks good, with no effects so far :-)

On 20 Aug 2008, at 15:47, max wrote:

but I have no idea what effect this does to the site as a whole?

quote

The fix does not work on other sites with the same issue, so its not a fix all option. Unless the page is constructed similarly.

Each site with this issue, looks like it needs picking through to make it work.

On 20 Aug 2008, at 15:56, max wrote:

Anyway its working so at least you can get that page finished… yippeeee

quote

Hi david

it’s probably a case of seeing if there is a problem with the specific layout and lightbox because not all layouts is going to effected, then it is then see if either method works for that specific scenario.

max

quote

Max,

Your fix of just a non-layered box at the bottom of the page is the easiest, but if its on an editable page, where you don’t know the length of the final page, it possibly makes it untidy to use.

Now if there was a way of detecting the length of the page…? So a bottom box could be written into the page dynamically…?

On 20 Aug 2008, at 8:20 pm, max wrote:

it’s probably a case of seeing if there is a problem with the specific layout and lightbox because not all layouts is going to effected, then it is then see if either method works for that specific scenario.

quote