link_to + css not working properly

Question

what's up? i'm learning ruby on rails, html and css all at once. i'm trying to use a website template in my rails application and i have a problem with the link_to helper. i think it might have something to do with the css style sheet.

this is my html chunk of code:

<h3>Featured Products</h3>
                <ul>
                    <% @books.each do |book| %>
                        <li>
                            <div class="product">
                                <%= link_to book_path(book.id) do %>
                                <a class="info">
                                    <span class="holder">
                                        <%= image_tag(book.image, alt: "") %>
                                        <span class="book-name"><%= book.name %></span>
                                        <span class="author">by <%= book.author_id %></span>
                                        <span class="description"><%= book.description.first(60)+"..." %></span>
                                    </span> 
                                </a>
                                <% end %>
                                <a href="#" class="buy-btn">BUY NOW <span class="price"><span class="low">$</span><%= book.price %><span class="high">00</span></span></a>
                            </div>
                        </li>
                    <% end %>
                </ul>

and this is my css chunk of code:

.products ul { list-style: none; position: relative; width: 660px; margin-left: -7px; width: 660px; }
.products ul li { float: left; display: inline; width: 150px; height: 343px; margin: 0 15px 14px 0; }
.products ul li a.info { display: block; padding: 7px; width: 136px; height: 329px; }
.products ul li a.info:hover { background: asset_url("product-hover.png") no-repeat 0 0; text-decoration: none; }
.products ul li a.info .holder { padding: 14px 9px; border: solid 1px #dcdcdc; display: block; height: 290px;}
.products .product { width: 134px; position: relative; }
.products img { padding: 0 7px 4px; width: 102px; height: 160px; }
.product .buy-btn { position: absolute; bottom: 8px; left: 7px; background: asset_url("buy-btn.png") repeat-x 0 0; width: 126px; height: 31px; color: #fff; font-size: 12px; line-height: 31px; text-transform: uppercase; font-weight: bold; z-index: 10; padding-left: 10px; white-space: nowrap;}
.product .buy-btn:hover { text-decoration: none; }
.product .buy-btn .price { padding: 0 7px; background: asset_url("price.png") repeat-x 0 0; font-size: 22px; line-height: 29px; position: absolute; top: 0; right: 0; height: 31px; }
.product .buy-btn .price .low { font-size: 14px; vertical-align: baseline; }
.product .buy-btn .price .high { font-size: 11px; line-height: 14px; vertical-align: super; }

any idea?

Answer 1

Your link is not working because as i said in my comment nested a elements are forbidden in HTML syntax and they simply won't work. HTML specifications do not say why; they just emphasize the rule.

Update:

As i said in my comment there's a hack by which you can do it. To make it work you'll have to change your outer anchor to a div and use js to call your url something like this:

<div id="some-id" data-href="path">
  <a href="#"></a>
</div>

Use js to call your outer div

$(document).on("click","#some-id",function(){
  var link = $(this).data("href");
  window.location.href = link;
})