Skip navigation
Currently Being Moderated

Need help fixing HTML code

Apr 27, 2013 11:03 PM

Tags: #help #video #html #table #streaming #coding

I need help with an html code we have on our page, it is not lining up correctly and I can't see what the issue is, I need a new set of eyes. Can anyone help?

 

Here is the code, I can't see why the table is not moving the next video down right under the first. Can anyone look at this code and see what the issue is cause I am dumbfounded. I am a novice at writing code, I have no idea of what to do to fix the issue, your help and guidance would be greatly appreciated.

 

Code we are using:

   

  <div id="fb-root"></div>

        <script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

        <table align="center" style="width: 1000px; height: 400px;">

            <tbody>

                <tr>

                    <td align="center">

                    <div id="my-video"></div>

                    <script type="text/javascript">

    jwplayer('my-video').setup({

        file: 'http://www.divineunity1.info/Show2.mp4',

        image: 'http://www.divineunity1.com/images/DU1 _logo.png',

        width: '900',

        height: '400'

    });

</script>

                    </td>

                </tr>

            </tbody>

        </table>

        <div>

        <table align="center" style="border-style: solid; border-color: #f2f2f2; width: 900px;">

            <tbody>

                <tr>

                    <td style="width: 180px; text-align: left; vertical-align: top;" rowspan="4">

                    <table align="center" style="border-style: solid; border-color: #f2f2f2; width: 180px;">

                        <tbody>

                            <tr>

                                <td><img alt="" style="border: 0px currentcolor;" src="/images/DU1TV_bar popular.png" /></td>

                            </tr>

                            <tr>

                                <td style="height: 10px; text-align: center;"><span class="links" style="font-family: 'segoe ui'; font-size: 16px; color: #a5a5a5;"><a href="/Interface" target="_self">DU1 INTERFACE</a></span></td>

                            </tr>

                            <tr>

                                <td style="height: 10px; text-align: center;"><span style="color: #a5a5a5;"><a href="/du1store"><span class="links" style="font-family: 'segoe ui'; font-size: 16px; color: #a5a5a5;">DU1STORE</span></a></span></td>

                            </tr>

                            <tr>

                                <td style="height: 10px; text-align: center;"><span><a href="/du1tsu" target="_self"><span style="font-size: 16px; color: #a5a5a5;">DU1@TSU</span></a>

                                </span></td>

                            </tr>

                            <tr>

                                <td style="height: 10px; text-align: center;"><span><a href="/_blog/The_Pass_Now_Newsletter" target="_blank"><span style="font-size: 16px; color: #a5a5a5;">DU1BLOG

                                </span></a></span></td>

                            </tr>

                        </tbody>

                    </table>

                    <table style="width: 180px;">

                        <tbody>

                            <tr>

                                <td><span style="font-size: 12px;"> <a href="https://www.facebook.com/DU1TV?ref=hl" target="_blank"><img alt="" style="border: 0px currentcolor;" src="/images/facebook.jpg" /></a><span style="font-family: 'segoe ui';"> Like us on facebook.</span></span></td>

                            </tr>

                            <tr>

                                <td><span style="font-size: 12px; font-family: 'segoe ui';"><span style="font-size: 12px; font-family: 'segoe ui';"> </span><a href="http://www.youtube.com/du1tvunlmtd" target="_blank"><img alt="" style="border: 0px currentcolor;" src="http://divineunity1unlimited.businesscatalyst.com/images/youtube.png" /></a><span style="font-size: 12px; font-family: 'segoe ui';"> E</span><span style="font-size: 12px;">xcerpts of our shows.</span></span></td>

                            </tr>

                            <tr>

                                <td> <img alt="" style="border-color: currentcolor;" src="http://divineunity1unlimited.businesscatalyst.com/images/instagram.jpg" /><span style="font-family: 'segoe ui'; font-size: 13px;"> DU</span><span style="font-size: 12px;"><span style="font-size: 12px; color: #333333;">1agram join</span><span style="font-size: small; color: #333333;"> the fun.</span></span></td>

                            </tr>

                            <tr>

                                <td><span style="font-size: 12px; font-family: 'segoe ui';"> <a href="http://www.linkedin.com/in/du1unlmtd" target="_blank"><img alt="" style="border: 0px currentcolor;" src="/images/linked.jpg" /></a> <span style="font-size: 12px;">Network with DU1.</span></span></td>

                            </tr>

                            <tr>

                                <td><span style="font-size: 12px; font-family: 'segoe ui';"> <a href="http://www.twitter.com/du1unlmtd" target="_blank"><img alt="" style="border: 0px currentcolor;" src="http://divineunity1unlimited.businesscatalyst.com/images/twitter.jpg" /></a> <span style="font-size: 12px;">Let us hear your tweet.</span></span></td>

                            </tr>

                        </tbody>

                    </table>

                    </td>

                    <td style="width: 570px; text-align: center; vertical-align: top;" rowspan="4">

                    <div class="fb-comments" data-num-posts="20" data-width="500" data-href="http://divineunity1unlimited.businesscatalyst.com/du1tv"></div>

                    </td>

                </tr>

                <tr>

                    <td style="width: 150px; text-align: right; vertical-align: top;">

                    <div id="container1"></div>

                    <script type="text/javascript">

    jwplayer('container1').setup({

        file: 'http://www.divineunity1.info/Show1.mp4',

        image: 'http://www.divineunity1.com/images/DU1 _logo.png',

        width: '150',

        height: '100'

    });

</script>

                    </td>

                </tr>

                <tr>

                    <td>

                    <div id="container2"></div>

                    <script type="text/javascript">

    jwplayer('container2').setup({

        file: 'http://www.divineunity1.info/Show2.mp4',

        image: 'http://www.divineunity1.com/images/DU1 _logo.png',

        width: '150',

        height: '100'

    });

</script>

                    </td>

                </tr>

            </tbody>

        </table>

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 8:06 AM   in reply to divineunity1

    @CF: The code you posted will make matters worse. The blank div containers can be there because jwPlayer is calling the video from a location and loading it into that container based on the ID used.

     

    @Divineunity1: Please post a link to your webpage to help us help you. From your code, I guess you have this page uploaded somewhere on your website - but can't see where. Post a link to where we can locate this webpage.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 8:25 AM   in reply to divineunity1

    I'm unable to see the page with videos. If I login with test/test, it takes me to default.aspx page and no videos show up. Please post a direct link to the page in question. That will save us some trouble!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 9:42 AM   in reply to divineunity1

    Okay, got it. I see both the small videos at the bottom now. I see a small gap betweem them. Are you referring to that gap or the gap from the top most bigger video and the smaller ones?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 9:46 AM   in reply to divineunity1

    So, where are the smaller videos supposed to be anyway? At the very bottom or just below the big main video?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 9:02 PM   in reply to divineunity1

    What version of IE are you testing on?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 29, 2013 8:25 AM   in reply to divineunity1

    IE8 or below are not fully HTML5 compatible. I see you have a fallback for IE9 or below but that file is not in the location your HTML file says that it is in. /js/html5.js. It is one folder above du1tv.

     

    Also, there are a few invalid code constructs. You may want to run it under W3 validator and fix all errors first: http://validator.w3.org/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 12:07 PM   in reply to divineunity1

    If you're going to use HTML5, use the HTML5 Shiv from Google Code inside an IE conditional comment.

     

    In code view, replace this:

    <!--[if lt IE 9]>&lt;script type="text/javascript" src="/js/html5.js"></script>

     

    with this:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

     

    To check your code in the W3C validator, either copy & paste code directly or enter the URL of the page you want to check.  Repeat for other site pages.

     

    Code Validation Tools

    ------------------------------------

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 1:23 PM   in reply to divineunity1

    98% of browser rendering problems are caused by code errors. Before we can trouble shoot layout issues, your code needs to be clean.  Otherwise, we're all just spitting into the wind. 

     

    Below is a list of your errors.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.divineuni ty1.com%2FDefault.aspx%3FPageID%3D14224617%26Error%3DThank%2Byou%2Bfor %2Blogging%2Bin.

     

    Why are you using tables for your layout?  Things would be so much simpler if stripped out the tables with Find & Replace and switched to a 2 or 3-column CSS layout. 

     

    CS6-NewLayout.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 2:05 PM   in reply to divineunity1

    Hit Ctrl+R or F5 to refresh your browser.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 4:06 PM   in reply to divineunity1

    The problem with your code is in <!-------comments like this---------->

     

    HTML <!--comments need to be like this-->  only 2 hyphens on each side of statement.

     

    In addition, you have some unbalanced tags and deprecated attributes such as ALIGN.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2013 4:08 PM   in reply to divineunity1

    After you make changes to a Template, you must save it and populate changes to all your child pages. Then re-publish all child pages to your server.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

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