• Registered: 2019-02-11
  • Posts: 2

Topic: Firefox shrinks gallery height

Gallery opens fine in chrome and IE but shrinks in height to about one quarter in Firefox. I'm not a programmer but can find my way around HTML juist, the website I'm trying to update is very old and uses frames, the gallery is opening in a nested frame. Here is a copy of my page minus all of the menus and information. I'm using the default installation cade. Do I need to modify anything else apart from thr width and height?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Juicebox Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Juicebox Gallery" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>

                <!--START JUICEBOX EMBED-->

                <script src="jbcore/juicebox.js"></script>
<script>
new
                juicebox({
containerId: "juicebox-container",
galleryWidth:
                "250%",
galleryHeight: "100%",
backgroundColor:
                "rgba(34,34,34,1)"
});
</script>
<div id="juicebox-container"></div>

                <!--END JUICEBOX EMBED-->
                                   
                       
</body>
</html>

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Firefox shrinks gallery height

When using a percentage height, such as 100%, you'll need to ensure that all parent containers of your gallery (up to and including the <body> tag) have heights specified via CSS, otherwise the browser may not be able to determine what the gallery's actual height should be, for example what the gallery's height should be 100% of.
Please also see the short note regarding 'Using Percentage Heights' here.

I would certainly recommend embedding the gallery directly into your web page rather than loading the gallery into an frame (there are drawback to using iframes which are noted here... scroll down to '2) Using an iframe') but if you are using a frame, then try giving your frame (or even the gallery itself) a fixed pixel height (such as 600px). This should hopefully help to resolve your problem.

Also, a gallery width of 250% is rather unorthodox. You might like to try sizing the parent container appropriately and then give the gallery a width of 100% so that it spans the entire width of the parent container (rather than specifying that the gallery's width should be two and a half times the width of the container that it is nested within).

I hope my notes above help. However, if you continue to experience difficulties, then please post back with the URL of the web page that you are loading your gallery into so that I can see the problem for myself and hopefully help further. Thank you.

  • Registered: 2019-02-11
  • Posts: 2

Re: Firefox shrinks gallery height

Many thanks Steven much appreciated.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Firefox shrinks gallery height

You're welcome. I hope you're able to sort out your gallery's web page.
If you continue to have problems, just let me know (and post a link to your gallery's web page) and I'll try to help further.