[SOLVED] Not Validating

[mtylerb]

Hey, I'm having trouble with the following piece of code:

 

.fb_share_link a  {
padding : 2px 0 0 20px;
height : 16px;
width : 125px;
color : #4444ff;
} 

 

When I try to validate the CSS, I get the following error:

 

222    Value Error : width  only 0 can be a length. You must put an unit after your number :  125

222    Value Error : height only 0 can be a length. You must put an unit after your number : 16

 

That is the only section that uses 125 and 16 for its values and there is a unit after the numbers.  I can't figure out what's wrong.  Any ideas?  For reference, the remainder of the CSS is:

 

/*#############################################################
Name: Dirtylicious
Date: 2007-03-10
Description: A soft-colored, bright and somewhat dirty two-column template.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.

Ported to Frog CMS by: David Reimer - erajad.byethost10.com
Frog version: 1.0[20080329]
#############################################################*/

/* standard elements */
html {min-height: 100%;}

* {
margin: 0;
padding: 0;
}

a {color: #048;}
a:hover {color: #06C;}

body {
background: #E7E7E2 url('img_dirtylicious/body.jpg') no-repeat center top;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
padding-top: 64px;
}

p,code,ul,ol {
padding-bottom: 0.6em;
padding-top: 0.6em;
}

li {
list-style: none;
padding: 5px 0px 5px 0px;
}

h1 {font: normal 1.8em Tahoma,sans-serif;}
h2 {font: bold 1.4em sans-serif;}
h3 {font: bold 1.2em Tahoma,sans-serif;}
h4 {font: bold 1em Tahoma,sans-serif;}

form,input {margin: 0; padding: 0; display: inline;}

pre {
background: #FFF;
border: 1px solid #EEE;
border-left: 6px solid #CCC;
color: #666;
display: block;
font: normal 1em Tahoma,sans-serif;
line-height: 1.6em;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
code {
background: #FFF;
font: normal 1em "Courier New",monospace;
}
blockquote {
background: #E7E7E2 url('img_dirtylicious/quote.gif') no-repeat;
display: block;
padding: 0px 10px 0px 28px;
margin: 10px 0px 10px 0px;
}

blockquote.essay {
background: #E7E7E2 url('img_dirtylicious/quote.gif') no-repeat;
display: block;
font-weight: 600;
line-height: 150%;
text-indent: 28px;
padding-left: 28px;
margin: 10px 0px 10px 0px;
}

h1,h2,h3,h4 {padding-top: 6px; color: #553; margin-bottom: 4px;}

/* misc */
.clearer {clear: both; font-size: 0;}
.footerLeft {float: left;} /* changed names to prevent conflict with admin css */
.footerRight {float: right;} /* original here is simply ".left" and ".right" */

/* structure */
.inner-container {
border: 2px solid #D7D7D2;
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 780px;
}

.outer-container {
background: url('img_dirtylicious/container.jpg') no-repeat center bottom;
padding-bottom: 64px;
}

/* header & title */
.header {
background: #222 url('img_dirtylicious/header.jpg') no-repeat;
height: 160px;
margin-bottom: 5px;
text-align: center;
}
.header .title {
color: #FFF;
padding-top: 50px;
}
.header .title .sitename a {
border-bottom: 1px dashed #657382;
color: #FFF;
font: normal 3em sans-serif;
padding-bottom: 2px;
text-decoration: none;
}
.header .title a:hover {border-color: #F60;}
.header .title .slogan {
font: normal 1.1em Verdana,sans-serif;
padding-top: 6px;
}

/* path */
.path {
background: #949490;
color: #FFF;
font: normal 1.1em Verdana,sans-serif;
padding: 8px 12px;
}
.path a {
color: #FAFAFA;
text-decoration: none;
}
.path a:hover {
color: #FFE;
text-decoration: underline;
}

/* main */
.main {
background: url('img_dirtylicious/main.gif') repeat-y;
border-top: 4px solid #FFF;
padding: 8px 12px 0 0;
}

/* content */
.content {
float: right;
width: 538px;
}
.content .info {  /* .descr */
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content ul li {
list-style: url('img_dirtylicious/li.gif');
margin-left: 18px;
}
.content ol li {
list-style: decimal;
margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}
.content .comment-form-body {
width: 450px;
}

/* navigation */
.navigation {
float: left;
width: 210px;
}
.navigation h2,.navigation h3 {
color: #5A5A43;
font: bold 1.1em Tahoma,sans-serif;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.navigation ul, .navigation ol {
padding: 0;
border-top: 1px solid #EAEADA;
}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {
display: block;
list-style: none;
font-size: 1.1em;
color: #554;
text-decoration: none;
padding: 8px 0 8px 5%;
width: 95%;
}
.navigation li a:hover {
background: #F0F0EB;
color: #654;	
}
.navigation p {
border-top: 1px solid #EAEADA;
border-bottom: 1px solid #EAEADA;
line-height: 1.6em;
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
width: 95%;
}

/* footer */
.footer {
background: #949490;
color: #F7F7F2;
font: bold 1em sans-serif;
margin-top: 5px;
padding: 10px 12px;
}

.footer a {
color: #F7F7F2;
text-decoration: none;
}

.footer a:hover {color: #FFC;}

.contactForm {

width:308px;

}

.contactForm p {

padding:10px;

}

.contactForm input {

width:240px;

}

.contactForm textarea {

width:281px;

height:120px;

}

.submit {

width:45px!important;

}

.fb_share_link a {
padding: 2px 0 0 20px;
height: 16px;
width: 125px;
color: #4444FF;
}

[F1Fan]

I am unfamiliar with that error, but why don't you have a unit for all four padding values?

 

Try changing

padding : 2px 0 0 20px;

to

padding : 2px 0px 0px 20px;

 

[AndyB]

Whatever you're using as a validator isn't ...

 

http://jigsaw.w3.org/css-validator/validator with your code pasted in reveals it's compliant with warnings

[BoltZ]

i copied that entire code into jigsaws validator and it worked for me....

[mtylerb]

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tbeckett.net%2Farticles%2Fplugins%2Ftagger.xhtml&profile=css21&usermedium=screen&warning=2&lang=en

 

Ok, maybe this would be better as it includes the URI.

[BoltZ]

Woah this error is weird. First of all I tried validating only your css link in your code. That worked. Then i tried the css you embeded and it worked but your overall site css  isnt validating. Weird..

 

So i  moved to your actual code thinking you styled it bad. Well heres one thing wrong

 

#nav-m li li {
padding-right: 1em;
width: 13em
}

 

you forgot the ; at the end..

 

 

Also

 

#nav-m li ul a {
width: 13em;
w\idth: 9em;
}

 

fix that

 

 

also

 

<img src="http://s9.addthis.com/button1-share.gif" style="width:125;height:16;border:0;" alt="Bookmark and Share" /></a> 

 

I think you need to specify if that is px or not.

 

Well fix those errors then report back, whew im tired lol.

[mtylerb]

Thank you BoltZ!  You rock!

 

I fixed 2/3 of those issues and it validates without issue.  The second one, from what I understood, was an IE fix for the suckerfish drop down menus, in conjunction with one of the js scripts in the head of the page.  I didn't really design the CSS and menu design, so I'm kind of guessing with that.  It validates fine without fixing it, though.

 

Thanks again!

[BoltZ]

No problem. Remember to read the error first and then go through your document searching that. If you read the error it makes sense. there was no value declared after the width so it must mean you have to search for a width term

[mtylerb]

Yeah, my problem is I was only looking at the CSS, not the inline styles.  I totally missed that in the page's code.

[BoltZ]

Yea it confused me at first cuz your entire link was fine and so was what you embedded. Then I looked at the line number the error was on and I was like oh its in the tags.