1 (edited by brokenmonkey 2010-07-13 17:00:31)

Topic: AutoViewer is way too short in Firefox, IE, and Opera (SOLVED)

I built my photography website around AutoViewer and did all of my testing in Google Chrome (a WebKit-based browser) and everything works perfectly. It also works fine in Safari 5 and on my Android phone, which both use WebKit-based broswers. However I run into problems when trying to view my galleries in Internet Explorer 8, Firefox 3 or 4, or Opera 10.

Here is the URL so you can see it yourself: http://www.jenkinsgallery.com

The problem is that I have my gallery set to automatically resize to 75% of the browser window size, but in the aforementioned browsers the gallery shows up as maybe 10% of the window size. Here is the code I used for that, with the relevant line in bold:

<style type="text/css">   

    /* hide from ie on mac \*/

    html {
    height: 75%;
    overflow: visible;



    #flashcontent {

        height: 100%;


    /* end hide */

    body {

        height: 100%;

        margin: 0;

        padding: 0;

        background-color: #000000;

        color: #ffffff;



I verified my CSS and XHTML at http://validator.w3.org/ so I am almost positive the problem isn't with my code, but rather with how the browsers are rendering it. Unfortunately, I am not a web designer and this is my first website so I don't know how to remedy this situation so it appears the same across all browsers. Can anyone please help me so it looks the same on every browser?

Thanks in advance.

EDIT: I tried changing the other "height" values to 75% instead of HTML and none of them made a difference, then I changed them all back to 100% and even that didn't render correctly in Firefox, it still showed up as the small size. So maybe the problem is with something else? I still don't know what, though.

Re: AutoViewer is way too short in Firefox, IE, and Opera (SOLVED)

I've determined that in the line:

var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#161616" );

if I use a fixed height instead of 100% the problem does not occur, however I don't want to use a fixed height in the browsers that are functioning properly.

Does anyone know if there is a way to have Chrome and Safari use a relative height and have all other browsers use a fixed height?

Re: AutoViewer is way too short in Firefox, IE, and Opera (SOLVED)


setting the height of HTML divs across all the browsers can be tricky. Its usually a matter of trial and error. Try setting the height of your 'content' div to 100%.

Felix Turner
SimpleViewer Support Team.

Re: AutoViewer is way too short in Firefox, IE, and Opera (SOLVED)

Thanks, I was able to figure out that the problem was with IE, Firefox, and Opera needing the container height to be set, so I used jQuery to set the height of the content div to the viewport size minus the header size, and then had the flashcontent height set to 90% of that. I also set it to change the height on resize so now it not only has a consistent height across browsers, it accurately resizes when you resize the window. It's exactly what I was looking to do in the first place, so here is the code I used to help anyone else with this problem:

<script src="jquery-1.4.2.min.js"></script>
$(function() {
    $(window).bind('resize', function() {

$('#content').css('height', $(window).height()-139 + 'px');


#content is the div that the flash gallery is contained in, so rename that to reflect the div your gallery is in.

139 is the size of my header and I have no footer, so replace that with whatever the size of your header+footer is.

Re: AutoViewer is way too short in Firefox, IE, and Opera (SOLVED)

thanks for sharing your solution.

Felix Turner
SimpleViewer Support Team.