the "rated" CSS format class work but "rating" is not formating in this method

[co.ador]

public static function OutputRating($varItem)
      {
        // Verify $varItem was provided
        if ($varItem != null && strlen(trim($varItem)) != 0)
        {
          // Check if Magic QUotes is ON
          if (!get_magic_quotes_gpc())
          {
            $varItem = addslashes($varItem);
          }
          
          // Information for the Output
          $averageStars = Rating::CalculateAverageRating($varItem);
          
          // Check to see that the user has not already rated this item
          if (Rating::CheckRatingsByIp($varItem) == 0)
          {
            $classes      = "rating" . Rating::ShowStars($averageStars);
            
            // Write Output HTML for the Rating Data
            $output  = "\r\n";
            $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n";
            $output .= "  <li class=\"one\"><a   href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n";
            $output .= "  <li class=\"two\"><a   href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n";
            $output .= "  <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n";
            $output .= "  <li class=\"four\"><a  href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n";
            $output .= "  <li class=\"five\"><a  href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n";
		$output .= "</ul>\r\n";
          }
          else
          {
            $classes      = "rated " . Rating::ShowStars($averageStars);

            
            // Write Output HTML for the Rating Data
            $output  = "\r\n";
            $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n";
            $output .= "  <li class=\"one\">1</li>\r\n";
            $output .= "  <li class=\"two\">2</li>\r\n";
            $output .= "  <li class=\"three\">3</li>\r\n";
            $output .= "  <li class=\"four\">4</li>\r\n";
            $output .= "  <li class=\"five\">5</li>\r\n";				            		
            $output .= "</ul>\r\n";
          }
        }
        else
        {
          $output = "";
          // This is a major issue. NO information can be retrieve if an item name is not passed.
          Error::LogError("Variable Missing", "You must provide the item name for this function to find the average.");
        }
        
        return $output;
      }

 

The ul below just show the number with bullets without the format of the class rating.

 

    if (Rating::CheckRatingsByIp($varItem) == 0)
          {
            $classes      = "rating" . Rating::ShowStars($averageStars);
            
            // Write Output HTML for the Rating Data
            $output  = "\r\n";
            $output .= "<ul class=\"{$classes}\" id=\"{$varItem}\">\r\n";
            $output .= "  <li class=\"one\"><a   href=\"javascript:RateItem('{$varItem}', 1);\" title=\"1 Star\">1</a></li>\r\n";
            $output .= "  <li class=\"two\"><a   href=\"javascript:RateItem('{$varItem}', 2);\" title=\"2 Stars\">2</a></li>\r\n";
            $output .= "  <li class=\"three\"><a href=\"javascript:RateItem('{$varItem}', 3);\" title=\"3 Stars\">3</a></li>\r\n";
            $output .= "  <li class=\"four\"><a  href=\"javascript:RateItem('{$varItem}', 4);\" title=\"4 Stars\">4</a></li>\r\n";
            $output .= "  <li class=\"five\"><a  href=\"javascript:RateItem('{$varItem}', 5);\" title=\"5 Stars\">5</a></li>\r\n";
		$output .= "</ul>\r\n";
          }

 

The css style sheet is below

.rating{

  width:80px;

  height:16px;

  margin:0 0 20px 0;

  padding:0;

  list-style:none;

  clear:both;

  position:relative;

  background: url(../images/star-matrix.gif) no-repeat 0 0;

}

.rating li.total {

background:none;

top:0;

right:-40px;

/*left:90px; /*if you want brackets aligned left*/

position:absolute;

fext-indent:0;

font-size::93%;

}

ul.rating li {

  cursor: pointer;

/*ie5 mac doesn't like it if the list is floated\*/

  float:left;

  /* end hide*/

  text-indent:-999em;

}

 

ul.rating li a {

  position:absolute;

  left:0;

  top:0;

  width:16px;

  height:16px;

  text-decoration:none;

  z-index: 200;

}

 

 

ul.rating li.one a {left:0}

ul.rating li.two a {left:16px;}

ul.rating li.three a {left:32px;}

ul.rating li.four a {left:48px;}

ul.rating li.five a {left:64px;}

ul.rating li a:hover {

  z-index:2;

  width:80px;

  height:16px;

  overflow:hidden;

  left:0;

  background: url(../images/star-matrix.gif) no-repeat 0 0

}

ul.rating li.one a:hover {background-position:0 -96px;}

ul.rating li.two a:hover {background-position:0 -112px;}

ul.rating li.three a:hover {background-position:0 -128px}

ul.rating li.four a:hover {background-position:0 -144px}

ul.rating li.five a:hover {background-position:0 -160px}

 

/* this is used to remove the hover affect */

/* use the background position according to the table above to display the required images*/

.rated{

  width:80px;

  height:16px;

  margin:0 0 3px 0;

  padding:0;

  list-style:none;

  clear:both;

  position:relative;

  background: url(../images/star-matrix.gif) no-repeat 0 0;

}

ul.rated li {

  cursor: pointer;

/*ie5 mac doesn't like it if the list is floated\*/

  float:left;

  /* end hide*/

  text-indent:-999em;

}

ul.rated li.one a {left:0}

ul.rated li.two a {left:16px;}

ul.rated li.three a {left:32px;}

ul.rated li.four a {left:48px;}

ul.rated li.five a {left:64px;}

 

/* add these classes to the ul to effect the change to the correct number of stars */

.nostar {background-position:0 0}

.onestar {background-position:0 -16px}

.twostar {background-position:0 -32px}

.threestar {background-position:0 -48px}

.fourstar {background-position:0 -64px}

.fivestar {background-position:0 -80px}

/* end rating code */

h3{margin:0 0 2px 0;font-size:110%}

 

after the if statement in the OutputRating method there is an else statement which will execute if  Rating::CheckRatingsByIp is not equal to 0

else it excute the  "rated" class in which works fine, it format the ul tags in the else statement but in the if statement it doesn't format which is the default appearance before the user rate the item. The default appearance is 'nostar' waiting to be rated.

 

There is another method call ShowStars which both statements in the OutputRating method uses the if and else statemtn.

 

ShowStars method:

private static function ShowStars($varStars)
      {
$classes = '';        // Select the Number of Stars Class
        switch ($varStars)
        {

          case 1:
            $classes .= "onestar";
            break;
          case 2:
            $classes .= "twostar";
            break;
          case 3:
            $classes .= "threestar";
            break;
          case 4:
            $classes .= "fourstar";
            break;
          case 5:
            $classes .= "fivestar";
            break;
          default:
            $classes .= "nostar";
            break;
        }
        
        return $classes;
      }

 

Help please.