CSS - W3c Validator Doesn't Recognise Decimals For Opacity Property?

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?

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"?

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

Exactly that question. I got this menu from a website.

Code:

<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; 

text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px 

solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px 

center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#888;}

#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img  {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE 

7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but 

terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species 

within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>

Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag.

Code:

#showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}

I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code.

Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having...

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...

i cant get IE to render opacity correctly.

filter: alpha(opacity=50);
opacity: .5;

i know the filter is for Firefox and the opacity is for IE. but it doesnt seem to work.

any ideas?

I was wondering if anyone knows a way to have use Opacity witin a div tab but then have another div tag in side of it not affected by Opactiy.

Here is the code i have I want background to be transparent but not transbox. But setting the opacity to 100 in transbox wont over ride background.:

Code:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background-color: 000000;
  border: 2px solid black;
  opacity:0.6;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.100;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

I've set the main div content for opacity like this

#content-main {
margin-right:1%;
margin-top:0;
margin-bottom:2%;
width:58%;
background-color:#ffffff;
filter:alpha(opacity=70);
opacity:0.7;
}

but when I put an image in the div it acquires the opacity, and I want it to have none. I've tried to give it a style of opacity:1 and it didn't help. I tried alterting the image z-index to greater than 1 and it didn't help. How do I get the image not to acquire the opacity of the div?

Thanks

I am trying to make the background transperency.. but the text on it should be bright and visible.. but i am not able to make the text brighter

opacity:0.25;
-moz-opacity:0.25;
filter:alpha(opacity=25);



u can look at the menu bar here

http://www.harshamv.com/test/

I have a weird problem. I've applied opacity in my stylesheet for a few elements. My opacity is working fine in FF, but not in IE.

Here's the code I have:
filter: alpha(opacity=75); -moz-opacity:0.75; opacity:.75;

I've also applied it inline as well as in the stylesheet.

Page is located at:
ebonyevans.coastaldistribution.com/index.php

The top center and top left music player should be opaque.

Anyoen see what I'm doing wrong?

I have opacity set for a column <td> but I only want the background image to be 50% opaque, not the text too. I tried the following...

<td style="filter:alpha(opacity=50);">
<span style="filter:alpha(opacity=100);">
Text here...</span></td>


Is there a reason why the 2nd style="filter:alpha()" has no effect on the text what so ever? The image is already transparent, I exported it as a PNG file with transparency allowed or what not.

hi, ive been messing with opacity and want to know if i can achieve this.

I would like to have a background image on my page, then lay some divs over it. I want the image to be full opacity around the divs and be faded in the divs.

so i thought i'd add a class to the divs:
.opaq {
filter: alpha(opacity=50);
opacity: 50%;
-moz-opacity:0.5;
}

but the div inside with my content inherits the opacity and therefore is faded too

is there a way of having the opacity on the background of the div yet have the content 'full'

wat about z-index? to bring the content to the front

heres a pic:

Can someone explain me how to set on a photo-background ( opacity 100% 640x480 ) a square of 320x320 as size and opacity @ 25% and on that square i have to put some text that is at 100% opacity.


The problem is that when i set 100% opacity for the text... it gives me 100% of the 20% opacity... i need to get the full 100% of 100% opacity... can someone explain me ?

And another question... how can i set an opacity for Opera Browsers ?