#1
  1. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36

    css validation question


    Hi all,

    The CSS file i use DOES validate (I think) with the w3c. They say:
    Code:
    No error or warning found
    To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
    There are no errors. My html also does validate just fine as strict. However, unlike the html validator where they allow you then to write in the code for the html validation, they do not do that with the css. Is there something I am missing? Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    I'm not sure what you're getting at...

    The (x)html validators are seperate from the css validators because they're two different languages and at a low level they really don't have anything to do with one another. The message you're seeing is because even though you may have proper css, it doesn't mean the document will properly be applied to an html document, even if the html is valid. Maybe your css references a node #header, but there is no node in the html with the id of 'header', for example.

    Does that answer your question? Sorry if I'm repeating what you already know, but I don't really understand what you're trying to ask.
  4. #3
  5. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    Ah, I think I see what you mean. Say the css has a class called ".numbers", but the html document it is attached to does not reference that class. You're saying that that would cause the css not to be validated, even though all the syntax, etc is right?

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Sort of. They're seperate because you can have css without html, and html without css. The technologies are seperate to aid in portability.

    You can have one css file that is used by multiple html files (or other languages). Each individual document that uses the external css file may not implement all the css definitions. So like you suggested, missing implementations are not necessarily errors, but if you had a validator that cross-referenced them, it may see it as such.

    Your css file may define a series of classes, but any particular html file may only use a few or even none of these definitions. That's part of the beauty of seperating the two technologies. Keep implementations seperate from definitions.
  8. #5
  9. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    Ok, this is starting to annoy me. When I try to validate the CSS file via the W3C, it continues to tell me that:
    Code:
    No error or warning found
    To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
    It is plainly saying that there are no errors or warnings. Why is it not validating? Here's the entire CSS file:
    Code:
    	A:link		{ color: #000000; }
    	A:visited	{ color: #666666; }
    	A:hover 	{ color: #0000FF; }
    	A:active 	{ color: #0000FF; }
    	img 		{border: none;}
    
    	body {
    		font-family: verdana, arial, helvetica, sans-serif;
    		font-size: 11px;
    		line-height: 100%;
    		margin: 0px;
    	}
    
    	.table {
    		height: 195px;
    		width: 233px;
    		background-image: url("Green_wavy_thing.jpg");
    	}
    
    	.table1 {
    		height: 100px;
    	}
    
    	H1 {
    		font-size: 145%;
    		line-height: 110%;
    		margin-top: 1.35em;
    		margin-bottom: .5em;
    	}
    
    	p {
    		font-size: 100%;
    		line-height: 145%;
    		margin-bottom: -0.6em;
    	}
    
    	TABLE  {
    		font-family: verdana, arial, helvetica, sans-serif;
    		font-size: 100%;
    		line-height: 145%;
    	}
    
    	.clstdNL {
    		width: 100%;
    		height: 1px;
    		background-color: #FFFFFF;
    		padding: 0px;
    	}
    
    	.clsMenuTextOut a:link {
    		color: #336598;
    		font-size: 7pt;
    		margin-bottom: -2px;
    		text-decoration: underline;
    	}
    
    	.clsMenuTextOut a:visited {
    		color: #4169e1;
    		font-size: 7pt;
    		margin-bottom: -2px;
    		text-decoration: none;
    	}
    
    	.clsMenuTextOut a:hover {
    		color: #b22222;
    		font-size: 7pt;
    		margin-bottom: -2px;
    		text-decoration: underline;
    	}
    
    	.clsAuthor {
    		font-style: italic;
    		margin-bottom: -1em;
    	}
    
    	.clsExpLI  a:link {
    		color: #336598;
    		font-size: 100%;
    		font-weight: bold;
    		cursor: pointer;
    		text-decoration: underline;
    		margin-left: 3px;
    		margin-top: 0.4em;
    		margin-bottom: 0.6em;
    
    	}
    
    	.clsExpLI  a:visited {
    		color: #A5D775;
    		font-size: 100%;
    		font-weight: bold;
    		cursor: pointer;
    		text-decoration: none;
    		margin-left: 3px;
    		margin-top: 0.4em;
    		margin-bottom: 0.6em;
    	}
    
    	.clsExpLI  a:hover {
    		color: #b22222;
    		font-size: 100%;
    		font-weight: bold;
    		cursor: pointer;
    		text-decoration: underline;
    		text-transform: uppercase;
    		margin-left: 3px;
    		margin-top: 0.4em;
    		margin-bottom: 0.6em;
    	}
    
    	.clsMagFooter {
    		margin-top: 0em;
    		line-height: 130%;
    		color: #93c;
    	}
    
    	.clsMagFooter1 {
    		font-size: 85%;
    		line-height: 130%;
    		color: #c06;
    		text-align: left;
    	}
    
    	.clsPullQuote, .clsPullQuote HR {
    		font-weight: normal;
    		font-size: 110%;
    		font-family: verdana, arial, helvetica, sans-serif;
    		font-style: italic;
    		line-height: 120%;
    		color: #006633;
    	}
    
    	.td {
    		width: 233px;
    	}
    
    	.td1 {
    		width: 15px;
    	}
    
    	.td2 {
    		width: 74px;
    	}
    
    	.clsMenu { 
    		width: 100%;
    		height: 34px; 
    		background-color: #003399;
    		margin-bottom: 0px;
    	}
    
    	.clstdMSTB a:visited {
    		background: #000000;
    		border: 0px;
    		padding: 0px;
    	}
    
    
    	.clstdMSTB {
    		width: 460px;
    		background: #000000;
    		border: 0px;
    		padding: 0px;
    		font-family: Arial, Helvetica, sans-serif;
    		font-size: 1px;
    	}
    
    	.clstdMSTB1 {
    		width: 100%;
    		height: 20px;
    		background: #000000;
    		border: 0px;
    	}
    
    	.clsMenuTD { 
    		background-color: #003399; 
    		padding: 0px;
    		color: white;
    	}
    	.clsMenuTitleLabel { 
    		font-family: Tahoma, Arial, Geneva, Helvetica, sans-Serif;
    		font-size: 8pt;
    		font-weight: bold;
    		padding: 0px; 
    		cursor: pointer;
    	}
    	.clsMenuDivider {	
    		font-size: 10pt;
    		font-weight: bold;
    		color: white;
    		padding: 0px;
    		padding-top: 5px;
    		background-color: #003399;
    	}
    	.clsMenuTitle a:link { 
    		font-family: Tahoma, Arial, Geneva, Helvetica, sans-Serif;
    		font-size: 8pt;
    		font-weight: normal; 
    		cursor: pointer; 
    		color: white; 
    		margin: 2px;
    		margin-bottom: 1px; 
    		padding: 3px;
    	}
    
    	.clsMenuTitle a:visited { 
    		font-family: Tahoma, Arial, Geneva, Helvetica, sans-Serif;
    		font-size: 8pt;
    		font-weight: normal; 
    		cursor: pointer; 
    		color: white; 
    		margin: 2px;
    		margin-bottom: 1px; 
    		padding: 3px;
    	}
    The site is at http://www.bartlett-family.net/sokhan and you can view the source there. The html validates 100% good in "strict". What is the problem? Please help! Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    152
    Rep Power
    11
    I don't know where you get the no errors from, when I go to your site then have it validate the css, I get this

    Errors
    URI : http://www.bartlett-family.net/sokhan/

    * Line: 206

    Property layer-background-color doesn't exist : #039
    * Line: 206

    Invalid number : widthonly 0 can be a length. You must put an unit after your number : 120
    * Line: 212

    Property layer-background-color doesn't exist : #039
    * Line: 212

    Invalid number : widthonly 0 can be a length. You must put an unit after your number : 120
    * Line: 217

    Property layer-background-color doesn't exist : #039
    * Line: 217

    Invalid number : widthonly 0 can be a length. You must put an unit after your number : 120
    * Line: 222

    Property layer-background-color doesn't exist : #039
    * Line: 222

    Invalid number : widthonly 0 can be a length. You must put an unit after your number : 120

    Warnings
    URI : http://www.bartlett-family.net/sokhan/

    * Line : 64 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 67 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 70 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 73 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 76 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 79 font-family: You are encouraged to offer a generic family as a last alternative
    * Line : 82 font-family: You are encouraged to offer a generic family as a last alternative
    So it plainly has errors and warnings...
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    When I feed the w3c validator your css file (http://www.bartlett-family.net/sokhan/sokhan1.css) I get all clear. Your external css file is fine.

    When I submit the url of the html page though, I get the errors lisajill pointed out. You have css errors in your inline style attributes, which prevents the html document from passing css validation despite your external css file being valid. For example, on line 206, you have:
    Code:
    <div id="dropmenu0" class="clsMenuTitle" style="...layer-background-color:#039;...">
    The attribute contains an invalid css property.

    So yes, your css file is fine, as the validator implied. But you need to fix up your css that's burried directly in your html file if you want it to validate.
  14. #8
  15. Big Daddy
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2003
    Location
    Boston
    Posts
    1,473
    Rep Power
    36
    AH, I see... The external CSS is ok, but it's the "style's" INSIDE the html which are bad (as far as CSS is concerned. Strange, but the HTML validator didn't pick them up, but I suppose I can understand that. Ok, I will fix those things and get back to you guys. Thanks!

    Chris
    Pop, pop, fizz, fizz, oh what a relief it is!

IMN logo majestic logo threadwatch logo seochat tools logo