Skip navigation
Currently Being Moderated

IE Stacking Issue and Video Playback

Apr 10, 2012 1:01 PM

Tags: #internet #explorer #ie #video.js

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.

 
Replies
  • Currently Being Moderated
    Apr 10, 2012 1:29 PM   in reply 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
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 2:26 PM   in reply 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%;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 12:44 PM   in reply 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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 8:44 PM   in reply 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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points