Google stating price is missing from product rich snippet, but it is present

Question

I'm trying to figure out how to start adding rich snippets to products but I keep getting an error from Google stating:

In order to generate a preview with rich snippets, either price or review or availability needs to be present.

But I have price in there in a meta tag. I don't get what's wrong here:

<li itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Product" class="span3">
    <div class="thumbnail"><meta itemprop="category" content="flowers">
        <a itemprop="url" href="/en/2-in-too-deep.html" title="Depth">
            <img itemprop="image" alt="A dozen red roses is as romantic as it is classic." src="/2-441-catalog/.jpg">
            <meta itemprop="description" content="[A dozen red roses is as romantic as it is classic.]">
        </a>
        <div class="caption_mobile visible-phone"><p itemprop="name">Depth</p></div>
    </div>
    <div class="caption hidden-phone">
        <h4 itemprop="alternateName">Depth</h4>
        <meta itemprop="price" content="&#36;40">
        <meta itemprop="currency" content="USD" />
    </div>
</li>

Answer 1

For one, Offer should be nested under Product, and OfferDetails should have this value for itemtype:

itemtype="http://data-vocabulary.org/Offer"

Second, price should be specified with a floating point number.

See the documentation from Google here and follow the Singe product page code under "Examples" there.

A related question and answer are here.