|
CSS - Spider / Css2 Validator
So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing.
The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately. I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!) Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane. thanks everyone. d Similar Tutorialshello all, have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like Code: background: url("images/tiler.gif") top y-repeat;
in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys ! What is the Difference between CSS2 and CSS3 ??? Link: http://www.vairlinecms.com/template.html I cannot for the life of me figure out why Testting is not aligning vertically with About Us (To have the same space between top of Testting and menu bar as there is for About Us.) Any ideas? CSS: Code: /*
Author: Matt
File: default.css
Desc: contiains all of the CSS styles.
Legal: This code is not to be used without the written consent of the author.
*/
/* ===== Defaults ===== */
body {
background: #CCC;
font-family: verdana, tahoma, serif;
}
a {
}
h1, h2, h3 {
}
p {
}
/* ===== Wrapper ===== */
div#wrapper {
position: relative;
width: 976px;
height: 600px;
margin: 0 auto;
padding: 0;
background: #FFF;
border: 10px solid #FFF;
}
/* ===== Header ===== */
div#header {
position: absolute;
top: 0;
left: 0;
width: 976px;
height: 197px;
margin: 0;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
/* ===== Navigation ===== */
ul#navigation {
position: absolute;
top: 154px;
left: 0;
float: left;
width: 976px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: blue;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
display: block;
float:left;
margin: 0;
padding: 0 .5em 0 .5em;
font-weight: bold;
line-height: 25px;
text-decoration: none;
color: #FFF;
border-right: 1px solid #FFF;
}
ul#navigation a:hover {
color: #FFF;
background: red;
}
/* ===== Content ===== */
div#content {
position: absolute;
top: 185px;
left: 0;
margin: 0;
padding: 0;
}
div#content #leftSide {
float: left;
width: 700px;
margin: 0;
padding: 0;
}
div#content #leftSide h1 {
color: blue;
margin: 0;
padding: 0;
}
div#content #leftSide p {
color: #000;
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 13px;
}
div#content #rightSide {
float:left;
width: 200px;
margin: 0;
padding: 0;
}
div#content #rightSide h1 {
}
div#content #rightSide p {
}
/* ===== Content Boxes ===== */
div#content #clientLoginBox {
}
div#content #clientLoginBox h1 {
}
div#content #clientLoginBox p {
}
/* ===== Footer ===== */
div#footer {
}
HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vAirlineCMS.com | Virtual Airline Support Center</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> <head> <body> <div id="wrapper"> <div id="header"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Sign-Up</a></li> <li><a href="#">Support & Contact</a></li> </ul> </div> <div id="content"> <div id="leftSide"> <h1>About Us</h1> <p>This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. </p> <h1>Features</h1> <p>Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test.</p> </div> <div id="rightSide"> <h1>Testting</h1> </div> </div> </div> </body> </html> Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? Hello, I receive error when validating my css from w3c. Code: Line: 89 Context : #header_navigation Invalid number : display inline-block is not a display value : inline-block Line: 119 Context : #header_left_navs Invalid number : border Too many values or values are not recognized : 0 0 2px 0 #ffcc00 solid Line: 271 Context : .welcome_title Invalid number : font Impact is not a font-size value : Impact,Arial Line: 522 Context : .clearfix Invalid number : display inline-block is not a display value : inline-block but why does it work's well on my page? I've just run my site through the W3C CSS validator and I'm getting an error telling me I need to validate my XML document? So, how do I validate my XML document, and where do I put the </link> tag it tells me I need? I fear this is just the start of my problems here's the validator link: http://jigsaw.w3.org/css-validator/...&usermedium=all I got the following... Line : 0 font-family: You are encouraged to offer a generic family as a last alternative here is the .css file any suggestions as how to make a font family non generic. Code:
<!--
body{
margin: 10px 10px;
font-family: "Arial",Times;
background-color: #FAEBD7;
}
form{
padding: 2px;
font-size: 10pt;
line-height: 12pt;
font-family: "Arial",Times;
}
input{
background-color: #FAEBD7;
border: solid 1px #000000;
}
div{
width: 700px;
padding: 10px;
background-color: #FAEBD7;
}
div#header{
height: 25px;
color: #8E2323;
font-size: 12pt;
font-weight: 600;
line-height: 14pt;
text-align: center;
letter-spacing: 2px;
font-variant: small-caps;
font-family: "Arial",Times;
}
a{
padding: 2px;
color: #8E2323;
font-size: 11pt;
line-height: 16pt;
text-decoration: none;
}
a.na{
color: #000000;
font-size: 11pt;
font-family: "Arial",Times;
}
td#navContainer{
padding: 5px;
color: #000000;
font-size: 11pt;
text-align: left;
line-height: 11pt;
font-variant: small-caps;
}
p#footer{
width: 565px;
padding: 5px;
font-size: 11pt;
font-variant: small-caps;
font-family: "Arial",Times;
}
td#footer{
width: 565px;
padding: 5px;
font-size: 11pt;
font-variant: small-caps;
font-family: "Arial",Times;
}
div#viewContainer{
width: 550px;
padding: 10px;
font-size: 11pt;
text-align: left;
font-family: "Arial", Times;
border-left: solid 1px #000000;
}
p#copyright{
width: 700px;
padding: 5px;
font-size: 8pt;
line-height: 10pt;
text-align: center;
font-variant: small-caps;
font-family: "Arial",Times;
}
//-->
Hi all I've tryed the W3 validator for CSS and it appears the following error: 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. I d'like to know what a hell misses on my css. thanks in advance btw this is my css file: Code: /* table.css - borders das tabelas */
.blueborder{
border:3px solid;
border-color:#94BAD6;
}
Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? 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... Thought I'd run a page I'm working on through the W3C CSS validator... it doesn't seem to recognise decimals for the opacity property? Is this a bug, I don't think I've written anything incorrectly? Hello all, I understand that it is important to have your CSS & XHTML correctly validated. However, recently I have seen a surge of links usually at the footer of some websites which link directly to the W3C Validator website, 'proving' validation of the website. Is their any particular reason for this? Here is an example: armadadesign.ca I would appreciate any feedback, thanks! 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 |
|||||||