Would anyone mind advising on my W3schools Validation Report?

B

bsugar

Member
Hey guys!

Is there a bright spark who can possibly advise? Its the first time that I have used W3schools validation service. I validated a page of a site I am trying to build and this is the report. It dosen't like the way I've used border colour code and colour generally. It wants me to re-write my code but I am not sure how to re-write it as I thought it was already correct. A lot of it came from W3schools anyway.


I jump one hurdle and there seem to be 5 more in front. :icon_rolleyes:

If you can take a glance at this to help me out it could put a smile back on my face. I've added my own CSS to check against. I didn't add the html as I think I understand what it wants me to do.


Thanking you :icon_notworthy:



34 #wrapper Value Error : border-color Lexical error at line 34, column 23. Encountered: " " (32), after : "#" : 999;
42 Value Error : border-color Parse Error [: 2px solid #999; border-left: 2px solid #999; border-top: 2px solid #999; border-bottom: 2px solid #999; box-shadow: 0 20px 50px -6px black; }
#leftsidebar]
55 Value Error : border-color Lexical error at line 55, column 23. Encountered: " " (32), after : "#" : 999;
63 Value Error : border-color Parse Error [: 1px solid #999; } #rightsidebar]
72 Value Error : border-color Lexical error at line 72, column 23. Encountered: " " (32), after : "#" : 999;
79 Value Error : border-color Parse Error [: 1px solid #999; top: 472px; } #logo]
119 #navigation ul li Value Error : color Lexical error at line 119, column 18. Encountered: " " (32), after : "#" FFF;
125 Value Error : color Parse Error [: 15px; font-weight: bolder; /*color: #FFF;*/ z-index: 800; } a:link]
174 #footnavtextnavigation ul li Value Error : color Lexical error at line 174, column 18. Encountered: " " (32), after : "#" FFF;
180 Value Error : color Parse Error [: 15px; font-weight: bolder; /*color: #FFF;*/ z-index: 800; } a:link]





My CSS Stylesheet



}

#wrapper{
position: relative;
width:960px;
height: 1500px;
margin:auto;
top: 0px;
background: #FFFFFF;
text-align: left;
border-color:# 999;
border-right: 2px solid #999;
border-left: 2px solid #999;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
box-shadow: 0 20px 50px -6px black;
}

#leftsidebar {
position:absolute;
left: 4px;
width: 240px;
height:1492px;
background: 00F;
float: left;
background: #fff;
z-index: 0;
top: 1px;



border-color:# 999;
border-right: 1px solid #999;


}



#rightsidebar {
position:absolute;
right: 2px;
width: 240px;
height:1023px;
background: #FFF;
z-index: 101;
border-color:# 999;
border-left: 1px solid #999;
top: 472px;


}

#logo{
position: absolute;
top: 3px;
width: 209px;
height: 201px;
z-index:2;
left: 5px;

}

#navbar{
position: absolute;
top: -1px;
width: 722px;
height: 75px;
z-index:601;
left: 240px;
}



#navigation {
position: absolute;
list-style: none;
top: 30px;
float:right;
width: 741px;
height: 38px;
z-index: 800;
left: 274px;
/*color:#FFF;*/
font-weight: bold;


}

#navigation ul li {
text-transform: uppercase;
display: inline;
margin-right: 20px;
color: # FFF;
font-size: 15px;
font-weight: bolder; /*color: #FFF;*/
z-index: 800;
}

a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color:#03F;
}
a:active {
color:#03F;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}






#footnavtextnavigation {
position: absolute;
list-style: none;
top: 1433px;
float:right;
width: 836px;
height: 72px;
z-index: 800;
left: 76px;
/*color:#FFF;*/
font-weight: bold;


}

#footnavtextnavigation ul li {
text-transform: uppercase;
display: inline;
margin-right: 20px;
color: # FFF;
font-size: 15px;
font-weight: bolder; /*color: #FFF;*/
z-index: 800;
}

a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color:#03F;
}
a:active {
color:#03F;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
font-family: inherit;
}
 
Take the spaces out between the # and the value of the hex for starters. So
Code: 
border-color:# 999;
is
Code: 
border-color: #999;

Then perhaps look at where you have doubled up on styles;

For example;

Code: 
border-color:# 999;
border-right: 2px solid #999;
border-left: 2px solid #999;
border-top: 2px solid #999;
border-bottom: 2px solid #999;

Can be written as;

Code: 
border: 2px solid #999;

Hope that helps.
 
Thanks Corrosive.

I'm just a baby coder as you could probably tell from my coding. I'm working on it though.

Thanks for the advice :icon_wink:
 
I'm not even a baby chimp when it comes to code monkerey but isn't #999 usually standardised to #999999 if you're meaning the mid grey tone thing? Not that that should make any difference but just wondering if their software is looking for that rather than #999?
 
spottypenguin said:
I'm not even a baby chimp when it comes to code monkerey but isn't #999 usually standardised to #999999 if you're meaning the mid grey tone thing? Not that that should make any difference but just wondering if their software is looking for that rather than #999?
Click to expand...

You boy, straight to the bottom of the class for not recognising CSS shorthand when you see it :icon_wink:

Hex values can be stated as three numbers only when you have three sets of pairs declared. So, #999999 can be #999 or #FF0000 can be #F00. Keep your stylesheets 'skinny' with CSS shorthands :icon_biggrin:
 
Corrosive said:
You boy, straight to the bottom of the class for not recognising CSS shorthand when you see it :icon_wink:

Hex values can be stated as three numbers only when you have three sets of pairs declared. So, #999999 can be #999 or #FF0000 can be #F00. Keep your stylesheets 'skinny' with CSS shorthands :icon_biggrin:
Click to expand...

You monkey, read what I said :p I'm not disputing the shortcode I am saying they may not have set up their software analysis thingy to take them into account :icon_hug:
 
You must log in or register to reply here.
Back
Top