10 Replies Latest reply: Jun 7, 2012 2:37 PM by Loretta Didricksen RSS

    Spry image slideshow works in dreamweaver but not in server

    RDISAPIO

      Hi im new to dw and and have installed a slideshow, it works great in dream weaver preview and live mode but once I upload to server I get a bunch of error

      codes that say it requires  all of the .js files. I reviewed the forum articles and tried all of the remedies that were listed from others that had the same problem.  I removed the spry files from the remote and reinstalled.  This did not work, I then removed the files from local and remote and tried a fresh install,still did not work.  I then tried to change the <script src="/spry-ui-1.7/includes/sprywidget.js" type="text/javascript"></script with the adobe insert, this did not work.  I

      have spent counless hours over the last week trying to get it to work and im lost,lost.lost.....can anyone help?  Inclosed is my code and my sit is

      patsiga.net

       

       

      <!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>pats iga supermarket</title>

      <link href="main.css" rel="stylesheet" type="text/css" />

      <script src="spryassets/sprymenu.js"type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>

      <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>

      <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

      <style type="text/css">

      body {

      background-color: #AF692A;

      }

      </style>

      <link href="spry ui 1-7.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />

      <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />

      <style type="text/css">

      /* BeginOAWidget_Instance_2141543: #ImageSlideShow */

       

      #ImageSlideShow {

      width: 960px;

      margin: 0px 0px 0px 0px;

      border: solid 0px #AAAAAA;

      background-color: #FFFFFF;

      padding-top: 0px;

      }

       

      #ImageSlideShow .ISSName {

      top: -24px;

      font-family: Arial, Helvetica, sans-serif;

      font-weight: normal;

      font-size: 18px;

      text-transform: uppercase;

      color: #AAAAAA;

      }

       

      #ImageSlideShow .ISSSlideTitle {

      top: -18px;

      font-family: Arial, Helvetica, sans-serif;

      font-weight: normal;

      font-size: 12px;

      overflow: hidden;

      color: #AAAAAA;

      text-transform: none;

      }

       

      #ImageSlideShow .ISSClip {

      height: 361px;

      margin: 0 0px 0px 0px;

      border: solid 0px #AAAAAA;

      background-color: #000000;

      }

       

      #ImageSlideShow .ISSControls {

      top: 11px;

      height: 361px;

      }

       

      #ImageSlideShow .FilmStrip {

      height: 0px;

      background-color: #CCCCCC;

      }

       

      #ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {

      width: 0px;

      height: 0px;

      }

       

      #ImageSlideShow .FilmStripTrack {

      height: 0px;

      }

       

      #ImageSlideShow .FilmStripContainer {

      height: 0px;

      }

       

      #ImageSlideShow .FilmStripPanel {

      height: 0px;

      padding-left: 10px;

      margin-right: 0px;

      }

       

      #ImageSlideShow .FilmStripPanel .ISSSlideLink {

      margin-top: 0px;

      border: solid 0px #AAAAAA;

      background-color: #FFFFFF;

      }

       

      #ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {

      border: solid 0px #AAAAAA;

      width: 56px;

      height: 47px;

      margin: 4px 4px 4px 4px;

      }

       

      #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {

      background-color: #FFFFFF;

      border-color: #FF0000;

      }

       

      #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {

      border-color: #AAAAAA;

      }

       

      /* EndOAWidget_Instance_2141543 */

      </style>

      <script type="text/xml">

      <!--

      <oa:widgets>

        <oa:widget wid="2141543" binding="#ImageSlideShow" />

      </oa:widgets>

      -->

      </script>

      </head>

       

      <body>

       

      <div class="container">

        <div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>

        <div class="container">

          <ul id="MenuBar1" class="MenuBarHorizontal">

            <li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>

            <li><a href="recepies.html" title="recepies">Recepies</a></li>

            <li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>

              <ul>

                <li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>

                <li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>

                <li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>

              </ul>

            </li>

            <li><a href="pats_best.html" title="pats best">Pat's Best</a></li>

            <li><a href="organics.html" title="organics">Organics</a></li>

            <li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>

            <li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>

              <ul>

                <li><a href="meats.html" title="dept_meats">Meats</a></li>

                <li><a href="seafood.html" title="dept_seafood">Seafood</a></li>

                <li><a href="deli.html" title="Dept_deli">Deli</a></li>

                <li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>

                <li><a href="produce.html" title="dept_produce">Produce</a></li>

                <li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>

              </ul>

            </li>

          </ul>

          <p> </p>

          <ul id="ImageSlideShow" title="">

            <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>

            <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>

            <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>

            <li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>

            <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>

          </ul>

          <script type="text/javascript">

      // BeginOAWidget_Instance_2141543: #ImageSlideShow

       

      var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {

      widgetID: "ImageSlideShow",

      widgetClass: "BasicSlideShowFS",

      injectionType: "replace",

      autoPlay: true,

      displayInterval: 4500,

      transitionDuration: 2000,

      componentOrder: ["name", "title", "view", "controls", "links"],

      sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },

      plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],

      TFSP: { pageIncrement: 5, wraparound: true }

      });

      // EndOAWidget_Instance_2141543

          </script>

      <p>Since this is a one-column layout, the .content is not floated. </p>

          <h3>Logo Replacement</h3>

          <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>

          <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>

          <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>

        <!-- end .content --></div>

        <div class="footer">

          <p><a href="about_us.html" title="about_us">About Us</a><a href="#">  </a>   <a href="employment.html" title="employment">Employment</a>    <a href="store_info.html" title="store_info"> Store Info.</a>     <a href="#" title="contact_us">Contact Us</a>    <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a>   <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />

      &copy;2011 Pat's IGA     <br />

          </p>

          <!-- end .footer --></div>

        <!-- end .container --></div>

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

      </script>

      </body>

      </html>

        • 1. Re: Spry image slideshow works in dreamweaver but not in server
          Ben Pleysier MVP

          Change

          <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>

          to

          <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>

           

          Gramps

          • 2. Re: Spry image slideshow works in dreamweaver but not in server
            RDISAPIO Community Member

            Thank you so much for responding, I tried this, I am new to it all so I changed this locally and remote tried it and its not working.  Did I do this correctly?

            • 3. Re: Spry image slideshow works in dreamweaver but not in server
              Ben Pleysier MVP

              This is what I see in the online version

              <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
              <script src="spry-ui-1.7/includes/sprywidgets.js"type= "text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
              <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>

              In other words, nothing has changed.

               

              Gramps

              • 4. Re: Spry image slideshow works in dreamweaver but not in server
                RDISAPIO Community Member

                Sorry about that, I changed it back to the orig. downloaded version when i noticed that it did not work.  I have put your sugestion back into action

                but  still will not work.  I should also mention that after changing the line to the adobe line I can no longer get it to work in live preview on dw, it says that it requires all of the .js files just as it does on the server.  So if you look at the server view you will see it as you wanted it.  I will benefit most if you

                elaberate more on what you want me to do, want to stick with your suggestions without derailing.  Thanks

                • 5. Re: Spry image slideshow works in dreamweaver but not in server
                  Ben Pleysier MVP

                  This is what you have now

                  <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.j s" type="text/javascript"></script>

                  There is a space between the j and s in the file extension, therefore the file cannot be found.

                   

                  This is what I want you to do:

                   

                  Remove the space between the j and s.

                   

                   

                  Gramps

                  • 6. Re: Spry image slideshow works in dreamweaver but not in server
                    RDISAPIO Community Member

                    Great! its getting there, local preview works great however browser view shows the loading wheel spinning against a black background.  In between replys

                    I will check past posts to see if I can find a answer to this situation.  Than you for being there.

                    • 7. Re: Spry image slideshow works in dreamweaver but not in server
                      RDISAPIO Community Member

                      I made some progress since my laso reply to you.  I have the spry slideshow working in safari and chrome but not firefox or IE, not sure what to do.

                      it seems that when i bring up my site on firefox the spry slideshow tries to load images, I then checked the page source and it seem that it does not

                      contain my latest changes to the image slideshow photo paths?? can you help?

                      • 8. Re: Spry image slideshow works in dreamweaver but not in server
                        Ben Pleysier MVP

                        On a Windows7 64bit system, using IE7/8/9 and FF6.0.2 there is no problem.

                         

                        Gramps

                        • 9. Re: Spry image slideshow works in dreamweaver but not in server
                          RDISAPIO Community Member

                          Sorry to be away from this for so long, had a hard week at work and no time to work on site.  To bring you up to date I

                          did get the slide show working,thanks to your input, but am wondering what a perm. fix to the corrupt files would be? where can I get a good copy of the files? I have a second question, there is about 35px of what looks like a magin white space between my nav bar and the slide show bow, how do I get rid of that?  thanks in advance.

                           

                           

                           

                           

                          <!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>pats iga supermarket</title>

                          <link href="main.css" rel="stylesheet" type="text/css" />

                           

                           

                          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                          <style type="text/css">

                          body {

                                    background-color: #AF692A;

                          }

                          </style>

                          <link href="spry ui 1-7.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />

                          <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>

                          <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>

                          <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>

                          <style type="text/css">

                          </style>

                          <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />

                          <style type="text/css">

                          /* BeginOAWidget_Instance_2141543: #ImageSlideShow */

                           

                           

                          #ImageSlideShow {

                                    width: 960px;

                                    margin: 0px 0px 0px 0px;

                                    border: solid 0px #AAAAAA;

                                    background-color: #FFFFFF;

                                    padding-top: 0px;

                          }

                           

                           

                          #ImageSlideShow .ISSName {

                                    top: -24px;

                                    font-family: Arial, Helvetica, sans-serif;

                                    font-weight: normal;

                                    font-size: 18px;

                                    text-transform: uppercase;

                                    color: #AAAAAA;

                          }

                           

                           

                          #ImageSlideShow .ISSSlideTitle {

                                    top: -18px;

                                    font-family: Arial, Helvetica, sans-serif;

                                    font-weight: normal;

                                    font-size: 12px;

                                    overflow: hidden;

                                    color: #AAAAAA;

                                    text-transform: none;

                          }

                           

                           

                          #ImageSlideShow .ISSClip {

                                    height: 361px;

                                    margin: 0 0px 0px 0px;

                                    border: solid 0px #AAAAAA;

                                    background-color: #000000;

                          }

                           

                           

                          #ImageSlideShow .ISSControls {

                                    top: 11px;

                                    height: 361px;

                          }

                           

                           

                          #ImageSlideShow .FilmStrip {

                                    height: 0px;

                                    background-color: #CCCCCC;

                          }

                           

                           

                          #ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {

                                    width: 0px;

                                    height: 0px;

                          }

                           

                           

                          #ImageSlideShow .FilmStripTrack {

                                    height: 0px;

                          }

                           

                           

                          #ImageSlideShow .FilmStripContainer {

                                    height: 0px;

                          }

                           

                           

                          #ImageSlideShow .FilmStripPanel {

                                    height: 0px;

                                    padding-left: 10px;

                                    margin-right: 0px;

                          }

                           

                           

                          #ImageSlideShow .FilmStripPanel .ISSSlideLink {

                                    margin-top: 0px;

                                    border: solid 0px #AAAAAA;

                                    background-color: #FFFFFF;

                          }

                           

                           

                          #ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {

                                    border: solid 0px #AAAAAA;

                                    width: 56px;

                                    height: 47px;

                                    margin: 4px 4px 4px 4px;

                          }

                           

                           

                          #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {

                                    background-color: #FFFFFF;

                                    border-color: #FF0000;

                          }

                           

                           

                          #ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {

                                    border-color: #AAAAAA;

                          }

                             

                          /* EndOAWidget_Instance_2141543 */

                          #MAIN_IMAGE_LINKS {

                                    background-color: #FFFFCC;

                                    height: 530px;

                                    width: 960px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_five {

                                    background-color: #FFF;

                                    float: left;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-right: 5px;

                                    margin-bottom: 10px;

                                    margin-left: 5px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_six {

                                    background-color: #FFF;

                                    float: left;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-right: 5px;

                                    margin-bottom: 10px;

                                    margin-left: 5px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_one {

                                    background-color: #677F3F;

                                    height: 35px;

                                    width: 300px;

                                    margin-top: 20px;

                                    margin-right: 5px;

                                    margin-bottom: 0px;

                                    margin-left: 20px;

                                    text-align: center;

                                    float: left;

                                    white-space: normal;

                                    color: #FFF;

                                    font-size: 18px;

                                    font-variant: normal;

                                    text-decoration: blink;

                                    font-weight: bold;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_one {

                                    background-color: #FFF;

                                    float: left;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-left: 20px;

                                    margin-right: 0px;

                                    margin-bottom: 5px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_three {

                                    background-color: #000;

                                    float: left;

                                    height: 35px;

                                    width: 300px;

                                    margin-top: 20px;

                                    margin-right: 5px;

                                    margin-bottom: 0px;

                                    margin-left: 5px;

                                    text-align: center;

                                    color: #F6901F;

                                    font-size: 18px;

                                    font-weight: bold;

                          }

                          .container .container #ADVERT_BAR {

                                    background-color: #F6901F;

                                    height: 35px;

                                    width: auto;

                                    color: #FFF;

                                    text-align: center;

                                    padding-top: 10px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_two {

                                    background-color: #000;

                                    height: 35px;

                                    width: 300px;

                                    margin-top: 20px;

                                    margin-right: 5px;

                                    margin-bottom: 0px;

                                    margin-left: 5px;

                                    text-align: center;

                                    float: left;

                                    color: #F6901F;

                                    font-size: 18px;

                                    font-weight: bold;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_four {

                                    background-color: #F6901F;

                                    height: 35px;

                                    width: 300px;

                                    text-align: center;

                                    float: left;

                                    margin-left: 20px;

                                    color: #FFF;

                                    margin-top: 5px;

                                    padding-top: 0px;

                                    font-size: 18px;

                                    font-style: normal;

                                    font-weight: bold;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_two {

                                    background-color: #FFF;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-right: 5px;

                                    margin-bottom: 5px;

                                    margin-left: 10px;

                                    float: left;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_three {

                                    background-color: #FFF;

                                    float: left;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-right: 10px;

                                    margin-bottom: 5px;

                                    margin-left: 5px;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_five {

                                    background-color: #F6901F;

                                    text-align: center;

                                    float: left;

                                    height: 35px;

                                    width: 300px;

                                    margin-top: 5px;

                                    margin-left: 10px;

                                    color: #FFF;

                                    padding-top: 0px;

                                    font-size: 18px;

                                    font-weight: bold;

                          }

                          .container .container #MAIN_IMAGE_LINKS #box_six {

                                    background-color: #F6901F;

                                    text-align: center;

                                    float: left;

                                    height: 35px;

                                    width: 300px;

                                    margin-top: 5px;

                                    margin-bottom: 0px;

                                    margin-left: 10px;

                                    color: #FFF;

                                    padding-top: 0px;

                                    font-size: 18px;

                                    font-weight: bold;

                          }

                          .container .container #MAIN_IMAGE_LINKS #image_box_four {

                                    background-color: #FFF;

                                    float: left;

                                    height: 200px;

                                    width: 300px;

                                    margin-top: 0px;

                                    margin-right: 5px;

                                    margin-bottom: 10px;

                                    margin-left: 20px;

                          }

                          </style>

                          <script type="text/xml">

                          <!--

                          <oa:widgets>

                            <oa:widget wid="2141543" binding="#ImageSlideShow" />

                          </oa:widgets>

                          -->

                          </script>

                          </head>

                           

                           

                          <body>

                           

                           

                          <div class="container">

                            <div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /><img src="images/H1180T2.jpg" width="699" height="136" alt="header_graphic" /></a></div>

                            <div class="container">

                              <ul id="MenuBar1" class="MenuBarHorizontal">

                                <li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>

                                <li><a href="recepies.html" title="recepies">Recepies</a></li>

                                <li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>

                                  <ul>

                                    <li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>

                                    <li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>

                                    <li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>

                                  </ul>

                                </li>

                                <li><a href="pats_best.html" title="pats best">Pat's Best</a></li>

                                <li><a href="organics.html" title="organics">Organics</a></li>

                                <li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>

                                <li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>

                                  <ul>

                                    <li><a href="meats.html" title="dept_meats">Meats</a></li>

                                    <li><a href="seafood.html" title="dept_seafood">Seafood</a></li>

                                    <li><a href="deli.html" title="Dept_deli">Deli</a></li>

                                    <li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>

                                    <li><a href="produce.html" title="dept_produce">Produce</a></li>

                                    <li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>

                                  </ul>

                                </li>

                              </ul>

                              <p> </p>

                              <ul id="ImageSlideShow" title="">

                                <li><a href="http://patsiga.net/images/fall.jpg" title=""><img src="http://" alt="dad and daughter"/></a></li>

                                <li><a href="http://patsiga.net/images/apples.jpg" title=""><img src="http://" alt="apple baskets" /></a></li>

                                <li><a href="http://patsiga.net/images/pumpkinsoup.jpg" title=""><img src="http://" alt="pumpkin soup" /></a></li>

                                <li><a href="http://patsiga.net/images/roast.jpg" title=""><img src="http://" alt="cooked roast" /></a></li>

                                <li><a href="http://patsiga.net/images/applepie.jpg" title=""><img src="http://" alt="apple pie alamode" /></a></li>

                              </ul>

                             

                              <DIV ID="ADVERT_BAR">DOUBLE MANUFACTURER COUPONS . POSTAGE STAMPS . FAX SERVICE . UPS SHIPPING SERVICE</DIV>

                              <div id="MAIN_IMAGE_LINKS">

                                <div id="box_one">VIEW OUR WEEKLY AD</div>

                                <div id="box_two">GIFT CARDS</div>

                                <div id="box_three">HEALTH & WELLNESS LINKS</div>

                                <div id="image_box_one"><a href="weekly_ad.html"><img src="images/weeklyad.jpg" width="300" height="200" alt="weekly ad" /></a></div>

                                <div id="image_box_two"><a href="gift_cards.html"><img src="images/GIFTCARD.jpg" width="300" height="200" alt="gift card" /></a></div>

                                <div id="image_box_three"><a href="community_links.html"><img src="images/girl_eating_apple.jpg" width="300" height="200" alt="girl eating apple" /></a></div>

                          <div id="box_four">PAT'S CATERING OPTIONS</div>

                                <div id="box_five">CAKES & PASTRIES</div>

                                <div id="box_six">ON LINE RECIPES</div>

                                <div id="image_box_four"><a href="catering_menu.html"><img src="images/Pats_Deli_Brochure.jpg" width="300" height="200" alt="catering brochure" /></a></div>

                                <div id="image_box_five"><a href="bakery.html"><img src="images/bakery_image.jpg" width="300" height="200" alt="bakery brochure" /></a></div>

                                <div id="image_box_six"><a href="recepies.html"><img src="images/RECEPIEMAIN.JPG.jpg" width="300" height="200" alt="recepies" /></a></div>

                              </div>

                            <script type="text/javascript">

                          // BeginOAWidget_Instance_2141543: #ImageSlideShow

                           

                           

                          var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {

                                    widgetID: "ImageSlideShow",

                                    widgetClass: "BasicSlideShowFS",

                                    injectionType: "replace",

                                    autoPlay: true,

                                    displayInterval: 4500,

                                    transitionDuration: 2000,

                                    componentOrder: ["name", "title", "view", "controls", "links"],

                                    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },

                                    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],

                                    TFSP: { pageIncrement: 5, wraparound: true }

                          });

                          // EndOAWidget_Instance_2141543

                              </script></div>

                            <div class="footer">

                              <p><a href="about_us.html" title="about_us">About Us</a><a href="#">  </a>   <a href="employment.html" title="employment">Employment</a>    <a href="store_info.html" title="store_info"> Store Info.</a>     <a href="#" title="contact_us">Contact Us</a>    <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a>   <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />

                          &copy;2011 Pat's IGA     <br />

                              </p>

                              <!-- end .footer --></div>

                          <!-- end .container --></div>

                          <script type="text/javascript">

                          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                          </script>

                          </body>

                          </html>

                           

                           

                           

                           

                           

                          @charset "UTF-8";

                          body {

                                    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

                                    background: #42413C;

                                    margin: 0;

                                    padding: 0;

                                    color: #000;

                          }

                           

                           

                          /* ~~ Element/tag selectors ~~ */

                          ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */

                                    padding: 0;

                                    margin: 0;

                          }

                          h1, h2, h3, h4, h5, h6, p {

                                    margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */

                                    padding-right: 15px;

                                    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */

                          }

                          a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */

                                    border: none;

                          }

                          /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

                          a:link {

                                    color: #42413C; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */

                          }

                          a:visited {

                                    color: #6E6C64;

                                    text-decoration: none;

                          }

                          a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */

                                    text-decoration: none;

                          }

                           

                           

                          /* ~~ this fixed width container surrounds the other divs ~~ */

                          .container {

                                    width: 960px; /* the auto value on the sides, coupled with the width, centers the layout */

                                    margin: 0 auto;

                                    background: #FFF;

                          }

                           

                           

                          /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

                          .header {

                                    background-color: #FFFFFF;

                          }

                           

                           

                          /* ~~ This is the layout information. ~~

                           

                           

                          1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

                           

                           

                          */

                           

                           

                          .content {

                           

                           

                                    padding: 10px 0;

                          }

                           

                           

                          /* ~~ The footer ~~ */

                          .footer {

                                    padding: 10px 0;

                                    background-color: #FDFDFD;

                                    font-size: 12px;

                                    font-weight: bold;

                                    text-align: center;

                          }

                           

                           

                          /* ~~ miscellaneous float/clear classes ~~ */

                          .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

                                    float: right;

                                    margin-left: 8px;

                          }

                          .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */

                                    float: left;

                                    margin-right: 8px;

                          }

                          .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */

                                    clear:both;

                                    height:0;

                                    font-size: 1px;

                                    line-height: 0px;

                          }

                          • 10. Re: Spry image slideshow works in dreamweaver but not in server
                            Loretta Didricksen Community Member

                            I used Dreamweaver to compare the SpryWidget.js file downloaded with the slideshow to the SpryWidget.js file found at http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js . The SpryWidget.js file that is downloaded automatically through Dreamweaver widgets seems to use a carriage return that was translated as one long line when I uploaded to my server.

                             

                            In other words, when I uploaded the file to my server the file became one long line instead of the normal file with many lines of script.

                             

                            The fix I used was to replace the defective SpryWidget file with the file on Adobe's website as listed above. It worked.