|
CSS - Hi, Css3 Validator Results
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"? Similar TutorialsWhat is the Difference between CSS2 and CSS3 ??? 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. Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
This is driving me nuts! I have done everything I think that they says I should do but it is not working...here is the table style I am using if I use normal border styles it works ok...please can someone tell me where I am going wrong...thank you! .nik { background-color: #FFEAA1; padding-left: 1em; padding-right: 1em; border-image: url(border.png) 0% 30% 0% 30% repeat; } oh and the image size is 100px x 100px Kriss I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
I'm currently having a problem getting the opacity to work. I haven't tried using RGBa yet, but it should work the same as HSLa, and right now HSLa isn't working properly. Usually when I've had a problem, it's just a matter of moving the file around in my finder(I use a Macbook) or I've missed a semi-colon or quotation mark or something.....but with this, I swear I've checked, double-checked, triple-checked everything and it's not working. And I've checked it in Safari, Chrome, and Firefox. Right now I have the Alpha element in the HSLa set to .25, which means it should be quite transparent...but all it does is make the color lighter, not transparent. If I could somehow send someone my files/images and screenshots for you to try and help, that'd be great. Otherwise I'm not sure how to go about getting help. Thanks! So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa. For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html 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;
}
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;
}
//-->
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 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 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 I have the following in my html: PHP Code: <p><a href="mempage.php?do=layout"><span style="margin-right:125px;">Profile Colors</span><span style="background:#<? echo $memsettings['primarycolor']; ?>; height:10px; padding:0 5px; margin-right:2px;"></span><span style="background:#<? echo $memsettings['secondarycolor']; ?>; height:10px; padding:0 5px;"></span></a></p> In FF it shows two small squares with the colors next to "Profile Colors" but in IE it shows nothing. No squares, no colors, just the "Profile Colors" text. Any suggestions? PLEASE HELP |
|||||||