Topic: Problem with footer overlay in webkit browsers (chrome, safari)

Hi,

I seem to encounter a problem when embedding my simpleviewer a page. It works fine with Firefox, but it doesn't seem to work in Safari and Chrome. (I don't test IE, while having a mac).

I've used the FAQ and tried everything. It works fine in Firefox, but Chrome and Safari are just laughing at me: they hide the footer div when the simpleviewer (placed in an iframe) is loaded.

The problem is with this page: - had to remove link due to privacy issue

In Firefox the grass stays where it should be, at the bottom of the page. In Chrome and Safari it just disappears.

This is de code I use:

The index:

<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximum-scale=1;" />
    
    <title>Cynsart</title>

    <link rel="shortcut icon" type="image/x-icon" href="inc/image/favicon.ico">
    <link rel="stylesheet" href="inc/css/reset.css" media="screen" />
    <link rel="stylesheet" href="inc/css/font.css" media="screen" />
    <link rel="stylesheet" href="inc/css/screen.css" media="screen" />
    <link rel="stylesheet" href="svcore/css/simpleviewer.css" media="screen" />

    <script src="inc/js/library.js"></script>
    <script src="inc/js/default.js"></script>
  
        
</head>
<body>
<div id="container">

    <div id="navigation">
        <ul>
            <li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Cynwattes">Cynwattes</a></li>
            <li><a href="#" title="Haaksels">Haaksels</a></li>
            <li><a href="#" title="Fotografie">Fotografie</a></li>
            <li><a href="#" title="Tekeningen">Tekeningen</a></li>
            <li><a href="#" title="enZo">&amp;Zo</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
    </div>

    <div id="chainlink"></div>
    <div id="chainlink2"></div>

    <div id="logo"></div>
    <div id="content">
        <div class="background">
        
           <!--START SIMPLEVIEWER EMBED.-->
      
           
        <iframe id="iframe" wmode="transparent" src="simpleviewer_1.html" allowtransparency="true" width="902" height="500" scrolling="no">
        </iframe>
       
    
<!-- END SIMPLEVIEWER EMBED -->
            
        </div>
    </div>
</div>
<div id="rainbow"></div>
<div id="grass"></div>

</body>
</html>

The main CSS:

/*Styles*/

body {
    background: #12150c url('../img/background.jpg') no-repeat fixed center top;
}

#rainbow {
    background: url('../img/rainbow.png') no-repeat 0 0;
    width: 1186px;
    height: 736px;
    position: fixed;
    bottom: 0;
    right: 60%;
    z-index: -2;
}

#grass {
    background: url('../img/grass.png') no-repeat fixed left bottom;
    position: absolute;
    width: 1600px;
    height: 200px;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}

#container {
    width: 910px;
    position: relative;
    margin: 0 auto;
    padding-top: 65px;
}

#chainlink {
    background: url('../img/chainlink.png') repeat-y 0 0;
    position: absolute;
    left: 60px;
    top: 0px;
    height: 180px;
    width: 23px;
}

#chainlink2 {
    background: url('../img/chainlink.png') repeat-y 0 0;
    position: absolute;
    right: 60px;
    top: 0px;
    height: 180px;
    width: 23px;
}

#navigation {
    background: url('../img/navigation.png') no-repeat center top;
    margin: 0px auto 30px;
    height: 83px;
    width: 902px;
    position: relative;
    z-index:1;
    font: 46px/83px JellyCupcakes, Arial, sans-serif;
}

#navigation ul {
    margin: 0 auto;
    width: 760px;
}

#navigation ul li {
    float: left;
    margin-right: 25px;
}

#navigation ul li a {
    color: #EFEFEF;
    text-decoration: none;
}

#content {
    position: relative;
    width: 902px;
    margin: 0 auto;
    min-height: 500px;
    z-index: 1;
}

#content .background {
    background: url('../img/content_small2.jpg') repeat-y center top;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

#logo {
    background: url('../img/logo2.png') no-repeat 0 0;
    position: fixed;
    width: 158px;
    height: 102px;
    bottom: 20px;
    left: 50%;
    margin-left:370px;
    z-index: 3;
}

And the Simpleviewer in the iFrame page simpleviewer_1.html

<!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>Untitled Document</title>

<style>
#sv-container {
    position: relative;
    margin: 0 auto;
    z-index: 1;
</style>

</head>

<body>
  <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
            <script type="text/javascript">
                var flashvars = {};
                flashvars.galleryURL = "gallery.xml";
                var params = {};
                params.wmode = "opaque";
                var attributes = {};
                attributes.id = "svInstance";
                simpleviewer.ready(function () {
                simpleviewer.load("sv-container", "90%", "500px", "transparent", true, flashvars, params, attributes);
                });
            </script>
            <div id="sv-container"></div>
</body>
</html>

Anybody?

Last edited by Creans (2012-10-17 08:16:05)

Re: Problem with footer overlay in webkit browsers (chrome, safari)

For your #grass <div>, try using position: fixed; rather than position: absolute; (as you want it to be 'fixed' to the bottom of the browser window).

Steven Speirs
SimpleViewer Support Team.

Re: Problem with footer overlay in webkit browsers (chrome, safari)

Tnx, I tried fixed on the grass, but still gives the same problem: Chrome and Safari just eat the grass.

Re: Problem with footer overlay in webkit browsers (chrome, safari)

I tried it myself with positive results.
Before making the change, the grass disappeared when scrolling in Firefox 13.0.1, IE9, Chrome 20, Safari 5.1.7 and Opera 12 on my PC.
After making the change (changing position: absolute; to position: fixed; for the #grass <div> in the 'screen.css' file), the grass remains visible when scrolling in all browsers.
After making the change, you may have to clear your browser's cache before reloading your web page to ensure that your browser is not hanging onto and using the older version of your 'screen.css' file.

If this still does not make a difference in WebKit browsers on Mac, your could try embedding the gallery directly in your page rather than using an <iframe> to see if this makes any difference.
Please see the SimpleViewer Embedding Guide for details.

Steven Speirs
SimpleViewer Support Team.

Re: Problem with footer overlay in webkit browsers (chrome, safari)

I will try it again tonight.

The iframe is new: i tried the original embedding first but it gave the same problem.

Re: Problem with footer overlay in webkit browsers (chrome, safari)

Tried the original way of embedding and using fixed for the footer div, still doesn't work in webkit. Any other options?

Re: Problem with footer overlay in webkit browsers (chrome, safari)

You could try this workaround.
The problem arises when the user scrolls down to see the bottom of the gallery. You could configure your page so that all elements (including the gallery) are displayed on your page without the need for a vertical scroll bar.
Take a look at the Using a Resizable Gallery with a Header section of the SimpleViewer Embedding Guide, especially the 'View Vertical Resizable Gallery with Header Example'.
Try viewing this example and resizing your browser window. You will notice that the gallery dynamically resizes depending on the size of the browser window but it is always displayed in full (without cropping) and scroll bars are never displayed.
With the user unable to scroll, your grass image should always be displayed at the bottom of your gallery.
You can download the Resizeable Gallery example, examine the code and modify it to suit your needs.

Steven Speirs
SimpleViewer Support Team.