Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question IE not displaying youtube videos :(

    first post here, please be gentle


    can anyone see ANY reason why this code would not display 2 youtube videos in IE???
    it works perfectly in FIREFOX as usual but i get a black box with a red cross in the corner with IE

    Code:
    <div id="video">
    			<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1'); //end AC code
    </script><noscript><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></noscript>
    		</div>
            <div id="video">
    			<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1'); //end AC code
    </script><noscript><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></noscript>
    		</div>
    and i just checked my site with CHROME and SAFARI and everything works GREAT!!!

    its only stupid frustrating IE that has problems!!!! aaaaaaaaaaaaarrrrrrrrgggggggggghhhhhhhhhhhhh

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by liquidmonkey View Post
    first post here, please be gentle


    can anyone see ANY reason why this code would not display 2 youtube videos in IE???
    it works perfectly in FIREFOX as usual but i get a black box with a red cross in the corner with IE

    Code:
    <div id="video">
    			<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1'); //end AC code
    </script><noscript><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></noscript>
    		</div>
            <div id="video">
    			<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1'); //end AC code
    </script><noscript><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></noscript>
    		</div>
    and i just checked my site with CHROME and SAFARI and everything works GREAT!!!

    its only stupid frustrating IE that has problems!!!! aaaaaaaaaaaaarrrrrrrrgggggggggghhhhhhhhhhhhh
    Welcome to the forums!

    That code doesn't show anything for me in FF2 or IE7 since I have javascript enabled but I don't have the javascript you are using. I have to assume that the code in the header is bad but since you haven't shown us your full source I can only guess. It could be that the code for the function "AC_AX_RunContent" is bad or, if the javascript is external, the URI listed for the source could be formatted incorrectly and IE might not be able to find it (for example, using slashes in the wrong direction -- "\" instead of "/"). We can't really tell where the problem is until we see everything. Please provide your full source code or better still, give a link to the live page.

    Also, on an unrelated note, you have used the same ID twice in the page. It's always a good idea to run your pages through the HTML validator.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    the website is

    www.addc.se

    hope that helps...

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by liquidmonkey View Post
    the website is

    www.addc.se

    hope that helps...
    Hmmmm, I'm still not seeing where this problem comes from. I get the emtpy boxes in IE7 here too, but the code looks solid as far as I can tell. It seems to work in IE7 and FF2 if you cancel out the javascript call and the "noscript" tags like this:
    Code:
    <div id="video">
    <!--<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1'); //end AC code
    </script>
    <noscript>-->
      <object width="425" height="344">
        <param name="movie" value="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/VYXypBPvoAM&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
      </object>
    <!--</noscript>-->
    </div>
    
    <div id="video">
    <!--<script type="text/javascript">
    AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1'); //end AC code
    </script>
    <noscript>-->
      <object width="425" height="344">
        <param name="movie" value="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1"></param>
        <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/bJDKUjuMt44&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
      </object>
    <!--</noscript>-->
    </div>
    I'm not sure what to tell you... Is there any particular need to use this javascript or can you just skip it?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    liquidmonkey (05-26-2009)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That two elements with id="video" is still there, which is invalid, as you can't have the same id for multiple elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    liquidmonkey (05-26-2009)

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thank you both 'abduraooft' and 'rowsdower'!!!!

    taking out the java script works with IE7 now and both videos show!!! thanks!!
    and i simply added a new ID, 'video2' to the CSS so as to not call it twice.
    i know this is not super CSS efficient but this site is small and it works for now


    there is one remaining issue and that is that IE is displaying the tabs in a vertical line rather than a horizontal line as they should be.
    i've tried changing various elelments in the CSS to 'inline' elements as well as changing a few floats to left and right and none, but just can't seem to get it to work right.

    is there an easy IE hack for this i'm totally missing?
    here's the CSS code...

    Code:
    @charset "utf-8";
    /* --- This CSS is used for the website 'www.addc.se' which is meant to have only one page. --- */
    /* --- First is the basic styling which sets all margins and padding to zero, the background colors,
    width of the site, the main font family, centers everything in the browser and clears all floats --- */
    * {
    	margin: 0px;
    	padding: 0px;
    }
    body {
    	background-color: #000000;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 85%;
    	text-align: center;
    }
    #wrapper {
    	width: 900px;
    	position:relative;
    	margin-top: 3px;
    	margin-bottom: 5px;
    	background-color: #000000;
    	clear: both;
    	margin-right: auto;
    	margin-left: auto;
    }
    #clear {
    	clear:both;
    }
    #header {
    	background-image: url(../assets/pictures/banner-900x225.gif);
    	width: 900px;
    	height: 225px;
    	background-repeat: no-repeat;
    	clear: both;
    	float: left;
    }
    #content {
    }
    #blog {
    }
    a:link {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	color: #FFFFFF;
    	text-decoration: none;
    	line-height: 30px;
    }
    a:visited{
    	color: #FFFFFF;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	line-height: 30px;
    	text-decoration: none;
    
    }
    a:hover {
    	border-top-width: 1px;
    	border-bottom-width: 1px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #FFFF00;
    	border-bottom-color: #FFFF00;
    	cursor: none;
    	padding-top: 4px;
    	padding-bottom: 4px;
    	padding-right: 10px;
    	padding-left: 10px;
    }
    
    a:active {
    	color: #FFFFFF;
    }
    
    #monoslideshow {
    	height: auto;
    	width: 800px;
    	background-color: #000000;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    .text {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	text-align: justify;
    	line-height: 30px;
    	color: #FFFFFF;
    	padding-top: 10px;
    	padding-right: 20px;
    	padding-bottom: 40px;
    	padding-left: 20px;
    }
    .text-h1 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 24px;
    	font-style: normal;
    	font-weight: bold;
    	line-height: 50px;
    	color: #FFFFFF;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    .flyer {
    	background-color: #000000;
    	padding-top: 15px;
    	padding-bottom: 15px;
    }
    .contactlink {
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    #video {
    	padding-top: 30px;
    	padding-bottom: 30px;
    	clear: none;
    	float: none;
    }
    #video2 {
    	padding-top: 30px;
    	padding-bottom: 30px;
    	clear: none;
    	float: none;
    }
    #mp3 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	background-color: #000000;
    	height: auto;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    #footer {
    	font-weight: normal;
    	background-color: #000000;
    	clear: left;
    	width: 900px;
    	margin-top: 30px;
    	margin-right: 0px;
    	margin-bottom: 30px;
    	margin-left: 0px;
    	padding-top: 10px;
    	padding-right: 0px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    	border-top-width: thin;
    	border-bottom-width: thin;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #FFFF00;
    	border-bottom-color: #FFFF00;
    }
    #footer .copyright {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 12px;
    	color: #FFFFFF;
    	float: none;
    	text-align: center;
    }

    AND THIS IS THE CODE FOR THE SPRY TABS BIT...

    Code:
    @charset "UTF-8";
    
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /* Horizontal Tabbed Panels
     *
     * The default style for a TabbedPanels widget places all tab buttons
     * (left aligned) above the content panel.
     */
    
    /* This is the selector for the main TabbedPanels container. For our
     * default style, this container does not contribute anything visually,
     * but it is floated left to make sure that any floating or clearing done
     * with any of its child elements are contained completely within the
     * TabbedPanels container, to minimize any impact or undesireable
     * interaction with other floated elements on the page that may be used
     * for layout.
     *
     * If you want to constrain the width of the TabbedPanels widget, set a
     * width on the TabbedPanels container. By default, the TabbedPanels widget
     * expands horizontally to fill up available space.
     *
     * The name of the class ("TabbedPanels") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabbedPanels container.
     */
     #TabbedPanels1 {
    	position: relative;
    	float: left;
    	margin: 50px;
    }
    .TabbedPanels {
    	padding: 0px;
    	clear: none;
    	margin-top: 5px;
    	margin-right: auto;
    	margin-bottom: 5px;
    	margin-left: auto;
    }
    
    /* This is the selector for the TabGroup. The TabGroup container houses
     * all of the tab buttons for each tabbed panel in the widget. This container
     * does not contribute anything visually to the look of the widget for our
     * default style.
     *
     * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabGroup container.
     */
    .TabbedPanelsTabGroup {
    	clear: none;
    	float: none;
    
    }
    
    /* This is the selector for the TabbedPanelsTab. This container houses
     * the title for the panel. This is also the tab "button" that the user clicks
     * on to activate the corresponding content panel so that it appears on top
     * of the other tabbed panels contained in the widget.
     *
     * For our default style, each tab is positioned relatively 1 pixel down from
     * where it wold normally render. This allows each tab to overlap the content
     * panel that renders below it. Each tab is rendered with a 1 pixel bottom
     * border that has a color that matches the top border of the current content
     * panel. This gives the appearance that the tab is being drawn behind the
     * content panel.
     *
     * The name of the class ("TabbedPanelsTab") used in this selector is not
     * necessary to make the widget function. You can use any class name you want
     * to style this tab container.
     */
    .TabbedPanelsTab {
    	position: relative;
    	float: left;
    	background-color: #000000;
    	-moz-user-select: none;
    	-khtml-user-select: none;
    	cursor: pointer;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-weight: normal;
    	padding-top: 4px;
    	padding-right: 10px;
    	padding-bottom: 4px;
    	padding-left: 10px;
    	border-top-width: 1px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-top-style: solid;
    	border-top-color: #FFFF00;
    	border-bottom-color: #FFFF00;
    	color: #FFFFFF;
    	display: inline;
    	list-style-image: none;
    	list-style-type: inline;
    }
    
    /* This selector is an example of how to change the appearnce of a tab button
     * container as the mouse enters it. The class "TabbedPanelsTabHover" is
     * programatically added and removed from the tab element as the mouse enters
     * and exits the container.
     */
    .TabbedPanelsTabHover {
    	background-color: #CCC;
    	color: #000000;
    }
    
    /* This selector is an example of how to change the appearance of a tab button
     * container after the user has clicked on it to activate a content panel.
     * The class "TabbedPanelsTabSelected" is programatically added and removed
     * from the tab element as the user clicks on the tab button containers in
     * the widget.
     *
     * As mentioned above, for our default style, tab buttons are positioned
     * 1 pixel down from where it would normally render. When the tab button is
     * selected, we change its bottom border to match the background color of the
     * content panel so that it looks like the tab is part of the content panel.
     */
    .TabbedPanelsTabSelected {
    	background-color: #EEE;
    	color: #000000;
    }
    
    /* This selector is an example of how to make a link inside of a tab button
     * look like normal text. Users may want to use links inside of a tab button
     * so that when it gets focus, the text *inside* the tab button gets a focus
     * ring around it, instead of the focus ring around the entire tab.
     */
    .TabbedPanelsTab a {
    	color: black;
    	text-decoration: none;
    }
    
    /* This is the selector for the ContentGroup. The ContentGroup container houses
     * all of the content panels for each tabbed panel in the widget. For our
     * default style, this container provides the background color and borders that
     * surround the content.
     *
     * The name of the class ("TabbedPanelsContentGroup") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the ContentGroup container.
     */
    .TabbedPanelsContentGroup {
    	clear: both;
    	background-color: #000000;
    	height: auto;
    	margin-top: 5px;
    	margin-right: auto;
    	margin-bottom: 5px;
    	margin-left: auto;
    	width: 800px;
    	float: left;
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: solid;
    	border-right-style: none;
    	border-bottom-style: solid;
    	border-left-style: none;
    	border-top-color: #FFFF00;
    	border-right-color: #FFFF00;
    	border-bottom-color: #FFFF00;
    	border-left-color: #FFFF00;
    	padding: 0px;
    }
    
    /* This is the selector for the Content panel. The Content panel holds the
     * content for a single tabbed panel. For our default style, this container
     * provides some padding, so that the content is not pushed up against the
     * widget borders.
     *
     * The name of the class ("TabbedPanelsContent") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the Content container.
     */
    .TabbedPanelsContent {
    	padding: 0px;
    }
    
    /* This selector is an example of how to change the appearnce of the currently
     * active container panel. The class "TabbedPanelsContentVisible" is
     * programatically added and removed from the content element as the panel
     * is activated/deactivated.
     */
    .TabbedPanelsContentVisible {
    }
    
    /* Vertical Tabbed Panels
     *
     * The following rules override some of the default rules above so that the
     * TabbedPanels widget renders with its tab buttons along the left side of
     * the currently active content panel.
     *
     * With the rules defined below, the only change that will have to be made
     * to switch a horizontal tabbed panels widget to a vertical tabbed panels
     * widget, is to use the "VTabbedPanels" class on the top-level widget
     * container element, instead of "TabbedPanels".
     */
    
    /* This selector floats the TabGroup so that the tab buttons it contains
     * render to the left of the active content panel. A border is drawn around
     * the group container to make it look like a list container.
     */
    .VTabbedPanels .TabbedPanelsTabGroup {
    	float: left;
    	width: 10em;
    	height: 20em;
    	background-color: #EEE;
    	position: relative;
    	border-top: solid 1px #999;
    	border-right: solid 1px #999;
    	border-left: solid 1px #CCC;
    	border-bottom: solid 1px #CCC;
    }
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTab {
    	float: none;
    	margin: 0px;
    	border-top: none;
    	border-left: none;
    	border-right: none;
    }
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTabSelected {
    	background-color: #EEE;
    	border-bottom: solid 1px #999;
    }
    
    /* This selector floats the content panels for the widget so that they
     * render to the right of the tabbed buttons.
     */
    .VTabbedPanels .TabbedPanelsContentGroup {
    	clear: none;
    	float: left;
    	padding: 0px;
    	width: 30em;
    	height: 20em;
    }
    Last edited by liquidmonkey; 05-27-2009 at 06:21 AM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by adding height:1%; to your .TabbedPanelsTab
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    liquidmonkey (05-28-2009)

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    how on earth did you come up with that????? it totally works and thanks very much, i would never have thought of that.

    woohooo!!!

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by liquidmonkey View Post
    how on earth did you come up with that????? it totally works and thanks very much, i would never have thought of that.

    woohooo!!!
    That's a big story . Whenever you think your markup and CSS is correct and IE is simply giving stupid results, there will be a big chance to get it OK by triggering the hasLayout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •