• Registered: 2010-11-16
  • Posts: 3

Topic: Autoviewer displays tiny in FF and the entire page is blank in Safari

Hi all,

If I preview my page in Dreamweaver - Safari it displays just fine. If I preview in Firefox the gallery looks about 20% of the actual size.
When I upload the site to the server via Cyberduck it displays the same on Firefox. The page is completely white in Safari... no header, nothing.  Any ideas!? Thanks!

The URL is http://www.jasonvilla.com/website/commercial/

Last edited by jasonvilla (2010-11-16 06:10:51)

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

That is happening, because of your HTML errors such as missing a <html xmlns="http://www.w3.org/1999/xhtml"> tag right after your doctype, a <body> tag, an extra </div> tag and you have open comment tags that you haven't closed.

Your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>J A S O N V I L L A P H O T O G R A P H Y</title> 
<script type="text/javascript" src="swfobject.js"></script> 
 
<style type="text/css"> 
<!--
html {
        height: 100%;
        overflow: hidden;
        text-align: center;
        padding: 0;
        margin: 0;
        
}
 
#header {
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 116px;
    padding: 0;
}
 
#flashcontent {
        height: 100%;
    }
</style> 
 
</head> 
  <div id="header"><img src="images/headermap.png" width="800" height="116" border="0" usemap="#Map" /> 
    <map name="Map" id="Map"><area shape="rect" coords="729,40,800,61" href="mailto:info@jasonvilla.com" /><area shape="rect" coords="692,73,800,94" href="/music" /><area shape="rect" coords="611,73,681,94" href="/places" /><area shape="rect" coords="524,73,601,94" href="/product" /><area shape="rect" coords="408,73,513,94" href="http://www.jasonvilla.com/website/commercial" /> 
      <area shape="rect" coords="0,20,308,112" href="http://www.jasonvilla.com/website" /> 
      <area shape="rect" coords="320,73,391,94" href="/fashion" /> 
    </map> 
  </div> 
  
<div id="flashcontent">AutoViewer requires Adobe Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Adobe Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a></div>    
    <script type="text/javascript"> 
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "80%", "8", "#FFFFFF" );
  
        fo.addParam("quality", "best");
        fo.write("flashcontent");    
        fo.addVariable( "langOpenImage", "Open Image in New Window" );
        fo.addVariable("langAbout", "About");    
    </script> 
   </div> 
</body> 
</html>

Should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>J A S O N V I L L A P H O T O G R A P H Y</title> 
<script type="text/javascript" src="swfobject.js"></script> 
 
<style type="text/css"> 
//<![CDATA[
html {
        height: 100%;
        overflow: hidden;
        text-align: center;
        padding: 0;
        margin: 0;
        
}
 
#header {
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 116px;
    padding: 0;
}
//]]>
#flashcontent {
        height: 100%;
    }

</style> 
 
</head>
<body> 
  <div id="header"><img src="images/headermap.png" width="800" height="116" border="0" usemap="#Map" /> 
    <map name="Map" id="Map"><area shape="rect" coords="729,40,800,61" href="mailto:info@jasonvilla.com" /><area shape="rect" coords="692,73,800,94" href="/music" /><area shape="rect" coords="611,73,681,94" href="/places" /><area shape="rect" coords="524,73,601,94" href="/product" /><area shape="rect" coords="408,73,513,94" href="http://www.jasonvilla.com/website/commercial" /> 
      <area shape="rect" coords="0,20,308,112" href="http://www.jasonvilla.com/website" /> 
      <area shape="rect" coords="320,73,391,94" href="/fashion" /> 
    </map> 
  </div> 
  
<div id="flashcontent">AutoViewer requires Adobe Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Adobe Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a></div>    
    <script type="text/javascript"> 
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "80%", "8", "#FFFFFF" );
  
        fo.addParam("quality", "best");
        fo.write("flashcontent");    
        fo.addVariable( "langOpenImage", "Open Image in New Window" );
        fo.addVariable("langAbout", "About");    
    </script>
</body> 
</html>
Mike Richards
SimpleViewer Support Team.
  • Registered: 2010-11-16
  • Posts: 3

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

Thank you for the reply!!!  Thank you for pointing those mistakes out. Everything works in safari now and scales pretty well. However the same problem remains in FF.  I copied your code and it caused the header to disappear, so I removed the "//<![CDATA[" and that brought it back. The gallery is tiny in FF with or without it.  Any more ideas?? Thanks in advance!
Jason

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

Try adding the following to your CSS, remember to clear your browser's cache after making these changes.

body {
 height: 100%;
}
Mike Richards
SimpleViewer Support Team.
  • Registered: 2010-11-16
  • Posts: 3

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

body {height: 80%;} did the trick! Thank you!

  • JKMS
  • Member
  • Offline
  • Registered: 2010-12-02
  • Posts: 1

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

That didn't work for me. I had to solve it with a streched pixel.  :/ 

<table align="center">
  <tr>
    <td width="749">
      <!--START SIMPLEVIEWER EMBED.-->
      <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
      <script type="text/javascript">
        jQuery(document).ready(function () {
          SV.simpleviewer.load("sv-container", "100%", "100%", "FFFFFF", true );
        });
      </script>

      <div id="sv-container"></div>
      <!-- END SIMPLEVIEWER EMBED -->
    </td>
    <td width="1">
      <img src="empty.png" height="700" width="1" alt="" />
    </td>
  </tr>
</table>

Edit: My problem might be related to the fact that I am using Mozilla Firefox for Ubuntu canonical - 1.0.  :rolleyes:

Last edited by JKMS (2010-12-02 18:17:46)

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Autoviewer displays tiny in FF and the entire page is blank in Safari

@JKMS  If you would like us to take a look please post the URL of your gallery.

Mike Richards
SimpleViewer Support Team.