1 Topic by peekel (edited by peekel 2012-05-09 20:55:50)

  • Registered: 2012-04-28
  • Posts: 6

Topic: Simpleviewer gallery background in IE8 is white

Hi there,

I recently bought the Simpleviewer Pro software. A nice feature to build my galleries.
At home I checked the galleries in IE9 and Chrome 18.0.1025.168. In both explorers the galleries worked fine.
However in IE8 at work the galleries do have a white background. This is not what I want.

During the build of my website (www.kijkopfotografie.nl) I ran into an issue in which the website menu was overlapped by the simpleviewer galleries. By setting the "Background Transparent" to "Yes" the problem was solved. I have as Background Color setting the color black (#000000). The galleries are put into the website via the <iframe> code.
Can you help me to solve this problem?
Thanks in advance.

Regards,
Marcel Peekel

EDIT: When I (offline at my own pc) turn of the background transparency a curious thing happens. When I visit the "Kijk op AWD" gallery under "Workshop" the menu is falling behind the simpleviewer gallery. When I than visit the "Landschappen" gallery under "Gallery" the menu is back on top of the simpleviewer gallery. When I go back to the "Kijk op AWD" gallery it falls behind the simpleviewer gallery again.

EDIT2: Just found at this place "http://www.simpleviewer.net/simpleviewe … tml#params" advice to set the Background Color to "transparent". The embed setting was Background color = "000000". Background transparency = "No". Next I did the following:

The code of "index.html" of the simpleviewer gallery itself was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Kijk op de AWD</title>
</head>

<body>

    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '900', '600', '000000', true, null, null, null, false);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->

</body>
</html>

I changed directly in the code (without using svBuilder) the simpleviewer.load line to the following:"

        simpleviewer.load('sv-container', '900', '600', 'transparent', true, null, null, null, false);

That worked out fine.

However when I use svBuilder again to update my gallery with a new picture the menu drops again behind the simpleviewer gallery.

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Simpleviewer gallery background in IE8 is white

In order to have a drop-down menu in front of your SimpleViewer gallery, you must set the gallery's background to be 'transparent' in the embedding code:

simpleviewer.load("sv-container", "100%", "100%", "transparent", true);

If embedding in an <iframe>, you must also add the allowtransparency="true" attribute to the <iframe> code:

<iframe src="http://www.example.com/gallery/index.html" allowtransparency="true" width="800" height="600" frameborder="0" scrolling="no"></iframe>

If you want the gallery's background to be a color, you can then set this via CSS to the <div> into which the gallery is embedded:

<div id="sv-container" style="background-color: #222222;"></div>

After making any changes, clear your browser's cache before reloading the gallery.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-04-28
  • Posts: 6

Re: Simpleviewer gallery background in IE8 is white

Hi Steven,

Thanks for the quick respons. Your advise was a push in the right direction. The menu is not overlapped by the simpleviewer gallery and the background is now black instead of white in IE8.

I did the following in the iframe containing page:

<iframe src="..../.../index.html" allowtransparency="true" style="background-color:#000000" width="1000px" height="600px" frameborder="0" scrolling="no" align="middle"></iframe>

and the following is the embedding code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Kijk op de AWD</title>
</head>

<body>

    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '900', '600', 'transparent', true, null, null, null, false);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->

</body>
</html>

I did not use the CSS-part but added the [style="background-color:#000000" ] to the iframe-part.
If I use the CSS-part in the embedding-code instead of in the iframe-part my iframe area surrounds the gallery with white.
And the CSS-coding disapears when I update the gallery via svBuilder.

Thanks again for the quick respons. My problem of overlapping menu's and white background in IE8 is solved.  :)

Regards,
Marcel