Topic: Center Align troubles

I am having trouble aligning center.  I have tried several of the fixes here but my gallery is still aligning left.  My website is a bit of a mess and am in the process of getting it redone but I would like to have the gallery up until it is finished. 

http://www.essentialskinandbeauty.com/services.html
under the makeup services tab

<div style="text-align: center;" class="TabbedPanelsContent">
<p class="style2"><img src="dividers-03.png" height="55" width="907" /></p>
<p class="style2"><b><i><br /></i></b></p>
<p class="style2"><b><i><br /></i></b></p>
<p class="style2"><b><i>Makeup Services</i></b></p>
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://www.essentialskinandbeauty.com/My Gallery/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">// <![CDATA[
var flashvars = {};
flashvars.baseURL = "http://www.essentialskinandbeauty.com/My Gallery/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "800%", "400%", "transparent", true, flashvars);
});
// ]]></script>
<div id="sv-container" style="margin: 0 auto;"></div>
<!-- END SIMPLEVIEWER EMBED -->

Re: Center Align troubles

You gallery currently has a width of 800% (8 times the width of its parent container) and a height of 400% (4 times the height of its parent container.
Try changing these values to 100% and 600px respectively (so that the gallery's width matches that of its parent container and the gallery's height is 600px).
Change:

simpleviewer.load("sv-container", "800%", "400%", "transparent", true, flashvars);

... to:

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

Hopefully this will help.

Steven Speirs
SimpleViewer Support Team.

Re: Center Align troubles

Steven Speirs wrote:

You gallery currently has a width of 800% (8 times the width of its parent container) and a height of 400% (4 times the height of its parent container.
Try changing these values to 100% and 600px respectively (so that the gallery's width matches that of its parent container and the gallery's height is 600px).
Change:

simpleviewer.load("sv-container", "800%", "400%", "transparent", true, flashvars);

... to:

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

Hopefully this will help.

Nope.  now it is just smaller and on the left side and cut off.

Re: Center Align troubles

I think the problem may be that your gallery is loaded as soon as the page is displayed but when the page is displayed, the gallery's parent container is not visible. The gallery's parent container is visible only when the tab is clicked.
As the gallery's parent container is not visible when the gallery is being displayed, SimpleViewer has no way of knowing what its own width should be. The gallery's width is expressed as a percentage but this is a percentage of an unknown quantity.

There are two possible solutions to this.

(1) Give your gallery an absolute fixed width (such as 800px).

... or:

(2) Load your gallery on demand (when the tab is clicked instead of when the page is first loaded).
In order to do this, you would need to put your gallery's embedding code into a JavaScript function and run the function when the tab is clicked (either using JavaScript onclick or jQuery click).

The first of these suggestions would be the easier to implement.

Steven Speirs
SimpleViewer Support Team.