Rich snippets not showing because of hidden Schema.org markup

Question

I have just contacted google asking why the rich snipets are not showing on their results and they answered the following

URL: http://www.theprinterdepo.com/hp-color-laser-4700dn-printer-q7493a-r
Markup Type: Product, Reviews

    Hidden content: <span itemprop="reviewCount">6</span>

I checked in IE Developer tools and indeed its hidden, but its not hidden in my html, any idea what am I doing wrong?

<?php if ($this->getReviewsCount()): ?>
    <div class="ratings">
        <?php if ($this->getRatingSummary()):?>
          <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
            <div class="rating-box">

                <div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%"><meta itemprop="ratingValue" content="<?php echo $this->getRatingSummary()/10 ?>"/></div>
                <span itemprop="reviewCount"><?php echo $this->getReviewsCount() ?></span>
            </div>
          </span>
        <?php endif;?>
        <p class="rating-links">
            <a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d Review(s)', $this->getReviewsCount()) ?></a>
            <!--<span class="separator">|</span>-->
            <!--<a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a>-->
        </p>
    </div>
<?php elseif ($this->getDisplayIfEmpty()): ?>
    <p class="no-rating"><a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Be the first to review this product') ?></a></p>
<?php endif; ?>

Answer 1

While you read this, you will very funny on yourself.

Your issue is with your css. Goto /skin/frontend/default/MAG060062/css/styles.css file on line number 529. Problem is with your .rating-box class.

.rating-box {
    background: url("../images/bkg_rating.gif") repeat-x scroll 0 0 transparent;
    font-size: 0;
    height: 10px;
    line-height: 0;
    text-indent: -999em;
    width: 50px;
}

Replace it as below

.rating-box {
    background: url("../images/bkg_rating.gif") repeat-x scroll 0 0 transparent;
    height: 10px;
    width: 50px;
}

Changes Remove

• font-size: 0;
• line-height: 0;
• text-indent: -999em;

Firebug screenshot

IE developer tool

OPEN your eyes always. lol :)