Topic: Adding margin to boxed tiltviewer

Using the boxed.html page included with the PRO version as a template, I've constructed a Tiltviewer display page that functions as designed.  In order to align the Tiltviewer with the header graphic above it in my over/under frameset, I need a left margin of 37px.  I've tried several methods to add this margin but nothing seems to work (i.e. posleft, margin, padding tags).  I even tried to insert a 37px image and <span> the <div> container to space the Tiltviewer but to no avail.

Below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">

<title>Color Fusion Gallery</title>

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">   

/* hide from ie on mac \*/
    //used for object detection browser compatibility
    if (!document.getElementById) { if (document.all) { document.getElementById = function (id) { return document.all[id]; } } else { document.getElementById = function (id) { return document.layers[id]; } } }
    body {
        background-color: #000000;
        font: .8em/1.3em verdana,arial,helvetica,sans-serif;
        width: 923px;
        margin: 37;         <--tried these independently
        padding: 37;       <--tried these independently
    #flashcontent {
        width: 100%;
        height: 640px;
        border: thin #999999 solid;
        posleft: 37px;      <--tried these independently
    <img src="imgs/tiltspacer.jpg" alt="" width="37" height="5" />    <--tried these independently
<div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player. <a href="">Get Flash here.</a></div>
<p><script type="text/javascript">
        var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#FFFFFF");           
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // … tions.html
        // To use images from Flickr, uncomment this block
        //fo.addVariable("useFlickr", "true");
        //fo.addVariable("user_id", "48508968@N00");
        //fo.addVariable("tags", "jump,smile");
        //fo.addVariable("tag_mode", "all");
        //fo.addVariable("showTakenByText", "true");           
        // To use local images defined in an XML document, use this block       
        fo.addVariable("useFlickr", "false");
        fo.addVariable("xmlURL", "gallery.xml");
        //GENERAL OPTIONS       
        fo.addVariable("useReloadButton", "false");
        fo.addVariable("columns", "4");
        fo.addVariable("rows", "3");
        fo.addVariable("bkgndInnerColor", "0x000000");
        fo.addVariable("bkgndOuterColor", "0x000000");               
        fo.addVariable("frameColor", "0xFFFFFF");
        fo.addVariable("navButtonColor", "0x000000");
        //fo.addVariable("showFlipButton", "true");
        //fo.addVariable("showLinkButton", "true");
        //fo.addVariable("linkLabel", "Contact Us");
        fo.addVariable("backColor", "0xcccccc");
        //fo.addVariable("langGoFull", "Go Fullscreen");
        //fo.addVariable("langExitFull", "Exit Fullscreen");
        //fo.addVariable("langAbout", "About");   
        //PRO OPTIONS
        //fo.addVariable("bkgndTransparent", "true");
        //fo.addVariable("showFullscreenOption", "false");
        fo.addVariable("frameWidth", "5");
        fo.addVariable("zoomedInDistance", "1400");
        fo.addVariable("zoomedOutDistance", "4000");
        //fo.addVariable("fontName", "Times");
        fo.addVariable("titleFontSize", "60");
        //fo.addVariable("descriptionFontSize", "32");
        //fo.addVariable("linkFontSize", "41");
        //fo.addVariable("linkTarget", "_self");
        //fo.addVariable("flipButtonColor", "0x0000FF");
        //fo.addVariable("textColor", "0xFFFFFF");
        //fo.addVariable("linkTextColor", "0x000000");
        //fo.addVariable("linkBkgndColor", "0xFFFFFF");
        fo.addVariable("enableSounds", "false");
        fo.addVariable("tiltAmountIn", "0");
        fo.addVariable("tiltAmountOut", "0");
        fo.addVariable("navButtonColor", "0x333333");
<img src="imgs/tiltspacer.jpg" alt="" width="37" height="5" />
<h6>Copyright (c) Galleria Marconi 2009</h6>

Any Ideas?

Thanks in advance.

Re: Adding margin to boxed tiltviewer

I found my solution and all is well.

For anyone else having this issue, here is my fix:

I added the margin: 50px; and padding: 0px; tags to the #flashcontent style.  See below for the example.

#flashcontent {
        width: 100%;
        height: 640px;
        border: false;
        margin: 50px;
        padding: 0px;

I figured I'd post my fix so that it may help someone else here.


Re: Adding margin to boxed tiltviewer

thanks for sharing!

Felix Turner
SimpleViewer Support Team.