Topic: Height of Embedded Gallery Wrong

Ive embedded a test gallery into an html page (Rapidweaver with html type page). Im pulling the content from different root folders on my host server so I can keep different galleries separate. Ive used the code as posted on the user guides and the content is being served, so the paths are correct:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://www.philnortonphotography.co.uk/newgalleries/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "http://www.philnortonphotography.co.uk/newgalleries/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

The problem is that the height is too narrow to fit the content. Does anyone have any ideas?

There is also an odd green stripe, as though the color channels have been split?

Link here http://philnortonphotography.co.uk/test/code/index.html

Re: Height of Embedded Gallery Wrong

The problem is that the height is too narrow to fit the content. Does anyone have any ideas?

Please see this FAQ:
My gallery does not show in Firefox or gets cropped to a small height. Why?
Your gallery displays with a small height in Firefox 12 but not in IE9 on my PC (where is displays OK) so this may well be the cause of your issue.

There is also an odd green stripe, as though the color channels have been split?

This looks like a corrupt image being used for your web page's background. Check your source image and, if it seems OK, try re-uploading it. Perhaps it became corrupt during the initial upload.

Steven Speirs
SimpleViewer Support Team.

Re: Height of Embedded Gallery Wrong

Thanks for the reply Steven.
Im confused, the issue with the hight appears in Safari and Firefox, and when I check in IE9 the height is even narrower?

I checked the FAQ "Check your CSS. Firefox requires that you explicitly set the height of the html and body tags, plus the div that contains SimpleViewer" but too be honest this has confused more, would you mind elaborating please, Ive no idea how to do any of this?

Re: Height of Embedded Gallery Wrong

The FAQ suggests that, essentially, all parent containers of your gallery (up to and including the 'body' and 'html' tags) should have a height set via CSS.
For example, it would not be enough to simply have:

<div id="parent">
    <div id="sv-container"></div>
</div>

You would need to add something like the following to your CSS (in the <head> section of your web page):

<style type="text/css">
    body, html {
        height: 100%;
    }
    #parent {
        height: 80%;
    }
</style>

However, being that your page scrolls anyway (and does not seem to be designed to fill the browser window regardless of its size), a much easier solution might be to simply change the height of the gallery from 100% to an absolute pixel value, such as 600px, e.g.:

simpleviewer.load("sv-container", "100%", "600", "222222", true, flashvars);
Steven Speirs
SimpleViewer Support Team.

Re: Height of Embedded Gallery Wrong

Thanks Steven

Body tags, div containers lost me, but I figured out that by changing the height in the sv container section to a specific height it did the trick! So I will play with the other suggestion and see what that does so I learn by trying.

Last edited by Philn67 (2012-06-07 05:04:22)

Re: Height of Embedded Gallery Wrong

Body tags, div containers lost me

Perhaps a good place to start would be the W3Schools HTML and CSS sections.
However, setting the gallery's height as an absolute pixel value is a perfectly valid solution which requires no HTML/CSS knowledge.

Steven Speirs
SimpleViewer Support Team.

Re: Height of Embedded Gallery Wrong

Thanks Steven, I now have it set to what I think will be a good compromise and will have a look at those links, Its all Greek but it will sink in.