...

View Full Version : html5 and css3 in a MySQL data table



CoolKay
10-30-2011, 07:29 PM
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?

VIPStephan
10-30-2011, 09:30 PM
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.

CoolKay
10-31-2011, 04:05 PM
after a lot of tire kicking - with http://www.countyfairgrounds.net/entertainers/entertainersforhire.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?

teedoff
10-31-2011, 06:09 PM
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

CoolKay
10-31-2011, 10:25 PM
my bad, sorry, all my css3 stylesheets are pretty much getting through the validator

VIPStephan
11-01-2011, 02:04 AM
No, I meant the error



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.

CoolKay
11-01-2011, 04:56 AM
Stephen - my css3 stylesheet is validaating. I am not sure I know what you mean. Can you spell it out better?

Arbitrator
11-01-2011, 08:59 AM
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:


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:


<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:


<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.

CoolKay
11-02-2011, 05:15 PM
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/videobar/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.

VIPStephan
11-02-2011, 06:19 PM
No you just need to put this entire code in the header:


<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:


<link rel="stylesheet" href="http://www.google.com/uds/css/gsearch.css" type="text/css" media="screen" />

Arbitrator
11-02-2011, 06:32 PM
First I am not particularly happy with Google because you would think that they of all compnaies would be on top of this html5 stuffstyle 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.


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.


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.)

CoolKay
11-03-2011, 06:25 PM
(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?

VIPStephan
11-03-2011, 08:43 PM
Nothing is “going in the meta tags”. Out of this 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

<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>

Arbitrator
11-04-2011, 09:51 AM
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:


<!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:


<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.)

CoolKay
11-05-2011, 07:08 PM
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.

VIPStephan
11-06-2011, 01:10 AM
With the second method (the “scoped” attribute) nothing is changing in your code except that you add that attribute as suggested.

Arbitrator
11-06-2011, 05:51 AM
Anyway I do not know what you mean by this?Please be more specific. "This" does not tell me much.


to where exactly are you referring?I'm referring to the conditional comment within your head element that references a script called "IE8.js." View the source code and use your browser, or editor's "Find" feature to locate the text if you cannot locate it through scanning.

If you do not know what a conditional comment is (because you did not write this code?), I would suggest doing a Web search on the term.


Which is easiest to implement?The easiest technique to implement is to simply add scoped="scoped" attributes to each style element located within the body element of the document.

Normally, this would be harder since you would have to examine the style sheets first to see if this is an appropriate measure, but I've already done it for you. You can simply add the attributes.


Which would you use?I, personally, would move all CSS to the head element of the document, and consolidate all style and link elements into as few style elements as possible (as demonstrated in my previous post).


Does the second one go inside the div id CMTVideo?As I thought would be clear from the presence of <div id="CMTVideo"> in the provided code, yes.


at the top under the division tag and is that all I need to enter there?The location does not matter (in terms of code correctness). For organizational purposes, I would put the style element(s) toward the top of their parent element.


However, I am still a little confused.I'd suggest trying out solutions (on a duplicate test document if necessary) instead of responding to every reply with more questions or repeatedly looking for code (from Google) that you can copy and paste to solve the issue without thinking about it. Try running your changes through a validator to see if this kills the error messages.

CoolKay
11-08-2011, 03:38 AM
Hi Okay Arbitrator - I put this in the head tag of www.countyfairgrounds.net/entertainersforhire.php

<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>


I have never seen, it written like this @import? - its now not showing up in the validator however, AND there are three style elements in the CMTVideo division in the left column. I am correct in assuming they all need to be in the head tag like above yes? Also the validator is throwing up another one of these type things - I believe its from Quantcast below my footer. But its not displaying on the page - so I don't get why it would have a stylesheet.

Arbitrator
11-08-2011, 01:38 PM
Hi Okay Arbitrator - I put this in the head tag of www.countyfairgrounds.net/entertainersforhire.php

<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>I'm guessing that you updated a different document since the linked document does not reflect the above code.


I have never seen, it written like this @import?The import at-rule allows you to import style sheets from within a style sheet. (See http://www.w3.org/TR/CSS2/cascade.html#at-import.)

With the above code, you're importing three style sheets using one style element (instead of three) which makes the code more compact and easier to read.

You can also use three link elements and one style element if you want, but they don't have any advantage over @import except in limited situations where you might want to name a style sheet (which isn't the case here).


I am correct in assuming they all need to be in the head tag like above yes?If you've already applied the above code, you can delete those three style elements; the above code contains the same information as the three style elements used for your video code. I simply took all the original style sheet code and condensed it.


Also the validator is throwing up another one of these type things - I believe its from Quantcast below my footer.I don't see the relevant error. There's nothing wrong with your Quantcast noscript element or its content as far as I can tell from the current source code.

CoolKay
11-08-2011, 04:45 PM
Hi, its http://www.countyfairgrounds.net/entertainers/entertainersforhire.php that I made the code changes in. I "believe" that it takes a few hours for the changes to show up in Chrome andIE9 - although they seem to show up faster in IE9
Now the html5 validator says there are some still wrong on lines 655, 665, and 669 - and according to my php code editor that is Quantcast.

Arbitrator
11-09-2011, 06:40 AM
Hi, its http://www.countyfairgrounds.net/entertainers/entertainersforhire.php that I made the code changes in. I "believe" that it takes a few hours for the changes to show up in Chrome andIE9 - although they seem to show up faster in IE9Apparently this is a caching issue since your server is not sending out a Last-Modified HTTP header.

My browser is Opera. To see the current code, I had to do a hard refresh (that doesn't use the cache) by right-clicking and selecting Reload instead of using the Reload button. (In other browsers, you generally use Ctrl+F5 to initiate a hard refresh).


Now the html5 validator says there are some still wrong on lines 655, 665, and 669 - and according to my php code editor that is Quantcast.I'm seeing 24 errors, so you'll have to be more specific as to what the errors are.

The three errors related to the style elements are still there, by the way. You correctly added the new style element to your head element, but the three style elements that were causing the validation errors in the first place are still present in the <div id="CMTVideo"> element. With the new code, you should be able to safely delete those three style elements without affecting the page (or comment them out if you feel safer doing that).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum