Log in

View Full Version : Lightbox v2.03A causing webpage to "jump"


Franco50
04-27-2009, 01:54 PM
1) Lightbox v2.03A Viewer

2) http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) I am currently building a website on which I want to display some photos using Lightbox v2.03A. The script actually works OK and I can view the test pic I have created but the problem I am having is that the main table of the webpage containing the script now appears to 'jump' a few pixels out of position when viewing in a browser and navigating through all the menu buttons. If I remove all the lines relating to the script from the <head> of the page the problem disappears. I have experienced the same problem using the older version of Lightbox and also Thumbnail viewer.

This is the link to the site as it stands - http://easi-web.co.uk/letterfarm

The page containing the Lightbox script is the one called "Going Green" - if you click on each menu item in turn from the left, the Going Green page jumps out of position to the right slightly when it is selected and when you navigate back to a previous page it jumps back to the left. The problem is easier seen once you have loaded all pages into the cache and you flip between Going Geen and another page.

The computer I am using at the moment is running IE6 and I won't be able to test in Firefox until I get home later tonight.
jscheuer1
04-27-2009, 02:15 PM
Not happening in Firefox or Opera. It is happening in IE 7. I see you are using a non-URL DOCTYPE for the pages. This throws IE into quirks mode. Use a valid URL DOCTYPE like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

on all pages, that may take care of it.
Franco50
04-27-2009, 02:45 PM
Hi John

That hasn't cured it I'm afraid, in fact changing the doctype has had the effect that some contect on the pages now wants to center itself instead of being left aligned, although I'm sure I can fix that one myself, but I am more concerned about the page jumping.
jscheuer1
04-27-2009, 04:15 PM
Now, as long as I navigate via the links, it's fine. And the problem occurs when shifting between home and any other page (not just the going green one) when using the back and forward buttons of the browser.
Franco50
04-27-2009, 05:33 PM
What really frustrates me is that if I remove these lines from the Going Green page


<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

it looks OK in any browser. :(
jscheuer1
04-27-2009, 05:44 PM
The body margins are jumping. I don't think it really has to do with lightbox, since it happens between any of the pages and home. I'd try getting rid of these deprecated attributes:


<body topmargin="0" leftmargin="0" background="grey_bg_stripes.jpg">

And instead, place this at the beginning of your stylesheet:


body {
margin: 0;
padding: 0;
background-image: url('grey_bg_stripes.jpg');
}

Do this for all pages.
Franco50
04-27-2009, 06:30 PM
John - have made that change you suggested and everything looks fine in IE7 and FF at the moment. I'll have a look in IE6 tomorrow at work as a double check. Thanks for all your help on this.