9 Replies Latest reply on Apr 14, 2012 9:01 AM by seanmc81

    IE Stacking Issue and Video Playback

    seanmc81 Level 1
    seanmc81 Apr 10, 2012 1:01 PM

      This page works great in every browser except IE. It's giving me a weird stacking problem and the video isn't even appearing on the page (although the audio is working). Any suggestions as to why this is happening? Thanks.

        • 2. Re: IE Stacking Issue and Video Playback
          Rik Ramsay Level 4
          Rik Ramsay Apr 10, 2012 1:29 PM (in response to seanmc81)

          A few things that might help you. I haven't looked too deeply into the video but...

          • Your doctype should be the very first line on the page. IE expects it to be.
          • You use HTML5 tags but without an HTML5 doctype. I would advise you change the doctype to match the content.
          • The video doesn't play in FF as you are using the HTML5 video element without the .ogg video type. See this: http://diveintohtml5.info/video.html
          1 person found this helpful
          • 3. Re: IE Stacking Issue and Video Playback
            seanmc81 Level 1
            seanmc81 Apr 10, 2012 1:54 PM (in response to Rik Ramsay)

            Good call on the ogg file. I'll convert to that as well. In regards to HTML5 doctype, it shouldn't be the very first line of the page, as this is asp page, correct? I've changed the doctype after the asp markup at the begining of the page, but the video still doesn't appear to have changed position.

            • 4. Re: IE Stacking Issue and Video Playback
              Rik Ramsay Level 4
              Rik Ramsay Apr 10, 2012 2:26 PM (in response to seanmc81)

              I don't know much about .asp but it shouldn't make much difference - in the generated output file, the doctype should be the first line to prevent IE going in quirks mode. Maybe someone with more .asp knowledge will be able to give better advice. I found this: http://www.webmasterworld.com/forum21/11568.htm

               

              Your video seems to have contradicting styles applied to it. I would suggest combining into one style. I tried turning off the latter position:absolute and it didn't seem to affect anything - in fact I removed that whole style and nothing 'seemed' to have changed but do some testing yourself and see what happens. I would also add a z-index so it sits above everything else on the page.

              .video-js {
                  background-color: #000000;

                  font-size: 10px;

                  padding: 0;

                  position: relative;

                  vertical-align: middle;

                  z-index: 999;

              }

               

              .video-js .vjs-tech {
                  height: 100%;

                  left: 0;

                  position: absolute;

                  top: 0;

                  width: 100%;

              }

              • 5. Re: IE Stacking Issue and Video Playback
                seanmc81 Level 1
                seanmc81 Apr 11, 2012 12:38 PM (in response to seanmc81)

                Hmm... no dice. And actually this page is a total mess on IE9. The video plays, but the whole page is in disarray. Any suggestions?

                • 6. Re: IE Stacking Issue and Video Playback
                  Rik Ramsay Level 4
                  Rik Ramsay Apr 11, 2012 12:44 PM (in response to seanmc81)

                  You will need to post a screenshot of what the page looks like. However, you do not have a container div surrounding the entire page and the DOCTYPE is not on line 1. The container will be having a big effect and as mentioned before not sure if IE is going into "quirks" mode due to the DOCTYPE not being on line 1.

                  • 7. Re: IE Stacking Issue and Video Playback
                    seanmc81 Level 1
                    seanmc81 Apr 11, 2012 8:22 PM (in response to Rik Ramsay)

                    Yea, I know the issue with the doctype, but with asp the asp code has to be at the beginning of the page before the doctype in order to function correctly. So it sounds like it's  kind of a catch 22. Here's a screenshot below:

                    first-preferred-screenshot.jpg

                    • 8. Re: IE Stacking Issue and Video Playback
                      adninjastrator Level 4
                      adninjastrator Apr 11, 2012 8:44 PM (in response to seanmc81)

                      While this may not be exactly the case with .ASP pages... I'm guessing it's pretty close....

                      Since dynamic pages like .ASP and PHP pages are made up of multiple "building block" files... not at all like an HTML page, the first line of the file (NOT the page... since there may be no single file .asp or php Web page) is the declaration of the type of page... .asp or php ... for example, here is how WordPress starts it's "index.php" pages:

                      <?php

                      /**

                      * @package WordPress

                      * @subpackage Default_Theme

                      */

                      get_header(); ?>

                      so the first step is to declare that this is a .php page... then  go get the "header" building block file .. OK, from the "header.php" file:

                      <?php

                      /**

                      * @package WordPress

                      * @subpackage Default_Theme

                      */

                      ?>

                      <!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" <?php language_attributes(); ?>>

                      Declare the file type then put some HTML in....So it's a couple steps into the process of assembling a dynamic Web page before the DOCTYPE declaration is made. Yet since you never see any of the php... you might assume that the DOCTYPE was declared as the first line in the code.

                      Yet that is far from the truth.... and I'm pretty sure this is basically how .asp works also.

                      So if there is an error in the DOCTYPE declaration, take a look at your index or header (or whatever .asp is calling the first file). The actual HTML that displays on the page will be there.

                      Best wishes,

                      Adninjastrator

                      • 9. Re: IE Stacking Issue and Video Playback
                        seanmc81 Level 1
                        seanmc81 Apr 14, 2012 9:01 AM (in response to adninjastrator)

                        You sir, are a genius. That did the trick. Thanks for your help!