|
CSS - Validation Warning - What's It Referring To?
This is the new site I'm working on:
http://animalemergencybloomington.com/Index2.html http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ Running all 8 pages of the site thru the above validators, they all pass with no errors, except the CSS validator gives the following warning for each page: 29 #autoXML50064605006460: Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. What on the page(s) is this referring to? Thaks, Ez Similar TutorialsI like my pages to validate XHTML and CSS completely without any warnings, let alone errors. Unfortunately though I have a background image on my page so therefore I can't give a background colour to a lot of elements. This leads to them getting an accessibility warning of no background-color with #whatever....is there any way around this? I tried setting it to transparent. Maybe it could inherit the body one but I don't think that's possible. Hi folks, I am getting this error and it makes little sense to me. I am getting the following warning... Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 , Add a CSS style sheet for print media, or include a print media section in the current style sheet. here is my code <link href="style.css" rel="stylesheet" type="text/css" media="screen, print"> Thanks once again in advance for any suggestion or help! whonoes I just added a bit of javascript into my css layout for my html page I am working on and it went from validating perfectly fine to tossing me out some errors. I was hoping I could get some direction as to what exactly is going on with these errors and how I may go about eliminating them? Here's the html, all the css validates fine: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="test5.css">
<link rel="stylesheet" type="text/css" href="topmenu.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="accountselector.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('MyAccount', 'fade=0,speed=400,group=AccountDiv')
animatedcollapse.addDiv('HelpAndSupport', 'fade=0,speed=400,group=AccountDiv,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<title></title>
</head>
<body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
<div id= "accountselector-spacer"> </div>
</div>
<div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">
<div id= "navmenu">
<ul>
<li><a href="">Internet</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Telephone</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Television</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">About Us</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">FAQ</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-right">
<a href="#" rel="toggle[MyAccount]" data-openimage="ManageMyAccountGrey.png" data-closedimage="ManageMyAccountBlue.png"><img src="ManageMyAccountGrey.png" alt="none"></a>
<div id="MyAccount">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
<b></b>
<a href="#" rel="toggle[HelpAndSupport]" data-openimage="HelpAndSupportGrey.png" data-closedimage="HelpAndSupportBlue.png"><img src="HelpAndSupportGrey.png" alt="none" ></a>
<div id="HelpAndSupport">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
<div id= "footer">Test Footer</div>
</body>
</html>
I am getting a: Line 91, Column 55: Attribute "DATA-OPENIMAGE" is not a valid attribute Line 91, Column 98: Attribute "DATA-CLOSEDIMAGE" is not a valid attribute What would be the correct way to call this? The page works fine with all of the browsers I have checked it with, but if I don't have that attribute shown the images fail to load on the menu style I have set. When the image is clicked it is supposed to swap out images and pull the menu either up or down. If I take out that attribute call, the image simply fails to load period. Any suggestions? Thanks in advance. Hello all. I'm curious as to your thoughts on validating CSS documents. For example I have a document that is not valid because of some style settings of a menu I'm using with effects from script.aculo.us. Using the blind down (and blind up) effects found on that site, the menu would normally cover the content whereas I am using the following CSS to make it translucent: Code: filter: alpha(opacity=80); -moz-opacity: .20; opacity: .80; Those three lines are the lines that fails the validator and I'm curious as to how big of an issue that is. Thanks in advance. Hi, My CSS is nearly completed. Have spent a lot of time on this design and I must say I have learnt a lot on CSS from this forum. However I have a problem! I do not know if my CSS is correct or not! Are there any tools that can say if the CSS I have is correct or not? At the moment my CSS works on IE (7.0), FireFox and Opera, giving the same result on these three browsers. What I am searching for is to know if maybe I implemented some CSS in a way that could be implemented in another way!! Or maybe if I left some loopwhole in my CSS! Thanks and Regards, Sim085 I normally try XHTML Validation, however, this time I'm trying CSS validation as well. Most of these errors that I came across were in "background-color" and it says you've NO "background-color", which after delving into it further, I realised that whereever I've "color", I HAVE TO HAVE "background-color" as well or whereever I had "background-image", I should ALSO have "background color" & "color", alongside. Bearing this in mind, I managed to reduce the error considerably, however, there seems a tiny hiccup at the moment. I've the background of "centerContent" as image. WITHIN this centerContent, I've texts & within these texts, I've many headings. Now, if I use "h3" and type in "Favourite", it'll display in "h3" style, HOWEVER, the precise background of "h3" stays whatever the background of the "contentCenter" is, which is perfectly fine. Code: h3
{
color:purple;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:150%;
margin:2% 3%;
border-bottom:thin solid #990000;
}
Now, the "background-color:transparent" works perfectly well but if I put "background-color:transparent", I'm STILL getting warning for that. Hence, when I do "background-color:#FFFFFF;", I'll get the "white" space behind the "h3" and NOT the contentCenter's image. Same goes for other elements like "p", "h1", etc. In addition, if I do "background:url(centercontentbackground.jpg) #FFFFFF;", what it does is that it although displays the "centerContent's" image, but it displays it OVER "centerContent's image" i.e. the same image OVER each other. Attached with this message is the "template" page i.e. the way it look IF I add "background:url(centercontentbackground.jpg) #FFFFFF;" in "p" element. While the same template page can be seen with ONLY ONE image i.e. "centerContentbackground's image" perfectly well on: http://darsh25.silverserve.co.uk/Al...gn/template.php 18 #header Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px 10px 0 0 When validating I get this message but this would validate in CSS 3. So is this ok or is there a way around this to make it validate in 2.1. Regards Karl Hello, Please tell me, if you can, why I am getting a CSS Validation warning with: http://student.flvs.net/html/millety/mod8/sitemap.htm. Click the box on the bottom to see the XHTML Validation and on validate CSS right under to see the warning. Thanks! http://validator.w3.org/check?uri=h...ne&ss=1&group=0 With validation on this site I get this error: Sorry, I am unable to validate this document because on line 267 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\x96" does not map to Unicode Line 267: <h4><strong>Fabulous Getaways - Bakoven Villas Place </strong></h4> I have reenetered it plain text but still that error. I have no idea how to fix this. Anybody know? i'm trying to W3C Validate my CSS. It came up with a bunch of warnings but even though they are warnings, does it still pass validation? thats besides the point though. I just have a few questions on why it is causing a warning to parts of my code. Quote: Originally Posted by W3C Warning You have no color with your background-color : #background my code: Code: background-color:#cc0000; dunno really whats wrong there. my only othere warning is I should offer a generic font-family as an alternative. well i thought i picked out a generic font family but i guess it isnt that generic. what are some generic fonts and how do i name it as an alternative? I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. I went and validated my CSS. When doing so it listed some warnings yet the CSS still validated. I have tried to correct the warnings and can't seem to satisfy the validator. Code: Example: Line : 19 (Level : 1) You have no background-color with your color : h1 Line : 31 (Level : 1) You have no background-color with your color : a Line : 37 (Level : 1) You have no background-color with your color : a:link Line : 38 (Level : 1) You have no background-color with your color : a:visited Line : 39 (Level : 1) You have no background-color with your color : a:hover etc... I checked the validity of the CSS at jigsaw.w3.org/css-validator/. Theirs validated and they too have some warnings. Should I be concerned with the warnings? Can I fix the issues that it has? I am trying to make my CSS & XHTML all validate without any warnings. Thank You! Thanks for taking the time to read my question. I tried validating my CSS page at http://jigsaw.w3.org/css-validator/ I got the following errors. No idea what they are talking about here. Quote: * Line : 2 (Level : 1) You have no color with your background-color : body * Line : 8 (Level : 1) You have no color with your background-color : #MainBox * Line : 19 (Level : 1) You have no color with your background-color : #FaderBar * Line : 74 (Level : 1) You have no background-color with your color : #BioFooter * Line : 86 (Level : 1) You have no color with your background-color : ul li * Line : 124 (Level : 1) You have no background-color with your color : ul li a:link * Line : 129 (Level : 1) You have no background-color with your color : ul li a:visited Here is line 8: Code: background-color: #ffffff; As far as I can tell #ffffff is white, and that's a color. Any ideas? Thanks, Brad Greetings Well, I hope I'm not the only one who has struggled with trying to get a page to validate AFTER you have finaly got it working like you'd like it to. I've fixed most of the problems, but this one I'm either too daft or too tired to come up with something. First, here is the current page: http://www.freshrod.com/maryville/maryvillemo_mod.html ...and here is where I'm trying to validate it: http://validator.w3.org/ The problem is that I'm trying to apply css to an <h2> and <p> tag, within an <a> tag. It doesn't like that. However, if you see what I'm trying to have it do on the bottom with those box div's I really can't think of a better way. When I try using <span> to format the text I can't get it to respond right either, but this could just be my poor coding. Any suggestions When i try to validate CSS on http://harshamv.com http://jigsaw.w3.org/css-validator/...harshamv.com%2F am getting errors Code: 58 #rightnav Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.25 59 #rightnav Property -moz-opacity doesn't exist : 0.25 60 #rightnav Parse Error opacity=25) Hi, Having just validated my site, I have quite a few errors I dont know how to fix. If you could please help me that would be great. Error there is no attribute "height" My Code <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0" class="headerback" > Error there is no attribute "background" My Code <table width="100%" border="0" cellpadding="0" cellspacing="0" background="" class="header"> Error element "P" undefined My Code <P class="text"> Also, when I wrap a table in a form I get space appearing beneath the form tag?!?! Can this be prevented? Here is the code: <form action="index.cfm?linkid=courses&courses=searchresults" method="post" name="keyword"> <table width="100%" border="0" cellpadding="0" cellspacing="0" > <tr > <td width="100%" height="22" class="right_back" >COURSE SEARCH</td> </tr> <tr > <td class="red" > <div class="small"> Enter course search criteria below, or use the advanced search</div> <input type="hidden" name="search" value="courses"> <input class="searchwords" title="enter search keywords" tabindex="5" size="10" name="searchtext" /> <input name="button" type="submit" size="1" class="button" tabindex="6" value="Go" /> <a href="index.cfm?linkid=courses&courses=search"><br /> Advanced Search</a> </td> </tr> </table> </form> Hi, This is madhu. I designed a website, in that i used some jquery components and css3 code. While going to w3c validations its showing an error of css3 code. Property -moz-border-radius-topleft doesn't exist Property -webkit-border-top-left-radius doesn't exist so on............ can any one quit me out from this PLZ Note: Validations should be with "zero errors" i am getting this error message when validating my css pages * Line: 0 Parse Error - : i have looked around net and think it is a bug-- BUGZILLA -- but i dont want to overlook it if its not the xhtml validates ..... anyone got any thoughts or ideas on this?? while i am at it - what is a PARSE error anyway???? thanks in advance! Will the -moz property ever become a valid CSS property. when I validate my CSS on w3.org I get errors. I remove all propertys that have a -moz in front of it and it is 100% valid. ALSO ... Is there a way to mask parts of the css from the validator or have a separate CSS file that can be masked from the validator to make it appear to be 100% valid.. Thanks I'm still new to the CSS layout deal, but I'm giving it what I can, and I felt I was getting close until I looked at the page in IE and then ran it through some validation First the validation This is my page so far: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layoutTest.css" />
<style type="text/css" media="screen">@import "layoutTest.css";</style>
<style type="text/css">
<!--
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>
<div id="localNav">
<a href="http://www.codetailor.com"> <img height="66" alt="Alt Text" src="#" width="144" border="0" /></a>
<ul><li>localMenu</li></ul>
</div>
<div id="ctNav">
<ul><li><a href=""><img height="30" alt="Alt Text" src="#" width="223" border="0" /></a></li></ul>
</div>
<div class="content">
<h1>Heading 1</h1>
<p><img src="#" width="288" height="288" align=right hspace="12" alt="picture" ></p>
<h3>Heading 3</h3>
<p>This is some text</p>
</div>
</body>
</html>
I have bolded the part that will not validate when I run it through the http://validator.w3.org/ validator. if this is the case, how do I add styles. It won't allow me to put them on the page or in another file (both are shown here by the way, only one way will be used) the second part is the fact that without having the #ctNav styles on the page I get a little extra on the bottom of my pictures. I can do a screenshot of this if it would help, but if you run it with and without these tags in there you will see for yourself. these are the styles contained in the external file: Code:
body {
margin: 0px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:24px;
text-align: center;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px; text-indent:30px;}
.Content>p+p {text-indent:30px;}
/* All the content boxes belong to the content class. */
.content {
position:absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:36px 10px 20px 165px;
border:0px;
background-color:white;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#localNav {
position:absolute;
width:auto;
min-width:120px;
margin:0px auto 0px 0px;
border:0px;
background-color:3D3B7C;
z-index:4;
height: 100%;
}
#localNav p {margin:0px;}
#localNav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#localNav li {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
}
#localNav li.selected {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
background-color: 67657A;
}
#localNav li:first-child {
margin: 0;
padding: 1px 0px 1px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #000000;
text-align: center;
background-color:#67657A;
font-weight: bolder;
text-indent: 0px;
}
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
finally, when I look at this in IE, the localNav is taking over the whole screen, I assume that it is because of one of the tags, but I can't see it. Point it out for me if you know. thanks for your time. |
|||||||