1 2 Previous Next 41 Replies Latest reply on Feb 13, 2012 7:47 AM by adninjastrator

    Flash File moves on load in ie browser

    12jimbo

      Hello Everybody!

       

      Recently I designed and programmed a website.... and today I have come across a problem..

       

      I have a problem with the flash file which moves on the website loading.  (this happens only in internet explorer web browser)

       

      Every other web browser like firefox, safari  it's loads totally fine.

       

       

      Please click on the URL link below and click on any buttons in the navigation bar with your mouse cursor. 

      (this must be viewed in internet explorer either ie7, ie8 or ie9)

       

      http://www.jetanddrain.co.uk/

       

       

      As you can see a quick blink, the flash file is at the very top left hand side before its in the correct position. (underneath the nav bar)

       

      It seems that the wmode / transparent is causing it.  If I remove wmode - it loads fine in ie. 

      But I need the transparent / wmode for the drop down menu to work (so its visible while the flash file is there.)

       

       

      Any advice would be appreciated - as I am really stuck!!

       

      Please can anybody reply!!

       

      Kind regards

        • 1. Re: Flash File moves on load in ie browser
          adninjastrator Level 4

          I did see a brief flicker the first time I loaded the page... could not repeat even after clearing cache. And while I've never seen wmode have any thing to do with positioning... maybe it could be the cause, but I very much doubt it.

          Also you don't have to use wmode transparent to get the drop down menu to work, wmode opaque would give the same result.

          I think the problem is in the use of absolute positioning for the elements on your page. When elements are positioned absolutely, they are removed from the natural flow of the page... that is the elements listed first in the code are parsed and rendered first and placed at the upper portion of the page, then as the browser reads down the page, displaying elements in the next section of code, then the next, from top to bottom.

          This is first

          this is second

          and so on.

          Giving a CSS position: absolute to any of these elements removes that element from the natural, top to bottom flow... the way a browser normally parses the page.

          If you look at the source code for your Web page, the Flash is positioned near the very bottom of the code, and checking the CSS for that element, sure enough, it's position: absolute.... as are most other elements on the page. Default position absolute is 0,0 topleft, which can be offset from the top and left, which in your case is top 333 and left 9.

          So I'd say that the reason it's displaying briefly at the very top left is because the element is absolutely positioned and nothing at all to do with wmode (which has no power to position anything).

          The reason the other browsers or wmode don't display the same as IE & wmode transparent is that you are able to get away with it in those browsers, that's all.

          Just a few of the posts in the Adobe DreamWeaver Forum related to absolute positioning.

          http://forums.adobe.com/message/4191725#4191725

          http://forums.adobe.com/message/4166246#4166246

          http://forums.adobe.com/message/4151609#4151609

          and

          http://apptools.com/examples/pagelayout101.php

          Sort of redesigning your page (which would fix the problem), you may want to try a more modern embedding method than the old AC_RUN.... something like this single <object> method :

          <object data="path_to_file/file.swf" type="application/x-shockwave-flash" width="insert_width_of_movie" height="insert_height_of_movie">

            <param name="movie" value="path_to_file/file.swf">

            <param name="SomeOtherParam" value="ParamValue">

          </object>

          Best wishes,

          Adninjastrator

          • 2. Re: Flash File moves on load in ie browser
            kglad Adobe Community Professional & MVP

            i don't see that problem with ie9 but i do see a site that could be improved by using javascript to change the text when a button is clicked.  there's no reason to repeatedly reload the same page elements (header, nav menu, swf slideshow, graphics and the entire right side of the page) because they don't change.  you should be using javascript to change the content of the only variable part of those pages.  that would stop the problem you're seeing too.

            • 3. Re: Flash File moves on load in ie browser
              12jimbo Level 1

              Adninjastrator

               

              thanks for your reply.  With your advice, are you saying that my CCS needs to move away from absolutely positioning ? 

               

              Would relative positioning solve the problem?

               

              As to your links for advice from your previous post.  This would mean changing  the Margins in CSS ??

               

              I have now added your modern version of embedding - thanks!   But Its still flickering! 

              • 4. Re: Flash File moves on load in ie browser
                adninjastrator Level 4

                Using any type of positioning, absolute or relative is rarely needed at all. "Best Practice" Page layout should be done via natural flow and CSS with floats and a few margins/padding added in.

                In rare instances, it's OK to use a declared position but that's only for specific purpose.... like a dropdown menu for example.

                Review the links I posted earlier... it's not just margins.

                If you start to place elements such as <p> or <img... on a page, they default to top, left, one element right after another.... no declared positioning required.

                So for example, on your page you might use a structure like this (copy/paste all this code into a new, completely blank html page)

                <!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=iso-8859-1" />
                <title>Untitled Document</title>
                </head>

                <body>

                <div id="wrapper">
                  <div id="top_banner">
                   <h2>banner image goes here</h2>
                  </div>
                 
                  <div id="menu">
                   <h2>menu content goes here</h2>
                  </div>
                 
                  <div id="flash_slideshow">
                   <h2>Flash content goes here</h2>
                  </div>
                 
                  <div id="content">
                   <h2>content stuff goes here</h2>
                  </div>
                 
                  <div id="footer">
                   <h2>footer content here</h2>
                  </div>  
                <!-- close wrapper -->
                </div>

                </body>
                </html>

                When you test the page you will see the content rendered from top to bottom.... no positioning at all used. That is the natural flow of the page.

                Special positioing and alignment will be handled by styles applied to the various <div> containers.

                Here is a pretty good source for various HTML questions:

                http://www.w3schools.com/html/default.asp

                CSS styling:

                http://www.w3schools.com/css/

                I don't see any quick and easy way to solve the problem short of rebuilding the site. However, you could reduce the number of times visitors see the flicker by following kglads advice and not link to other pages in the menu (and causing the flicker). Instead, just change parts of the existing page... and avoid the flickering.

                Best wishes,

                Adninjastrator

                • 5. Re: Flash File moves on load in ie browser
                  12jimbo Level 1

                  Thanks for your reply.  I thought this time I shall start from scratch,and see how the flash file would react in ie9.  Also this time using a wrapper

                   

                  it still fickers in ie9.  !!  what has gone wrong?

                   

                   

                  <!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=iso-8859-1" />

                  <title>Untitled Document</title>

                  <style type="text/css">

                  <!--

                  #wrapper {

                  width:981px;

                  height:2050px;

                  z-index:1;

                  margin-right: auto;

                  margin-left: auto;

                  position: relative;

                  }

                  body {

                  margin-left: 0px;

                  margin-top: 0px;

                  margin-right: 0px;

                  margin-bottom: 0px;

                  }

                  -->

                  </style>

                  </head>

                  <body>

                  <div id="wrapper">

                  <div id="top_banner">

                  <h2>banner image goes here</h2></div>

                  <div id="menu"><h2>menu content goes here</h2></div>

                  <div id="banner"><object data="images/drain_repair.swf" type="application/x-shockwave-flash" width="963" height="298"><param name="movie" value="path_to_file/file.swf"><param name="wmode" value="transparent"></object>

                  </div>

                  <div id="content">

                  <h2>content stuff goes here</h2></div>

                  <div id="footer"><h2>footer content here</h2></div>  

                  <!-- close wrapper -->

                  </div>

                  </body>

                  </html>

                  • 6. Re: Flash File moves on load in ie browser
                    kglad Adobe Community Professional & MVP

                    do you know javascript?

                    • 7. Re: Flash File moves on load in ie browser
                      12jimbo Level 1

                      thanks for your reply, why are you asking about the javascript?  no i dont know much about it.  is the javascript causing the problem with the flicker in ie?!

                      • 8. Re: Flash File moves on load in ie browser
                        adninjastrator Level 4

                        Can you upload this test page and post a link? also at this stage there is no need to declare position relative or use z-index.

                        I'd like to see the flicker you are talking about.

                        Adninjastrator

                        • 9. Re: Flash File moves on load in ie browser
                          12jimbo Level 1

                          i have now uploaded this behind the website. 

                           

                          here is the the link

                          http://www.jetanddrain.co.uk/test2.html

                           

                          The position relative and z - index has been removed

                           

                          have a look at ie and see what your comments are this time?

                          • 10. Re: Flash File moves on load in ie browser
                            adninjastrator Level 4

                            Does not display in IE.

                            To display in IE you need the path to the .swf here:

                            param name="movie" value="path_to_file/file.swf">

                            so put:

                            images/drain_repair.swf

                            as the value

                            • 11. Re: Flash File moves on load in ie browser
                              12jimbo Level 1

                              sorry what you have just mentioned makes no different at all.  it still flickers !!    feel free to look http://www.jetanddrain.co.uk/test2.html in ie9 or ie8

                              • 12. Re: Flash File moves on load in ie browser
                                12jimbo Level 1

                                its very puzzling isn't it??

                                • 13. Re: Flash File moves on load in ie browser
                                  adninjastrator Level 4

                                  That line of code is required in order for the Flash to display in IE... so it does make a difference... now I can at least see the Flash.... and I don't see any flicker, even after clearing cache and testing several times.... no flicker.

                                  So.... have you cleared the cache in your browser? What browser and operating system are you using? What is your screen resolution?

                                  I'm just not seeing any flicker like there was in your first link...The only thing I see is a blank space where the Flash is until the Flash file downloads... but it's in the exact location of the Flash... just the normal download delay.

                                  Adninjastrator

                                  • 14. Re: Flash File moves on load in ie browser
                                    12jimbo Level 1

                                    i am still seeing the ficker! at the very top left hand side - sorry no different!!  I have refreshed the web browser, empty the cache even restarted the pc. deleted temporary files, history, cookies, saved passwords..  i am running windows vista 32 bit

                                    what's the screen resolution got to do with this???  and lasty using ie9 which i certainly regret !

                                    • 15. Re: Flash File moves on load in ie browser
                                      12jimbo Level 1

                                      the screen res running on the pc is 1280 by 800 pixels   colours highest 32 bit

                                      • 16. Re: Flash File moves on load in ie browser
                                        kglad Adobe Community Professional & MVP

                                        this is why you should be using javascript:

                                         

                                        http://www.kglad.com/Files/forums/drain/

                                         

                                        i only coded your first two buttons (home,about us) but clicking back and forth between those two should be enough to show you the benefit.

                                        • 17. Re: Flash File moves on load in ie browser
                                          12jimbo Level 1

                                          thanks for your reply.  i have press home and about us.  they are both the same these pages.  now if you press refresh button at the top of your ie browser you will see that the flash fickers from the top left before it moves to the correct location.  Sorry i have to say that it looks like we are back to square one. 

                                           

                                          have a go and see that every thing loads in the correct postion apart from the flash file when you press the refresh button. http://www.kglad.com/Files/forums/drain/

                                          and you will see the odd one out.

                                          • 18. Re: Flash File moves on load in ie browser
                                            12jimbo Level 1

                                            have you had any more thoughts??

                                            • 19. Re: Flash File moves on load in ie browser
                                              adninjastrator Level 4

                                              Are you telling me that you are seeing a flicker when testing the test page... not the actual page.... and testing from the server?

                                              The one and only reason that the Flash would be up at the top left is because of absolute positioning..... there is almost no other way to move that element up there.

                                              kglad... are you seeing any flicker?

                                              Adninjastrator

                                              • 20. Re: Flash File moves on load in ie browser
                                                kglad Adobe Community Professional & MVP

                                                (if he sees no difference when clicking home and about us at

                                                 

                                                http://www.kglad.com/Files/forums/drain/

                                                 

                                                i don't think you can rely on his observations.)

                                                • 21. Re: Flash File moves on load in ie browser
                                                  12jimbo Level 1

                                                  adninjastrator thanks for your reply, 

                                                   

                                                   

                                                  reading your previous post:   this i am looking at the flash banner live in ie9 on the internet - not testing from the server or anything related to DW.  

                                                   

                                                  please find the link again.   http://www.jetanddrain.co.uk/test2.html    this is uploaded on the internet so its showing live and there is no absolute positioning in the html programming.

                                                   

                                                  why is it ficker at the top left hand side before it goes into the correct position ??

                                                   

                                                  try it yourself by pressing the refresh button at the top near the website address bar in ie9.  

                                                   

                                                  every time you press refresh button you will see the banner flickers top left hand side before it falls into the correct place.

                                                   

                                                  i look forward to hearing from you, with your comments

                                                   

                                                   

                                                  please see the html below:- as you can see there is no absolute positioning settings:

                                                   

                                                  <!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=iso-8859-1" />

                                                  <title>Untitled Document</title>

                                                  <style type="text/css">

                                                  <!--

                                                  #wrapper {

                                                  width:981px;

                                                  height:2050px;

                                                  margin-right: auto;

                                                  margin-left: auto;

                                                  }

                                                  body {

                                                  margin-left: 0px;

                                                  margin-top: 0px;

                                                  margin-right: 0px;

                                                  margin-bottom: 0px;

                                                  }

                                                  -->

                                                  </style>

                                                  </head>

                                                  <body>

                                                  <div id="wrapper">

                                                  <div id="top_banner">

                                                  <h2>banner image goes here</h2></div>

                                                  <div id="menu"><h2>menu content goes here</h2></div>

                                                  <div id="banner"><object data="images/drain_repair.swf" type="application/x-shockwave-flash" width="963" height="298"><param name="movie" value="images/drain_repair.swf"><param name="wmode" value="transparent"></object>

                                                  </div>

                                                  <div id="content">

                                                  <h2>content stuff goes here</h2></div>

                                                  <div id="footer"><h2>footer content here</h2></div>  

                                                  <!-- close wrapper -->

                                                  </div>

                                                  </body>

                                                  </html>

                                                  • 22. Re: Flash File moves on load in ie browser
                                                    12jimbo Level 1

                                                    kglad

                                                     

                                                    have a look at the simple progamming in internet explorer.  there are no absolute positioning settings as instructed by adninjastrator.  

                                                     

                                                    When it loads does it flicker?  Even you have emptied the cache in ie 9 ??

                                                     

                                                    Also press refresh button at the top of the web browser - does it flicker this time? 

                                                     

                                                    Does the flash banner box - flicker  - from top left hand side of the web browser and fall into the correct position?

                                                     

                                                    click on the url below:

                                                    http://www.jetanddrain.co.uk/test2.html

                                                    • 23. Re: Flash File moves on load in ie browser
                                                      12jimbo Level 1

                                                      kglad -  so what do you think about what I have just mentioned ?

                                                       

                                                       

                                                      kglad

                                                       

                                                      have a look at the simple progamming in internet explorer.  there are no absolute positioning settings as instructed by adninjastrator. 

                                                       

                                                      When it loads does it flicker?  Even you have emptied the cache in ie 9 ??

                                                       

                                                      Also press refresh button at the top of the web browser - does it flicker this time?

                                                       

                                                      Does the flash banner box - flicker  - from top left hand side of the web browser and fall into the correct position?

                                                       

                                                      click on the url below:

                                                      http://www.jetanddrain.co.uk/test2.html

                                                      • 24. Re: Flash File moves on load in ie browser
                                                        kglad Adobe Community Professional & MVP

                                                        your entire setup does what's expected when an html page loads and that doesn't make sense when relatively little on your various pages change from one nav click to another.

                                                         

                                                        you should be using something like:  http://www.kglad.com/Files/forums/drain/

                                                         

                                                        do you see any flicker/jumping when toggling between home and about us?

                                                        • 25. Re: Flash File moves on load in ie browser
                                                          12jimbo Level 1

                                                          Kglad, thanks for your reply.  i dont think you have read my last post properly. I think we are going round circles! 

                                                           

                                                          what I am enquiring about is this programming http://www.jetanddrain.co.uk/test2.html  as to what Adninjastrator advise me to do. 

                                                           

                                                          forget about my website for the moment. have a look at this link -----> http://www.jetanddrain.co.uk/test2.html

                                                           

                                                          does it flicker in ie8 or ie9 ??  also try the refresh button - does it flicker from the top left hand side then fall into the correct position?

                                                           

                                                          Yes or No? 

                                                          • 26. Re: Flash File moves on load in ie browser
                                                            kglad Adobe Community Professional & MVP

                                                            i don't see a problem with ie9.

                                                            • 27. Re: Flash File moves on load in ie browser
                                                              adninjastrator Level 4

                                                              Here is a quick screen capture of the link:

                                                              http://www.cidigitalmedia.com/tutorials/flicker/flicker.html

                                                              Is this what you are seeing/calling the flicker?...... the little x in the top left corner of the Flash <object>?... not the top left corner of the browser window?

                                                              In this case the little x shows while the .swf is being loaded.... IE happens to use the little x in a box while FF does not... so that may be what's confusing. The browser leaves that space blank in FF (or with a little x in IE) while it's downloading the .swf. The faster the connection, the faster the .swf loads...in a very fast connection, the viewer will not even see the little x. It a slower connection, the rest of the page will finish loading the then.... eventually the .swf will finish downloading and pop into place.

                                                              There are a number of options to deal with this... but you can't get rid of the small x in IE and the .swf will only download as fast as the visitors Internet connection will allow.

                                                              1. reduce the file size of the .swf so it will download faster. If quality starts to suffer, reduce the display dimensions of the .swf so a smaller file size will not hurt the quality.

                                                              2. display a background image in the <div> which contains the Flash <object>. Keep the file size low so that it will load quickly. The small x may display for just a moment but will not be as noticable if an image is in the Flash container <div>. Use Flash to "Export" the first frame of the .fla as a .jpg so the image will be the exact same as the first part of the .swf. To set background image in CSS:

                                                              http://www.w3schools.com/cssref/pr_background-image.asp

                                                              3. use swfobject to provide alternate content, like an image that will display before the .swf is downloaded.... but there will still be the download time before the .swf displays:

                                                              http://code.google.com/p/swfobject/

                                                              Of the above options, #2 is probably the easiest to implement and test.

                                                              Best of luck,

                                                              Adninjastrator

                                                              • 28. Re: Flash File moves on load in ie browser
                                                                12jimbo Level 1

                                                                thats great we are now getting some where. 

                                                                 

                                                                Now if you have no flickers in ie9.  why is it flickering on my ie9? 

                                                                 

                                                                can you test it to see if it flickers in ie8 ?  by maybe using the developer tools in ie9 ?   Can you please let me know

                                                                 

                                                                i have tried to empty the cache in ie9 and restart my pc but no luck with the flicker.   what do you think is causing my ie9 to flicker?

                                                                • 29. Re: Flash File moves on load in ie browser
                                                                  12jimbo Level 1

                                                                  Have a look at this video.  I have quickly done this with video on my mobile phone. As you can see the flicker each time i refreshed ie9. 

                                                                   

                                                                  click on the url below and play the short video to see the results in ie9.   (you might have to carefully watch it to see the side effect)

                                                                   

                                                                  http://tinypic.com/r/34pfhxv/5

                                                                   

                                                                  There are no flickers in firefox, safari, opera, chrome.  So if there is a internet speed / download problem why is it only effecting  ie9?

                                                                   

                                                                  The flash file in the jetanddrain.co.uk/test2.html  is 216 kb.  Also my internet is virgin cable so i am not having any problems with download or internet speed at the moment. (touch wood !)

                                                                   

                                                                  I dont mind if it flickers in the correct position. But I really find it annoying that it flickers from the top left - outside of the website. 

                                                                   

                                                                  I am happy to reduce the flash file - maybe another 10% off the actual flash file but I dont think this causes the problem. 

                                                                   

                                                                  I can even try now on the test site and reduce the flash file down a silly amount and i will let you know when done.   what do you think?

                                                                  • 30. Re: Flash File moves on load in ie browser
                                                                    adninjastrator Level 4

                                                                    The reason it flickers in one browser and not another is due to the download speed of one users Internet connection speed compared to another.... has nothing to do with the actual browser. The faster the connection speed, the less time it takes to download the file... given a fast enough connection, you will not see any flicker.

                                                                    Options to mask this download time are listed in my earlier post.

                                                                    If those don't do the trick, you might want to use a Flash preloader... you know the 20%, 50%, etc:

                                                                    http://www.republicofcode.com/tutorials/flash/as3preloader/

                                                                    or Google "Flash preloader" for tons of other examples.

                                                                    Best wishes,

                                                                    Adninjastrator

                                                                    • 31. Re: Flash File moves on load in ie browser
                                                                      kglad Adobe Community Professional & MVP

                                                                      style the swf containing div to be hidden until the swf loads.

                                                                      • 32. Re: Flash File moves on load in ie browser
                                                                        adninjastrator Level 4

                                                                        As for your video.. I have no idea why it's flickering up in the top left!

                                                                        It's not something that I see on my browser nor can I replicate it.

                                                                        I suggest you test that page on several machines besides your own. I just don't think you'll see that on any other machine.

                                                                        Adninjastrator

                                                                        • 33. Re: Flash File moves on load in ie browser
                                                                          12jimbo Level 1

                                                                          Adninjastrator and Kglad

                                                                           

                                                                          I have finally cracked it.  Would you both like to know what the solution is??   Its so simple you would not believe it  

                                                                          • 34. Re: Flash File moves on load in ie browser
                                                                            adninjastrator Level 4

                                                                            Ahhhhh let's see... after spending a couple hours on this one....

                                                                            Of course!!

                                                                            Adninjastrator

                                                                            • 35. Re: Flash File moves on load in ie browser
                                                                              12jimbo Level 1

                                                                              OK here we go... I dont know if its going to be embrassing for you or me?!

                                                                               

                                                                              I do all the web / graphic design work on my Apple Computer. 

                                                                               

                                                                              As you probably know that Apple computers cant really use internet explorer.  (Unless you set up windows in your Mac) 

                                                                               

                                                                              And I have only got one PC to check the websites in Internet Explorer.  

                                                                               

                                                                              All the time, I have been blogging on my Apple computer to Adobe discussions. 


                                                                              I decided to blog on my PC and Adobe warning appears - need to update from Adobe website !


                                                                              This was not showing on my PC updates from my control panel. (and YES I have previously checked for updates from the control panel on my PC)


                                                                              Ahhhhh all the way along... WHY did no one mention about updating Flash Player?!!


                                                                              You probably thought I was getting difficult and awkward in the discussions! - As I was getting to the end of my tether!! 

                                                                               

                                                                              Hopefully we will both learn from this.    And by the way... thanks for your help AND patience!


                                                                              • 36. Re: Flash File moves on load in ie browser
                                                                                kglad Adobe Community Professional & MVP

                                                                                it doesn't do much good for you to update your flash player.  that just means you no longer see the problem.  everyone else that's using whatever you were using is going to see what you were seeing.

                                                                                • 37. Re: Flash File moves on load in ie browser
                                                                                  12jimbo Level 1

                                                                                  its me again, as kglad has just now appeared and replied.

                                                                                   

                                                                                  with Adninjastrator previous advice, I am going to strip down the website - remove absolute positioning settings and add the modern embedding method

                                                                                   

                                                                                  hopefully this will resolved the problem with the older flash player versions.

                                                                                  • 38. Re: Flash File moves on load in ie browser
                                                                                    12jimbo Level 1

                                                                                    at the end of the day - you did mention that you where showing no side effects in ie9?   As you probably update your flash player every so often.

                                                                                     

                                                                                    so maybe the "others" should be updating their flash player from their control panel on their PC?   if that can be solved that way - rather than going to Adobe website for updates.

                                                                                    • 39. Re: Flash File moves on load in ie browser
                                                                                      12jimbo Level 1

                                                                                      Kglad, what do you think about the latest comment from me?

                                                                                      1 2 Previous Next