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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts

    html5 and css3 in a MySQL data table

    http://www.countyfairgrounds.net/entertainers/test.css

    Okay - now I am at a loss. The html5 validator is saying I have duplicate division tags in thsi page. What we are looking at here is the MySQL database in the center of the page. The listings for the entertainers. I finally got it to dsiplay using <table><tr><td> - here is the data and divisions - </td></tr></table>

    Now the validator is saying I am using duplicate div tags in the css. Of course I am? Does anyone know anything about stuff like this?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I don’t quite understand what you mean. Are you referring to http://www.countyfairgrounds.net/entertainers/test.php (you linked to a CSS file)?

    The HTML validator complains that you have multiple identical IDs in your code which is not allowed. An ID must be unique in a document. So you’d somehow have to add incremental numbers to the IDs in your loop through which you retreive and construct the results in order to make them different – or use classes if you want to have multiple items with the same “name” for your CSS. Also, you can’t have stylesheets in the body of the document, they must always be included in the document header.

  • #3
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    after a lot of tire kicking - with http://www.countyfairgrounds.net/ent...ersforhire.php - I finally figured out I could use h2 and h3 header tags and section classes. I got it - the validator will not let me use the same ID over and over - event though each listing in is in a separate table.
    Your other comment I do not understand. I have the stylesheet listed on the top of the page of the above url. Is that not sufficient?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    He means the link you provided here in your initial question is to your stylesheet "test.css".

    I had seen this the other day and was going to mention it, but got sidetracked..lol
    Teed

  • #5
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    my bad, sorry, all my css3 stylesheets are pretty much getting through the validator

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    No, I meant the error
    Quote Originally Posted by W3C validator

    Line 633, Column 25: Element style not allowed as child of element div in this context.
    This results from the Google videobar code. Stylesheets, however, must always be declared/linked to in the head.

  • #7
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Stephen - my css3 stylesheet is validaating. I am not sure I know what you mean. Can you spell it out better?

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by CoolKay View Post
    Stephen - my css3 stylesheet is validaating. I am not sure I know what you mean. Can you spell it out better?
    In the last sentence of VIPStephan's first reply, he mentioned:

    Quote Originally Posted by VIPStephan
    Also, you can’t have stylesheets in the body of the document, they must always be included in the document header.
    You have three style elements located within a div element:

    Code:
    <div id="CMTVideo">
    	<!-- … -->
      <style type="text/css">
        @import url("http://www.google.com/uds/css/gsearch.css");
      </style>
    
    	<!-- … -->
      <style type="text/css">
        @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
      </style>
    
      <style type="text/css">
        .playerInnerBox_gsvb .player_gsvb {
          width : 260px;
          height : 260px;
        }
      </style>
    	<!-- … -->
    </div>
    This is generating three of the error messages from the validator.

    In HTML5 (and as mentioned within the error messages), style elements must appear within the head element unless the style element has a scoped attribute:

    Code:
    <style scoped="scoped">/* … */</style>
    Given that the scoped attribute is not yet supported by any browser, you probably meant to put these style elements into your document's head element.

    If you're curious what the scoped attribute does: it allows you to scope the effect of a style sheet to a specific element. This is useful if you are importing content from a third party (as you are), and do not want to worry about potential style conflicts from the third party's style sheets. This is also useful if you are allowing user CSS style sheets and want to prevent those users from destroying the style of parts of the document without a complicated or crippling CSS filtering mechanism (as on MySpace). And one day you might even be able to craft an HTML-based email message that isn't table-based (as you must do now because styling is severely restricted in Web-based email clients) and have it display reliably among your recipients because of this attribute.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    okay slow down a minute. First I am not particularly happy with Google because you would think that they of all compnaies would be on top of this html5 stuff - this section you are referring to above is on a lot of my state pages CMTVideo - I got the code from youtube (which is owned by google) - anyway if I understand you right I need to put in my header these lines from the above code?
    http://www.google.com/uds/solutions/...gsvideobar.css
    http://www.google.com/uds/css/gsearch.cs

    EVEN though its on their server? and coming from them?

    By the way I have seen this error on a bunch of my pages but did not know what it meant - I simply cannot stop using third party services.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    No you just need to put this entire code in the header:
    Code:
    <style type="text/css">
        @import url("http://www.google.com/uds/css/gsearch.css");
    </style>
    Style and link elements must not be in the body of a document.

    By the way, you could as well do:
    Code:
    <link rel="stylesheet" href="http://www.google.com/uds/css/gsearch.css" type="text/css" media="screen" />

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by CoolKay View Post
    First I am not particularly happy with Google because you would think that they of all compnaies would be on top of this html5 stuff
    style elements are permitted only within head elements in HTML 4.01 (which dates to 1999), so it's not like this is a new concept.

    Quote Originally Posted by CoolKay View Post
    EVEN though its on their server? and coming from them?
    The location of style sheets has no bearing on where style elements should be located.

    Quote Originally Posted by CoolKay View Post
    I simply cannot stop using third party services.
    Have you actually tried putting the style sheets within the head element of your document to see if they are still functional? I would presume that they would be unless the scripts rely on them being located within a specific portion of the document source code.

    That said, I took a look at the content of these CSS files, and it appears to me that the style sheets would only apply to content within the CMTVideo element. Therefore, you should be able to safely add scoped="scoped" attributes to each style element knowing that they will be functional even after browsers begin supporting the attribute. This will also satisfy the HTML5 requirements and put an end to the relevant validation errors. (When using scoped="scoped", you need to make sure that the style sheets do not need to select any elements located outside of the element containing the style element. As long as that is true, your code will be forward-compatible.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    (When using scoped="scoped", you need to make sure that the style sheets do not need to select any elements located outside of the element containing the style element. As long as that is true, your code will be forward-compatible.)
    I was following you okay but do not understand the above. YES the division id=CMTVideo - which is Google and YouTube is Google AND it pisses me off that Google cannot provide the right code when they are pushing it so hard in other areas.

    Can you tell me exactly how do this... ? I take it that it goes in the meta tags and since I have not done this before at all - well can you tell me exactly how?

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Nothing is “going in the meta tags”. Out of this code:
    Code:
    <div id="CMTVideo">
                    <!-- ++Begin Video Bar Wizard Generated Code++ -->
      <!--
      // Created with a Google AJAX Search Wizard
      // http://code.google.com/apis/ajaxsearch/wizards.html
      -->
    
      <!--
      // The Following div element will end up holding the actual videobar.
      // You can place this anywhere on your page.
      -->
      <div id="videoBar-bar">
    
        <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
      </div>
    
      <!-- Ajax Search Api and Stylesheet
      // Note: If you are already using the AJAX Search API, then do not include it
      //       or its stylesheet again
      -->
      <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
        type="text/javascript"></script>
      <style type="text/css">
        @import url("http://www.google.com/uds/css/gsearch.css");
      </style>
    
      <!-- Video Bar Code and Stylesheet -->
    
      <script type="text/javascript">
        window._uds_vbw_donotrepair = true;
      </script>
      <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
        type="text/javascript"></script>
      <style type="text/css">
        @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
      </style>
    
      <style type="text/css">
        .playerInnerBox_gsvb .player_gsvb {
          width : 260px;
          height : 260px;
        }
      </style>
      <script type="text/javascript">
        function LoadVideoBar() {
    
        var videoBar;
        var options = {
            largeResultSet : !false,
            horizontal : false,
            autoExecuteList : {
              cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
              cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
              executeList : ["ytchannel:BRADPAISLEY","ytchannel:alanjackson","ytchannel:georgestrait","country music"]
            }
          }
    
        videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                                  GSvideoBar.PLAYER_ROOT_FLOATING,
                                  options);
        }
        // arrange for this function to be called during body.onload
        // event processing
        GSearch.setOnLoadCallback(LoadVideoBar);
      </script>
    <!-- ++End Video Bar Wizard Generated Code++ -->
    
    </div>
    You either take the code in red and move it into the <head>, preferably before any other stylesheet you may have, or you add scoped attributes to the style elements as Arbitrator suggested, like
    Code:
    <div id="CMTVideo">
                    <!-- ++Begin Video Bar Wizard Generated Code++ -->
      <!--
      // Created with a Google AJAX Search Wizard
      // http://code.google.com/apis/ajaxsearch/wizards.html
      -->
    
      <!--
      // The Following div element will end up holding the actual videobar.
      // You can place this anywhere on your page.
      -->
      <div id="videoBar-bar">
    
        <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
      </div>
    
      <!-- Ajax Search Api and Stylesheet
      // Note: If you are already using the AJAX Search API, then do not include it
      //       or its stylesheet again
      -->
      <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
        type="text/javascript"></script>
      <style type="text/css" scoped="scoped">
        @import url("http://www.google.com/uds/css/gsearch.css");
      </style>
    
      <!-- Video Bar Code and Stylesheet -->
    
      <script type="text/javascript">
        window._uds_vbw_donotrepair = true;
      </script>
      <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
        type="text/javascript"></script>
      <style type="text/css" scoped="scoped">
        @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
      </style>
    
      <style type="text/css">
        .playerInnerBox_gsvb .player_gsvb {
          width : 260px;
          height : 260px;
        }
      </style>
      <script type="text/javascript">
        function LoadVideoBar() {
    
        var videoBar;
        var options = {
            largeResultSet : !false,
            horizontal : false,
            autoExecuteList : {
              cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
              cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
              executeList : ["ytchannel:BRADPAISLEY","ytchannel:alanjackson","ytchannel:georgestrait","country music"]
            }
          }
    
        videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                                  GSvideoBar.PLAYER_ROOT_FLOATING,
                                  options);
        }
        // arrange for this function to be called during body.onload
        // event processing
        GSearch.setOnLoadCallback(LoadVideoBar);
      </script>
    <!-- ++End Video Bar Wizard Generated Code++ -->
    
    </div>

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by CoolKay View Post
    Can you tell me exactly how do this... ?
    VIPStephan illustrated the two manners in which you can correct the errors.

    He only highlighted (in red) two of the three style elements, however. You will have to perform one of the two procedures on the third style element as well if you want to address all of the validation errors.

    In either case, you might consider consolidating your style sheets. If the style sheets are to be placed within the head element, your code might look like the following after style sheet consolidation:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<title>Entertainers for Hire</title>
    		<meta name="author" content="Karen Riedl">
    		<meta name="description" content="Entertainers at the Fairgrounds.">
    		<meta name="keywords" content="entertainers, county fairs, entertainment, fairgrounds, state fair,  entertainers for hire, fairs, 
    festivals, events, fair">
    		<style>
    			@import "entertainersforhire.css";
    			@import url("http://www.google.com/uds/css/gsearch.css");
    			@import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
    			.playerInnerBox_gsvb .player_gsvb { width: 260px; height: 260px; }
    		</style>
    		<!--[if lt IE 7]><style>
    			@import "css/ie6.css";
    		</style><![endif]-->
    		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    		<!--[if lte IE 7]><script src="js/IE8.js"></script><![endif]-->
    	</head>
    Or if you choose to use the scoped="scoped" attribute, your #CMTVideo element might begin like this:

    Code:
    <div id="CMTVideo">
    			<style scoped="scoped">
    				@import url("http://www.google.com/uds/css/gsearch.css");
    				@import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
    				.playerInnerBox_gsvb .player_gsvb { width: 260px; height: 260px; }
    			</style>
    (I am a bit curious as to why you have a script file named "IE8" that only applies to IE7 and below.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Regular Coder
    Join Date
    Jan 2011
    Posts
    302
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Please be patient - I am having a hard time here, Lots of lots of code.

    Anyway I do not know what you mean by this?
    (I am a bit curious as to why you have a script file named "IE8" that only applies to IE7 and below.)
    to where exactly are you referring?

    The div id-CMTVideo is pretty old code from YouTube. I just looked to see if and where they might have updated this code. I cannot find the player that is on my site no where on YouTube now. However, it still works on my site and I am inclined to leave it. So therefore let me ask you - you gave me two options above. Which is easiest to implement? Which would you use? Does the second one go inside the div id CMTVideo? at the top under the division tag and is that all I need to enter there? I am still a little confused.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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