7 Replies Latest reply: Mar 15, 2013 10:07 PM by Moore6931 RSS

    Opening Web Site Shows Problem

    Moore6931 Community Member

      March 13, 2013

       

      Good day.

       

      The problem that I'm experiencing is upon opening the web page with Internet Explorer but not with Firefox.  Two photos are overlayed but the top photo should not be shown.

       

      The page layout includes thumbnail photos in vertical scrolling columns on both the left and right sides.  I use an XML file to specify which side the thumbnail photos are to be displayed.  In the middle of the page, a night photo is displayed.  When a thumbnail photo is selected with a mouse click, then the night photo is replaced with an enlarged version of the selected thumbnail.  When the mouse passes over the enlarged photo, then the night photo is displayed, again.

       

      The problem, when opening the page in Internet Explorer (IE 8), is that both the night photo and the first photo from the left thumbnail column are displayed (overlayed).  No thumbnails have been selected (mouse click), just opening the page.  With a quick mouse over the errant photo, the page functions as desired.  Firefox does not display this problem.

       

      I tried inserting a blank for the first photo but this put an empty photo box in the location.

       

      Please guide me in solving this problem.

       

      I thank you.

       

      Scott

        • 1. Re: Opening Web Site Shows Problem
          MurraySummers ACP/MVPs

          It's impossible to answer such questions without seeing the page and its underlying code. Please post a link to the page, and tell us where we should look.

          • 2. Re: Opening Web Site Shows Problem
            Jon Fritz II MVP

            I agree with Murray. Without seeing the code, it's very difficult to say what might be happening.

             

            I will add that you should run your site through the validator and clean out any errors. Errors in your HTML will cause IE to do all sorts of funky stuff.

             

            http://validator.w3.org/

            • 3. Re: Opening Web Site Shows Problem
              Moore6931 Community Member

              Because it is not complete and not functioning properly, it is accessible only on my computer.  The following is the code for what I think is the pertinent section.

               

              I thank you.

               

              Scott

               

               

              <script type="text/javascript">
              var dsdata = new Spry.Data.XMLDataSet("face_fun_photo.xml", "/gallery");

              var dsphoto = new Spry.Data.XMLDataSet("face_fun_photo.xml", "gallery/photos/photo");
              function MM_callJS(jsStr) { //v2.0
                return eval(jsStr)}


              function MM_effectAppearFade(targetElement, duration, from, to, toggle)

              {Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}
              function MM_effectBlind(targetElement, duration, from, to, toggle)

              {Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}

              </script>

               

              <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

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

               

              </head>

               

              <body class="oneColElsCtr">
              <div class="oneColElsCtr" id="#container">
               


                 
                <div class="leftwindow" id=".leftwindow"
                spry:region="dsphoto dsdata">
                <img src="{dsdata::thumbnail/@base}{name}" width = "{thumbwidth}px" height = "{thumbheight}px" hspace="5px" vspace="2px"
                onclick="dsphoto.setCurrentRow('{ds_RowID}');MM_effectAppearFade('selectedphoto', 1, 100, 100, false);MM_effectAppearFade('nightphoto', 1, 1, 0, false)"
                spry:repeat="dsphoto" spry:test="'{subject}'.search (/left/) !=-1;" /> 
                 
                  <!-- {<p>{email/base}{description}</p>} -->
                 
                 
                <!-- end #leftwindow --> </div>
                 
                <div class="nightphoto" id="nightphoto">
                    <img src="Photos/093012 San Benito Co Fair 006b 15x20L.jpg" width="800" height="600" alt="Face Painting at Night" />
                   
                    <!-- end #backgroundphoto --> </div>
                   
                    <div class="selectedphoto" id="selectedphoto" spry:detailregion = "dsphoto" >
                    <img src="Photos/{name}" alt="" width = {width}px height = {height}px align="absmiddle"
                    onmouseover="MM_effectAppearFade('selectedphoto', 1, 0, 0, false); MM_effectAppearFade('nightphoto', 1, 100, 100, false)" />
                    <br>
              <!-- end #selectedphoto --> </div>
                   
                   
                 
                 
                 
              <div class="rightwindow" id=".rightwindow"  spry:region="dsphoto dsdata">
              <img src="{dsdata::thumbnail/@base}{name}" width = "{thumbwidth}px" height = "{thumbheight}px" hspace="5px" vspace="20px"
              onclick="dsphoto.setCurrentRow('{ds_RowID}');MM_effectAppearFade('selectedphoto', 1, 100, 100, false);MM_effectAppearFade('nightphoto', 1, 1, 0, false)"
              spry:repeat="dsphoto" spry:test="'{subject}'.search (/right/) !=-1;" />
                   
                  
                   
                <!-- end #rightwindow --> </div>
                 
                      
                   
              <!-- end #container --> </div>
              </div>
              </body>

              • 4. Re: Opening Web Site Shows Problem
                MurraySummers ACP/MVPs

                Should this -

                 

                <div class="leftwindow" id=".leftwindow"

                 

                be this -

                 

                <div class="leftwindow" id="leftwindow"

                 

                ?

                • 5. Re: Opening Web Site Shows Problem
                  Moore6931 Community Member

                  I thank you, Murray.  I cleaned the code but still have the problem.  Per Jon's suggestion, I ran "validate" on the code.  Errors that I have not resolved are,

                   

                  The tag: “div” doesn’t have an attribute; “spry:region” in currently active versions.[XHTML 1.0 Transitional]

                   

                  The tag: “img” doesn’t hav an attribute: “spry:repeat” in currently active versions.[XHTML 1.0 Transitional]

                   

                  There are other errors but all have the same message related to spry.  The web page is functioning.  The meaning of the error message has not been apparent in my searches.  What do these mean?  They don't seem to be fatal errors but they are errors and should be resolved.

                   

                  As for the overlayed photo problem, if I were to specify the "z-index" for the two photos, would this force one photo to be behind the other?  In this situation, both photos would display but I could specify the visible photo.

                   

                  I thank you.

                   

                  Scott

                  • 6. Re: Opening Web Site Shows Problem
                    MurraySummers ACP/MVPs

                    You also fixed the id=".rightwindow"? Anyhow, it would be good to see the whole page, and its CSS - looking at a live page would be best. Can you post a link?

                     

                    Those spry alerts can be ignored. They mean that your use of a Spry widget has caused invalid (Spry-specific) markup to be inserted into those tags. But that will not interfere with the rendering of the page.

                     

                    As to the z-index question, only elements that have position:absolute or position:relative express a z-index.

                    • 7. Re: Opening Web Site Shows Problem
                      Moore6931 Community Member

                      Hello.  I'm sorry to be so long in responding.  The good news is that I've added the web page concept to my web site.  You can access it at,

                       

                      http://envisioningmoore.com/

                       

                      At the bottom of the home page is a link to the web page concept.  Unfortunately, I've not been able to publicly access the web page.  For about 12 hours, the GoDaddy web service has not responded.  They indicated that an errant node would be operational 8 hours ago but this is not the case.  Anyway, the link will show the overlay problem that I have described.

                       

                      Another bit of good news.  Murray, your comments about the z-index prompted me in further testing this feature, which I had not been able to use.  In research, the criteria of absolute or relative positioning of the items in conjunction with the z-index was missed by me.  New testing proved successful.  I'm believe that, with this knowledge, I can mask the photo overlay problem and provide a quality web page.  It's too late to work on this further, tonight, but will return to it.

                       

                      More later.

                       

                      I thank you.