|
CSS - Css Validation & Warnings
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! Similar Tutorialsi got a lot of warnings, and i was wondering if you could help me avoid them. i've tried online CSS optimizers and compressors, but none of them solved the problem, and some even gave me errors. Code: Same colors for color and background-color in two contexts div.sidepanelcontent and * a 13 Same colors for color and background-color in two contexts div.outer:hover and * a:hover 33 Same colors for color and background-color in two contexts .bcontenthead2 and strong 33 Same colors for color and background-color in two contexts .contenttext hr and strong 33 Same colors for color and background-color in two contexts .bcontenthead and strong 33 Same colors for color and background-color in two contexts .ocontenthead and strong 33 Same colors for color and background-color in two contexts .menucatstrip3 and strong 33 Same colors for color and background-color in two contexts .menucatstrip2 and strong 48 Same colors for color and background-color in two contexts .ocontenthead and h1 48 Same colors for color and background-color in two contexts .menucatstrip3 and h1 48 Same colors for color and background-color in two contexts .contenttext hr and h1 48 Same colors for color and background-color in two contexts .bcontenthead and h1 48 Same colors for color and background-color in two contexts .bcontenthead2 and h1 48 Same colors for color and background-color in two contexts .menucatstrip2 and h1 55 Same colors for color and background-color in two contexts #main and h2 55 Same colors for color and background-color in two contexts .bcontentsection and h2 55 Same colors for color and background-color in two contexts .maincontent and h2 55 Same colors for color and background-color in two contexts div.sidepanel and h2 65 Same colors for color and background-color in two contexts .ocontenthead and h2 a:hover 65 Same colors for color and background-color in two contexts .menucatstrip2 and h2 a:hover 65 Same colors for color and background-color in two contexts .bcontenthead and h2 a:hover 65 Same colors for color and background-color in two contexts .contenttext hr and h2 a:hover 65 Same colors for color and background-color in two contexts .menucatstrip3 and h2 a:hover 65 Same colors for color and background-color in two contexts .bcontenthead2 and h2 a:hover 258 Same colors for color and background-color in two contexts .bcontentsection and #categories 258 Same colors for color and background-color in two contexts #main and #categories 258 Same colors for color and background-color in two contexts div.sidepanel and #categories 258 Same colors for color and background-color in two contexts .maincontent and #categories 282 Same colors for color and background-color in two contexts #main and #categories ul li a 282 Same colors for color and background-color in two contexts div.sidepanel and #categories ul li a 282 Same colors for color and background-color in two contexts .maincontent and #categories ul li a 282 Same colors for color and background-color in two contexts .bcontentsection and #categories ul li a 291 Same colors for color and background-color in two contexts .tscontenthead and #footertext 393 Same colors for color and background-color in two contexts div.sidepanelcontent and .gamebox 414 Same colors for color and background-color in two contexts div.sidepanelcontent and div.outer a:hover 507 Same colors for color and background-color in two contexts .bcontenthead2 and .green 507 Same colors for color and background-color in two contexts .contenttext hr and .green 507 Same colors for color and background-color in two contexts .bcontenthead and .green 507 Same colors for color and background-color in two contexts .menucatstrip3 and .green 507 Same colors for color and background-color in two contexts .ocontenthead and .green 507 Same colors for color and background-color in two contexts .menucatstrip2 and .green 513 Same colors for color and background-color in two contexts div.sidepanelcontent and .darkbrown 516 Same colors for color and background-color in two contexts div.outer:hover and .lightbrown 757 .contenttext hr Same colors for background-color and color 771 Same colors for color and background-color in two contexts div.sidepanel and .whitetext 771 Same colors for color and background-color in two contexts #main and .whitetext 771 Same colors for color and background-color in two contexts .bcontentsection and .whitetext 771 Same colors for color and background-color in two contexts .maincontent and .whitetext 778 Same colors for color and background-color in two contexts .tscontenthead and .gstext 830 Same colors for color and background-color in two contexts .ocontenthead and .contenttable th a:hover 830 Same colors for color and background-color in two contexts .bcontenthead and .contenttable th a:hover 830 Same colors for color and background-color in two contexts .contenttext hr and .contenttable th a:hover 830 Same colors for color and background-color in two contexts .menucatstrip3 and .contenttable th a:hover 830 Same colors for color and background-color in two contexts .bcontenthead2 and .contenttable th a:hover 830 Same colors for color and background-color in two contexts .menucatstrip2 and .contenttable th a:hover 884 Same colors for color and background-color in two contexts .bcontentsection and .headertopleft 884 Same colors for color and background-color in two contexts #main and .headertopleft 884 Same colors for color and background-color in two contexts .maincontent and .headertopleft 884 Same colors for color and background-color in two contexts div.sidepanel and .headertopleft 891 Same colors for color and background-color in two contexts .bcontentsection and .headertopleft a 891 Same colors for color and background-color in two contexts #main and .headertopleft a 891 Same colors for color and background-color in two contexts .maincontent and .headertopleft a 891 Same colors for color and background-color in two contexts div.sidepanel and .headertopleft a 898 Same colors for color and background-color in two contexts .contenttext hr and .headertopleft a:hover 898 Same colors for color and background-color in two contexts .bcontenthead and .headertopleft a:hover 898 Same colors for color and background-color in two contexts .menucatstrip3 and .headertopleft a:hover 898 Same colors for color and background-color in two contexts .menucatstrip2 and .headertopleft a:hover 898 Same colors for color and background-color in two contexts .ocontenthead and .headertopleft a:hover 898 Same colors for color and background-color in two contexts .bcontenthead2 and .headertopleft a:hover 917 Same colors for color and background-color in two contexts .maincontent and .mtext 917 Same colors for color and background-color in two contexts .bcontentsection and .mtext 917 Same colors for color and background-color in two contexts #main and .mtext 917 Same colors for color and background-color in two contexts div.sidepanel and .mtext 985 .TabbedPanelsTabSelected Same colors for background-color and border-bottom-color 990 Same colors for color and background-color in two contexts .maincontent and .TabbedPanelsTab a 990 Same colors for color and background-color in two contexts #main and .TabbedPanelsTab a 990 Same colors for color and background-color in two contexts .bcontentsection and .TabbedPanelsTab a 990 Same colors for color and background-color in two contexts div.sidepanel and .TabbedPanelsTab a Question One I just wanted to validate my css code and all is good except for some warnings. I am unclear as to what they mean or how to fix them. Does anyone know what these warnings are about? CSS Validator Warnings ------------------------------------------ Question Two When viewing my reviews page in IE there is little while lines dividing the table cells. Does anyone know why this is and how to fix it? Problem in is only in IE. Page showing the white lines Thanks in advance for feedback and help. Regards, CH... hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this 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! 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. 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 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 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 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? 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" 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) 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'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? 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'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 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 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> |
|||||||