views:

127

answers:

2

Why validation giving this error. How to solve?

ul#navigation li#navigation-3 a.current      

Value Error : background-position Too many values or values are not recognized : -164px -164px -36px -164px -164px -36px

This is error screen.

alt text

CSS

ul#navigation { height: 36px; left: 300px; list-style-image: none; list-style-position: outside; list-style-type: none; position: relative; top: 74px; width: 603px; }

ul#navigation li { display: inline; }

ul#navigation li a { height: 36px; float: left; text-decoration: none;  }

ul#navigation li a:link, ul#navigation li a:visited {font-family:Arial; color:#595959; font-size:1.1em; font-weight:bold }

ul#navigation li a:hover, ul#navigation li a:active {color:#404040}

ul#navigation li a span { display:block;
float:left;
padding-left:8px;
padding-top:14px;}

ul#navigation li#navigation-1 a { width: 53px; background: url(../images/menu-sprite.jpg) no-repeat 0px 0; }


ul#navigation li#navigation-1 a:active, ul#navigation li#navigation-1 a:hover { background-position: 0px -36px; }

ul#navigation li#navigation-1 a.current { background-position: 0px 0px -36px; }

ul#navigation li#navigation-2 a { width: 111px; background: url(../images/menu-sprite.jpg) no-repeat -53px 0; }

ul#navigation li#navigation-2 a:active, ul#navigation li#navigation-2 a:hover { background-position: -53px -36px; }

ul#navigation li#navigation-2 a.current { background-position: -53px -53px -36px; }

ul#navigation li#navigation-3 a { width: 78px; background: url(../images/menu-sprite.jpg) no-repeat -164px 0; }

ul#navigation li#navigation-3 a:active, ul#navigation li#navigation-3 a:hover { background-position: -164px -36px; }

ul#navigation li#navigation-3 a.current { background-position: -164px -164px -36px; }

ul#navigation li#navigation-4 a { width: 100px; background: url(../images/menu-sprite.jpg) no-repeat -242px 0; }

ul#navigation li#navigation-4 a:active, ul#navigation li#navigation-4 a:hover { background-position: -242px -36px; }

ul#navigation li#navigation-4 a.current { background-position: -242px -242px -36px; }

ul#navigation li#navigation-5 a { width: 88px; background: url(../images/menu-sprite.jpg) no-repeat -342px 0; }

ul#navigation li#navigation-5 a:active, ul#navigation li#navigation-5 a:hover { background-position: -342px -36px; }

ul#navigation li#navigation-5 a.current { background-position: -342px -342px -36px; }

ul#navigation li#navigation-6 a { width: 96px; background: url(../images/menu-sprite.jpg) no-repeat -430px 0; }

ul#navigation li#navigation-6 a:active, ul#navigation li#navigation-6 a:hover { background-position: -430px -36px; }

ul#navigation li#navigation-6 a.current { background-position: -430px -430px -36px; }

ul#navigation li#navigation-7 a { width: 77px; background: url(../images/menu-sprite.jpg) no-repeat -526px 0; }

ul#navigation li#navigation-7 a:active, ul#navigation li#navigation-7 a:hover { background-position: -526px -36px; }

ul#navigation li#navigation-7 a.current { background-position: -526px -526px -36px; }
+1  A: 

You have this:

ul#navigation li#navigation-3 a.current { background-position: -164px -164px -36px; }

There are only two values needed to position a background, get rid of one and it should validate.

Update: you have this on all of your current selectors, remove the third value from all and it will be fine.

Kyle Sevenoaks
I made this code using this tool http://lab.mattvarone.com/navbar/ code is working fine but giving validation error.
metal-gear-solid
Web pages are still in 2D. ;-)
Gumbo
Even so, the code is wrong, remove one of the values and it should validate. Not every tool is perfect, you'll always have to go over and check generated codes yourself :) Haha @Gumbo!
Kyle Sevenoaks
So you used a tool which generated broken code that (some) browsers are capable of error correcting for. Big whoop. The code is still wrong. If "it works in my browser" was all we needed, we wouldn't bother with validators.
David Dorward
@Gumbo — z-index ;)
David Dorward
@David Dorward: But you only see a 2D projection of that model.
Gumbo
A: 

Background-position gets 2 values not 3. See here

Soufiane Hassou