Topic: Browsers cutting off slideshow image

Safari 5 and Chrome 18 display my slideshows as they're meant to be seen. Firefox 11 and IE 9 cut the bottom 1/3 off. Why is that and what can I do to correct it? They are smaller displays (200x200px) built on SVPro2.3 and I'm not sure if that has anything to do with it. I have larger displays on my other 2 sites that were built on 2.2 and they show up just fine on all browsers.

Link to site: http://centerlinedesigngroup.com/

Re: Browsers cutting off slideshow image

As your galleries do not dynamically resize with the size of the user's browser window, try setting your gallery dimensions in absolute pixel values rather than as percentages.

Steven Speirs
SimpleViewer Support Team.

Re: Browsers cutting off slideshow image

Steven Speirs wrote:

As your galleries do not dynamically resize with the size of the user's browser window, try setting your gallery dimensions in absolute pixel values rather than as percentages.

I originally set all slideshows as:
Embed Options ->Gallery Width/Height 200/200

I also have the Fixed Layout turned on and set the Image Area W/H at the same dimensions (200/200). Am I creating a conflict by having it turned on?

Re: Browsers cutting off slideshow image

Am I creating a conflict by having it turned on?

No. The gallery's actual size on your page should be determined only by the dimensions in the embedding code, regardless of what settings you have used for your Fixed Layout.

I have used your main page and CSS file as a test template and have embedded a gallery directly in the page (rather than externally using widgets) using two techniques (embedding code and an <iframe>) and both galleries display in Firefox and Internet Explorer without any cropping. It looks like the problem is somehow introduced when the widget code comes into play.
Try embedding your galleries using <iframe>s on your widget pages rather than baseURL embedding code to see if this makes any difference.

For example, on this page: http://centerlinedesigngroup.com/Home_f … arkup.html
... change:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://centerlinedesigngroup.com/Gallery/CDGhome3/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "http://centerlinedesigngroup.com/Gallery/CDGhome3/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "#000000", true, flashvars);
});
</script>
<div id="sv-container" style="background-color: #000000;"></div>
<!-- END SIMPLEVIEWER EMBED -->

... to:

<iframe src="http://centerlinedesigngroup.com/Gallery/CDGhome3/index.html" width="200" height="200" frameborder="0" scrolling="no"></iframe>
Steven Speirs
SimpleViewer Support Team.

Re: Browsers cutting off slideshow image

I tried the iframe code in my widget and even though the frameborder is set to "0" it's putting a 10px border (shift?) on the slideshow and cuts off part of the right/bottom of the images. I set the "0" to "" and still get a border (shift?).

I have a couple other iframe widgets (non-SVPro2) in this website and Firefox/IE9 are cutting them off too, so I'm not sure switching to an iframe is going to resolve the issue within the webpage.

What makes no sense is that I have the same code for slideshows in these websites and they work fine on FF11 & IE9.

http://centerlinephotography.net/

http://centerlinegraphicdesign.com/

Last edited by PapaGeo09 (2012-04-04 00:47:42)

Re: Browsers cutting off slideshow image

I tried the iframe code in my widget and even though the frameborder is set to "0" it's putting a 10px border (shift?) on the slideshow and cuts off part of the right/bottom of the images. I set the "0" to "" and still get a border (shift?).

Try setting the margin and padding of the parent container of the <iframe> to '0' via CSS.

I have a couple other iframe widgets (non-SVPro2) in this website and Firefox/IE9 are cutting them off too, so I'm not sure switching to an iframe is going to resolve the issue within the webpage.

It would appear that the problem lies somewhere within your page and is not specifically related to SimpleViewer itself.

Your widget code pages are complete web pages (with <head> and <body> sections). Are you able to try using only snippets of HTML code (such as only an <iframe> or only the embedding code) instead of complete pages?

As my testing earlier suggested, the problem seems to arise from the use of the widget pages.
Putting the code from the widget pages directly into your main page seems to work fine.

Steven Speirs
SimpleViewer Support Team.