effetto sfumatura tab-bar

[_*m3c4*_]

Salve a tutti.
Vi spiego il mio problema:
sto sviluppando la versione mobile di un progetto universitario, seguendo il libro "mobile Design".
Ho creato la mia tab-bar e vorrei applicare l'effetto sfumatura come su
http://soyexchange.com/#page-spots
che è fra l'altro l'esempio del libro.
Purtroppo non mi da l'effetto desiderato, ma solo un nero piatto.
Vi posto il mio css opportunamente modificato per il mio sito:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px;
  background: #333 url(../img/bg.gif);
  font-size: 0.875em;
  line-height: 1.3; }



#tab-bar {
   zoom: 1;
  background: #050405;
  border-bottom: 1px #333 solid;
  position: relative;
  z-index: 200;
  -webkit-user-select: none;
  -o-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px 0;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px 0; }
#tab-bar:before, #tab-bar:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden; }
#tab-bar:after {
    clear: both; }
.cssgradients #tab-bar {
    background-image: -moz-linear-gradient(top, #353535, #212021 55%, #090809 55.1%, #050405);
    background-image: -ms-linear-gradient(top, #353535, #212021 55%, #090809 55.1%, #050405);
    background-image: -o-linear-gradient(top, #353535, #212021 55%, #090809 55.1%, #050405);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#353535), color-stop(0.55, #212021), color-stop(0.551, #090809), to(#050405));
    background-image: -webkit-linear-gradient(top, #353535, #212021 55%, #090809 55.1%, #050405);
    background-image: linear-gradient(top, #353535, #212021 55%, #090809 55.1%, #050405); }
#tab-bar li {
    display: inline;
    float: left;
    width: 33.333%; }
#tab-bar a {
    text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 1px;
    color: #cdcdcd;
    display: block;
    font-size: 1em;
    font-weight: bold;
    height: 4.583em;
    min-height: 55px;
    margin: 0 0.833em;
    overflow: hidden;
    padding-top: 0.428em;
    position: relative;
    text-align: center;
    text-decoration: none; } 
#tab-bar a:after {
  content: "";
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 1.833em; }

#tab-home a:after {
    content: url(../img/home_w.png);
    position: absolute;
    left: 34%;
    margin.left: -10px;
    top: 1.833em;
    }
.page-home #tab-home a {
    color: #207e7e;   /* colore verde */
    -o-box-shadow: rgba(0, 0, 0, 0.8) 0 -10px 1px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 -10px 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 -10px 1px 0;
    box-shadow: rgba(0, 0, 0, 0.8) 0 -10px 1px 0;
    }
.cssgradients .page-home #tab-home a {
    background-image: -moz-linear-gradient(top, rgba(40, 40, 40, 0.9), rgba(35, 35, 35, 0.5) 55%, rgba(46, 46, 46, 0.1));
    background-image: -ms-linear-gradient(top, rgba(40, 40, 40, 0.9), rgba(35, 35, 35, 0.5) 55%, rgba(46, 46, 46, 0.1));
    background-image: -o-linear-gradient(top, rgba(40, 40, 40, 0.9), rgba(35, 35, 35, 0.5) 55%, rgba(46, 46, 46, 0.1));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(40, 40, 40, 0.9)), color-stop(0.55, rgba(35, 35, 35, 0.5)), to(rgba(46, 46, 46, 0.1)));
    background-image: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.9), rgba(35, 35, 35, 0.5) 55%, rgba(46, 46, 46, 0.1));
    background-image: linear-gradient(top, rgba(40, 40, 40, 0.9), rgba(35, 35, 35, 0.5) 55%, rgba(46, 46, 46, 0.1)); }
.page-home #tab-home a:after {
    content: url(../img/home_w.png);
    position: absolute;
    left: 34%;
    margin.left: -10px;
    top: 1.833em;
    }  
.page-home #tab-home a:before {
    content: "";
    display: block;
    height: 0.5em;
    margin-left: -0.5em;
    left: 50%;
    position: absolute;
    margin-top: 0;
    top: 0;
    width: 1em; }
.cssgradients .page-home #tab-home a:before {
      -webkit-border-bottom-left-radius: 0.143em;
      -webkit-border-bottom-right-radius: 0.143em;
      -moz-border-radius-bottomleft: 0.143em;
      -moz-border-radius-bottomright: 0.143em;
      border-bottom-left-radius: 0.143em;
      border-bottom-right-radius: 0.143em;
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -ms-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -o-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 7, from(rgba(236, 223, 156, 0.9)), to(rgba(0, 0, 0, 0)));
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0)); }    

.page-filemanager #tab-filemanager a:before {
    content: "";
    display: block;
    height: 0.5em;
    margin-left: -0.5em;
    left: 50%;
    position: absolute;
    margin-top: 0;
    top: 0;
    width: 1em; }
.cssgradients .page-filemanager #tab-filemanager a:before {
      -webkit-border-bottom-left-radius: 0.143em;
      -webkit-border-bottom-right-radius: 0.143em;
      -moz-border-radius-bottomleft: 0.143em;
      -moz-border-radius-bottomright: 0.143em;
      border-bottom-left-radius: 0.143em;
      border-bottom-right-radius: 0.143em;
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -ms-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -o-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 7, from(rgba(236, 223, 156, 0.9)), to(rgba(0, 0, 0, 0)));
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0)); }   
      
.page-home #tab-video a:before {
    content: "";
    display: block;
    height: 0.5em;
    margin-left: -0.5em;
    left: 50%;
    position: absolute;
    margin-top: 0;
    top: 0;
    width: 1em; }
.cssgradients .page-video #tab-video a:before {
      -webkit-border-bottom-left-radius: 0.143em;
      -webkit-border-bottom-right-radius: 0.143em;
      -moz-border-radius-bottomleft: 0.143em;
      -moz-border-radius-bottomright: 0.143em;
      border-bottom-left-radius: 0.143em;
      border-bottom-right-radius: 0.143em;
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -ms-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -o-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 7, from(rgba(236, 223, 156, 0.9)), to(rgba(0, 0, 0, 0)));
      background-image: -moz-radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0));
      background-image: radial-gradient(rgba(236, 223, 156, 0.9), rgba(0, 0, 0, 0)); }   
      
      
#tab-filemanager a:after {
    content: url(../img/file_manager.png);
    position: absolute;
    left: 34%;
    margin.left: -10px;
    top: 2em;
    }
#tab-video a:after {
    content: url(../img/videos.png);
    position: absolute;
    left: 34%;
    margin.left: -10px;
    top: 1.833em;
    }
        
.table-view {
    background: #7c8080; /* colore grigio sfondo */
     }
.table-view li {
    border-top: 1px #878b8b solid;
    border-bottom: 1px #333 solid;
    }
.table-view .even {
    background: #a2a7a7;
    }
.table-action li {
    position: relative;
    }
.table-action a {
    color: #e6edee;
    display: block;
    padding: 0.5em 0.78em 0.714em;
    position: relative;
    text-decoration: none;
    text-shadow: rgba(0,0,0,0.4) 0 -1px 1px;
    }
.table-action h2 {
    color: white;
    font-size: 1.28em; /*18px / 14px */
    width: 82%
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    }
.table-action .argomento {
    font-weight: normal;
    }
.table-action .freccia {
    background;: #333;
    border: 1px #333 solid;
    -webkit-border-radius: 0.143em;
    -moz-border-radius: 0.143em;
    border-radius: 0.143em;
    color: #207e7e;
    font-weight: bold;
    position: absolute;
    padding: 0.214em 0.429em;
    right: 2.5em;
    top: 50%;
    margin-top: -1.1em;
    }
.table-action a:after {
    
    content: url(../img/freccia.png);
    margin: -0.82em 1em 0 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    right: 0; }

per me c'è qualcosa che non va qua nel css, perche in html è un semplice ul e li.
dove stò sbagliando?
mi scuso gia da ora, magari è una sciocchezza ma è la prima volta che metto mano su un css.
e mi scuso per l'italiano non troppo articolato! mi sono appena svegliato!
Forse ho bisogno di un altro caffè!!

Grazie a tutti

[lucavizzi]

Dovrebbe essere sufficiente applicare il gradient sul "background" e non sul "background-image".
Ciao

[_*m3c4*_]

risolto! mancavano i link ai js di modernize!! stupido....!!!
grazie!