You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Lite Support → Big Space above gallery :(
Hi,
I've just downloaded Juicebox and created my first gallery. However, when embedding it onto a page on my website there is a big gap above it.
Can someone please help me with why this could be. I've played around with the height and width settings etc but to no avail :(
Thanks
Specialk
First of all, try changing your gallery's background color so that the entire gallery can clearly be seen on your web page.
This should let you know whether the space you are seeing is within the gallery area or elsewhere on your web page.
If the space is within the gallery area, check that you have set both imagePadding and stagePadding to zero.
Also, try setting imageScaleMode="FILL" to ensure that the main image fills the available image area within the gallery. If this removes the space, then it may simply be that the aspect ratio of your main images does not match that of the image area within the gallery and changing the dimensions of the gallery, the shape of your images or the imageScaleMode should help.
Hi Steven,
Thanks for the advice, tried everything you have suggested and still got a big gap above the gallery. I don't have much else on the page to conflict and have tried removing/changing things in the code on the page but it still has this gap :( Don't have it with the old gallery I used to use :(
My page is here if anyone has any ideas?
http://www.goringandstreatleyconcertban … llery.html
Many thanks
First, your web page should use a Doctype Declaration so that the user's browser knows what set of standards your web page should conform to. Select a suitable Doctype for the code on your page and place it at the top of your page above the opening <html> tag.
Try using the HTML 5 Doctype:
<!DOCTYPE HTML>Next, try validating the code on your web page with the W3C Markup Validation Service and fix the errors reported.
Once the code on your page validates correctly, the page should be rendered with greater predictability and consistency across different browsers. (Your 'main' and 'container' divs are unclosed.)
Also, try changing:
<div id="juicebox-container"></div>... to:
<div id="juicebox-container" style="float: right;"></div>Thank Steven, you are a lifesaver :)
Many thanks
Hi all,
I have a page with a number of gallerys on the page, all in sperate div's. The first of the gallerys every time i upload a new on is out of position and has the dreaded big gap above it!! For the life of me i cant figure it out!! Tried everything i can think of!!
Any sugestions?
you can see what I mean at: http://eclecticarts.ie/themes/theme.html
@ross.tormey
Thank you for posting in the forum. I tried responding to your support email many times over a period of several days but just received "Delivery Status Notification (Failure)" messages.
It looks like the space at the top of your gallery may be caused by some CSS in your 'main.css' file.
I believe the space may be the margin and padding at the bottom of the ol li section.
Notice how the top of the gallery is in line with the bottom of the 'leftNames' <div>.
Open the 'main.css' file in a plain text editor and try changing the following code:
ol li {
font-size:15px;
font-weight: normal;
color:red;
border-bottom:1px solid #ccc;
padding:0 0 15px;
margin:0 10px 15px 0;
color: red;
}... to:
ol li {
font-size:15px;
font-weight: normal;
color:red;
border-bottom:1px solid #ccc;
padding:0 0 0;
margin:0 10px 0 0;
color: red;
}... to see if it makes a difference.
Also, I notice that your web page does not use a Doctype declaration. It is important that each HTML document uses a Docytype declaration in order to inform the user's browser what set of standards the code on your web page should conform to. Add an appropriate Doctype declaration to your page: http://www.w3.org/QA/2002/04/valid-dtd-list.html
From the look of your code, you could use the HTML 5 Doctype. Add the following code to the very top of your HTML page (before the opening <html> tag).
<!DOCTYPE html>Once you have added the Doctype Declaration to your web page, you can check the page for HTML errors (and fix any errors reported) with the W3C Markup Validation Service: http://validator.w3.org/
Hi, thanks for getting back to me!!
tried that and no joy! it seems to just make the 'leftnames' <div> smaller thus allowing the gallery to move back up!! i have gallerys on several pages and they are all off! Can you suggest a solution to seperate the two <div>'s that they arnt affected by each other??
thanks for your help
For the first gallery on your page, try changing:
<div id="juicebox-container"></div>... to:
<div id="juicebox-container" style="float: left;"></div>This should hopefully position your gallery below your text (without a large gap) and allow you to increase the spacing in your side menu.
Incidentally, you have several <div id="themes"> entries on your web page. Each id on a web page should be unique.
If you need to apply CSS rules to multiple elements, you should use classes instead of ids.
Please see this web page for details.
Also, I would recommend not using universal CSS such as the following in your 'main.css' file.
* {
margin:0px;
padding:0px;
border:0px;
}Such rules will apply to all elements on your web page including those in your galleries. The galleries have no choice but to inherit these rules. Try to apply CSS rules to only those elements on your page which specifically require them through use of classes and ids.
Juicebox Support Forum → Juicebox-Lite Support → Big Space above gallery :(
Powered by PunBB, supported by Informer Technologies, Inc.