|
CSS - Css Validation
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 Similar TutorialsI 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, 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! 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 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 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. 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, 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" 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> 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. 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? 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 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. 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 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! Hello every one, thanks for your help before hand, I have validating my own website, so far so good, but I have this problem. I can not figure out why is not validating, the problem lies on this second line of code: <input type="hidden" name="cfgId" value="1" /> So part of the form looks like this: <form action="/cgi-bin/ssecure/ssecure.pl" method="post" enctype="multipart/form-data"> <input type="hidden" name="cfgId" value="1" /> The Error message for validation says this: Validation Output: 1 Error Line 152, Column 49: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. <input type="hidden" name="cfgId" value="1" / > <input type="hidden" name="cfgId" value="1" / > The last haracter ">" of this last line are in RED. Then it says: The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). ------------------------------------------------------------------------ The question, what is that I am doing wrong? Thanks, 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 Hi, i'm starting the testing pahse of a website and can't seem to go through the validation due to a fatal error that kills it. I get the following error: The error was: utf8 "\x96" does not map to Unicode. Supposedly it is located on line 205 of my code, but I have not been able to identify it. Any help would be greatly appreciated. I can't post links according to the forum rules because its a new account. So there's no way of linking the site, but any help on finding the line in which the error is would be very helpful. The site is built in joomla |
|||||||