8 replies [Last post]
andya700
andya700's picture
Offline
Regular
Last seen: 10 years 35 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

I am trying to validate the CSS for a site I am building and I am incurring in 2 errors. Being completely new to development I cannot find an answer that make sense to me in the various forums, so I thought I may ask for expert help here.

The CSS code is the following

@charset "utf-8";
 
ToC
 
		1. defaults
		2. structure
		3. links and navigation
		4. fonts
		5. images
 
Notes
 
*/
/* --------- 1. defaults --------- */
*{
		margin: 0;
		padding: 0;
}
 
html {
	font-size: 100%;
}
 
/* --------- 2. structure --------- */
 
body {
	width: 960px;
	margin: 0 auto;
	font:62.5%;
	line-height: 1.5;
	font-family: 'Myriad Pro', Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
}
 
#wrapper {
	padding: 0px;
}
 
#masthead {
	background:#414142 url(images/SenpaiMainLogoNegWeb.png) no-repeat 10px 10px;
	height: 100px;
}
 
#langnav {
padding: 10px 10px 10px 920px;
}
 
#navigation {
	background-color:#414142;
	height: 35px;
	width: 960px;
}
 
ul#breadcrumbs {
	font-size: 0.6em;
	margin-bottom: 0.6em;
}
 
#breadcrumbs li {
	display:inline;
	background-image:url(images/doublearrow.gif) 0 50% no-repeat;
	padding: 0 15px 0 0px;
	font-style: italic;
	color:#414142;
}
 
.boxout {
	float:right;
	width: 120px;
	margin: 0 0 60px 60px;
	background:#F15D27 url(images/BoxoutBottom.gif) 0 100% no-repeat;
	padding: 0 20px;
}
 
.boxout h2 {
	text-transform:uppercase;
	text-align:center;
	background:#F15D27 url(images/BoxoutTop.gif) no-repeat;
	margin: 0 -20px 20px;
	padding: 5px 10px;
	border-bottom: 1px solid #f15D27;
	margin-bottom:-10px;
}
 
.boxout h3 {
	color:#FFFFFF;
	font-size: 0.8em;
	line-height: 0.9em;
	margin-bottom: 5px;
}
 
.boxout p {
	font-size: 0.8em;
	line-height: 0.9em;
	margin-bottom: 20px;
}
 
#content {
	padding: 20px 40px 20px 260px;
	background:#F79321 url(images/SenpaiShapeArancioWeb3.png) no-repeat -177px 100px;
	color: #414142;
}
 
.clearFix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
 
#footer {
	background: #F15D27;
	color: #414142;
	font-size: 0.6em;
	height: 25px;
	padding: 10px 40px 0 10px;
}
 
#footer-left {
	float: left;
	text-align:left;
}
 
#footer-centre {
	float: left;
	text-align:center;
	padding-left:50px;
}
 
#footer-right {
	float:right;
	text-align:right;
}
/* --------- 3. links and navigation --------- */
 
a {
	color: #00FF00;
}
a:link {
	color: #414142;
}
a:visited {
	color: #414142;
}
a:hover {
	color: #A7A9AC;
}
a:active {
	color: #F15D27;
}
 
/* --------- 4. fonts --------- */
 
h1 {
	font-size: 1.6em;
}
 
h2 {
	font-size: 1.3em;
}
 
h3 {
	font-size: 1.0em;
	margin-top: 1.2em;
}
 
p {
	font-size: 0.8em;
	margin-bottom: 0.8em;
}
.

I get these two errors

32  	 body  	 Value Error : font  Parse Error  [empty string]
64 	#breadcrumbs li 	Value Error : background-image Too many values or values are not recognized : url(images/doublearrow.gif) 0 50% no-repeat
.

And these warnings

67  	 	Same colors for color and background-color in two contexts #navigation and #breadcrumbs li
67 		Same colors for color and background-color in two contexts #masthead and #breadcrumbs li
89 		Same colors for color and background-color in two contexts body and .boxout h3
144 		Same colors for color and background-color in two contexts #masthead and a:link
144 		Same colors for color and background-color in two contexts #navigation and a:link
147 		Same colors for color and background-color in two contexts #navigation and a:visited
147 		Same colors for color and background-color in two contexts #masthead and a:visited
153 		Same colors for color and background-color in two contexts .boxout and a:active
153 		Same colors for color and background-color in two contexts .boxout h2 and a:active
153 		Same colors for color and background-color in two contexts #footer and a:active

Another question is, should I worry about the warnings? Or are they sort of suggestions when it comes to obtain validation? Most of the warnings seems not to have a real effect on the site, at least not one that is apparent to me. Are these issues of coding style or should one try to eliminate them (if I knew how anyway Wink ).

I would appreciate any help on how to solve the errors.

Thans
Regards
A

Andy

thedooropens
Offline
Enthusiast
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2008-10-02
Posts: 81
Points: 2

Some answers

Well... I'm a newbie myself... maybe this will help a little.

font:62.5%; - Font what? You have it right in other places (Hard to see errors in your own code - I know)

#breadcrumbs li Value Error : background-image Too many values or values are not recognized : url(images/doublearrow.gif) 0 50% no-repeat
I don't think those are valid values for bgrd images - try something like top center

Good Luck

Triumph (not verified)
Anonymous's picture
Guru

Change the font to

Change the font to font-size. You can't use the font shortcut unless you include at least font-size and font-family in that order.

Change background-image to background. You are using values for the background shortcut. background-image only accepts a uri, the value "inherit" or the value "none".

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 35 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

One point has been resolved but...

Thanks for having a look at it.
I meanwhile spent some time on it and managed to resolve the breadcrumb problem. I separated the various values on single entries, i.e. one line is about the image, one about no-repeat...etc, spreading it on single command lines. It worked. I have to re-look at the code anyway, but it will be easier once I have couple of pages linked.

The 62.5% refers to font-size, but if I use font-size it becomes incredibly small. Something is not right but do not know what. I found this 'font:62.5%' line in various books, it has apparently to do with font size for IE and it should allow a better management of the Zoom Level. Yet, all literature reports the use of font and not font-size, so I wonder if the mistake is elsewhere (I cannot believe that one puts in a book something that would not validate - the book I use is a mainstream one by a good author).

So I am down to 1 unresolved problem with CSS. Meanwhile I managed to screw my menu in Spry. God knows what I touched. Can anyone see anything wrong with this code?

<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(xxxxx.css);
/* ]]> */
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript">
</script>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<link rel="shortcut icon" href="images/xxxx.ico" type="image/x-icon"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"/>

I have the distinct feeling that something is not right in the part after as my editor (dreamweaver CS3) underlines it...normally a sign of something not right (what...is the question!).

Anyway, so I am not the only one struggling with finding errors...I thought it was me only! Smile

Any comment is welcomed.
Regards
A

Andy

Triumph (not verified)
Anonymous's picture
Guru

andya700 wrote:... (I cannot

andya700 wrote:

... (I cannot believe that one puts in a book something that would not validate - the book I use is a mainstream one by a good author). ...

Obviously, it does include invalid code. Now you know more than the author. Wink

I suppose it also depends on when it was written. I purchased a book on server side programming written in 2006 that has all sorts of html errors and non-semantic tables-based layout. You are allowed to say the name of the book and author.

andya700 wrote:

The 62.5% refers to font-size, but if I use font-size it becomes incredibly small.

Well, then use 80% or 90% or 110%. Laughing out loud

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 35 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

Breadcrumb solution

Thanks,
I solved the breadcrumb issue as follows (see below) but I am going to try the changes you suggested as I believe it may be a better way to do it. Thanks for it

#breadcrumbs li {
	display:inline;
	background-image:url(images/doublearrow.gif);
	background-repeat:no-repeat;
	background-position:center;
	padding: 0 15px 0 0;
	font-style: italic;
	color:#414142;

As for Font-size I tried that but there must be something wrong elsewhere as if I do that, the font becomes so small it is almost impossible to read it. It makes sense but for some reason the combination of CSS I use, brings that effect. I wonder why...something to do with the cascading system...? Mah!

If you or anyway sees what I am not able to spot, I would be glad to receive any help (also on the menu issue above - previous msg).

Thanks, regards
A

Andy

Triumph (not verified)
Anonymous's picture
Guru

andya700 wrote: #breadcrumbs

andya700 wrote:

#breadcrumbs li {
	display:inline;
	background-image:url(images/doublearrow.gif);
	background-repeat:no-repeat;
	background-position:center;
	padding: 0 15px 0 0;
	font-style: italic;
	color:#414142;

That can be shortened to:

#breadcrumbs li {
	display:inline;
	background:url(images/doublearrow.gif) no-repeat center;
	padding: 0 15px 0 0;
	font-style: italic;
	color:#414142;

andya700
andya700's picture
Offline
Regular
Last seen: 10 years 35 weeks ago
Joined: 2008-11-19
Posts: 31
Points: 11

62.5% is for ems /breadcrumbs now ok

Thanks for the tip, shortening/simplyfying the code is always good and I think I was overzealous in trying to eliminate the error in validation for this part.

Yet, I still have two questions open:
1) the issue of font (and why when using font-size is all going belly up); I may actually ask the author of the book to help but I recalled what the 62.5% was all about. It allows the font to be sized in ems rather than picapoints or pixels and to make 10ems=10px and so on. I think where I may have got it wrong is that it may need to go on the Body and not the Wrapper. Yet, I cannot see why it changing from font to font-size makes the whole text go minuscule.

2) are warnings in CSS validation preventing one to obtain the validation? I assume mine are all warnings about colors being potentially confusing, yet I designed it intentionally that way for graphic design reasons (the idea is to keep colors to a minimum even on links etc).

Thanks for the continuos help, this is a great forum. A day I use it and already so good.

Regards
Andy

Andy

Triumph (not verified)
Anonymous's picture
Guru

andya700 wrote:... It allows

andya700 wrote:

... It allows the font to be sized in ems rather than picapoints or pixels and to make 10ems=10px and so on. ...

There's no point to that. Especially since I have my setting different so that text shows up larger on my browser by default and anyone can change it anyway. It's a terrible idea and in the end makes not a bit of difference.