Kdjykuj

So I followed this tutorial to add "NEW" or "SALE" label for this site: http://www.ubertheme.com/docs/add-product-labels/. The label does show up on the product icon but for some reason the CSS isn't showing.

Current code for the appdesignfrontenddefault{theme}templatecatalogproductlist.phtml

<?php



?>

<?php



?>

<?php

    $_productCollection=$this->getLoadedProductCollection();

    $_helper = $this->helper('catalog/output');

?>

<?php if(!$_productCollection->count()): ?>







<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>

<?php else: ?>

<?php $i=1; ?>



<!--label-->

<?php $i=0; foreach ($_productCollection as $_product): ?>



<?php



$_product = Mage::getModel('catalog/product')->load($_product->getId());



$attribute = $_product->getResource()->getAttribute('label');



 if(is_object($attribute)) {



  $attdefaultvalue = $attribute->getDefaultValue();



  $attributeValue = Mage::getModel('catalog/product')->load($_product->getId())->getlabel();



  $attributeValueName = Mage::getModel('catalog/product')->load($_product->getId())->getAttributeText('label');



   if(strlen($attributeValue) &&  ($attdefaultvalue !== $attributeValue)) { 



    $labeltype = $attributeValueName;        



    } 



    else {



    $labeltype = "";



   } 



 } 



?>



<?php if ($labeltype): ?>



 <span class="<?php echo $labeltype; ?>-label"><?php echo $labeltype; ?></span>  



<?php endif; ?>



<!--end label-->



<div class="product_top_box_container">

  <div class="product_top_box_image"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" width="162" height="162" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a> </div>

  <div class="product_top_box_name" style=" height:80px;"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></div>

  <div class="sep2" style="float:left;"></div>

  <div class="product_box_read_more"><a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->getSkinUrl('images/product_read_more.png', array('_secure' => true)) ?>" alt="" /></a></div>

  <div class="flaot_clear"></div>

</div>

<? if( $i%5 == 0) 



                   { ?>

<?php } 

                  else {

                    ?>

<div class="product_seperater"></div>

<?php   

                  }





               ?>

<?php $i++ ; endforeach ;  ?>

<div class="flaot_clear"></div>

</div>

</div>

</div>

<?php endif; ?>

And my CSS: skinfrontenddefault{theme}css.style
has this code in it

/*Product Label*/

.products-grid .NEW-label {

    background: #15ae75;

    padding: 2px 5px;

    position: absolute;

    right: -5px;

    top: -5px;

    color: #fff;

    text-transform: uppercase;

    font-size: 92%;

    border-radius: 3px;

}

.products-grid .DISCONTINUED-label {

    background: #ef4135;

    padding: 2px 5px;

    position: fixed;

    position: absolute;

    right: -5px;

    top: -5px;

    color: #fff;

    text-transform: uppercase;

    font-size: 92%;

    border-radius: 3px;

}

don't use the span because you can not use css position on span and apply width css element on that. so use div element

change

<span class="<?php echo $labeltype; ?>-label"><?php echo $labeltype; ?></span>

to

<div class="<?php echo $labeltype; ?>-label"><?php echo $labeltype; ?></div>