Brushed metal background

Freeway
21

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

24

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

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?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

26

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

27

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

28

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?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

29

Weavers slimbox does not have this problem…

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

30

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?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

31

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

32

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.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

33

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

34

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

35

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.

Untitled

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

36

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

–
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

37

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.”

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

38

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.”

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

39

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

40

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options