Making a sprite with a submit button in a table

Question

I want to create two sprite buttons to validate (or not) some requests.

So here is my agreed button :

<div class="validation_button loan_button" id="agreed_loan_button_<%=loan.id%>">
  <% if loan.agreed == true %>
    <div class="icon-agree enabled"></div>
  <% elsif loan.agreed == false %>
    <div class="icon-agree disabled"></div>
  <% else %>
    <%= form_for(loan, remote: true) do |f| %>
      <div><%= f.hidden_field :agreed, value: true %></div>
      <%= image_submit_tag("24px.png", alt: t('button.loan.agree'), title: t('button.loan.agree'), class: "icon-agree active") %>
    <% end %>
  <% end %>
</div>

Where 24px.png is a 24px side size square transparent image.

And here is where my agree button takes place :

<table class="table table-hover">
  <tbody>
    <tr>
      <th><%= t('product.borrower') %></th>
      <th><%= t('loan.created.since_the') %></th>
      <th><%= t('loan.validation') %></th>
    </tr>
    <% @pending_loans.each do |loan| %>
      <tr id="loan_<%= loan.id %>">
        <td>
          <%= link_to loan.seeker.name, loan.seeker %>
        </td>
        <td>
         <%= I18n.l loan.created_at, format: :only_date %>
        </td>
        <td class="validation">
          <%= render 'loans/buttons/agreed', loan: loan %>
          <%= render 'loans/buttons/refused', loan: loan %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

Then here is my css :

.icon-agree {
  background: url("agree.png");
  display: block;
  width: 24px;

  height: 24px;
  &.enabled {
    background-position: 0 -24px;
  }
  &.disabled {
    background-position: 0 0;
  }
  &.active {
    text-indent: -9999px;
    &:hover {
      background-position: 0 -24px;
    }
    &:active {
      background-position: 0 -48px;
    }
  }
}

When I using my app in a development environment, it renders exactly what I want. But if I push it to production, the square transparent image becomes blank and hide the sprite background.

Do you have an idea to make this works, and make it more... good practice ?

Answer 1

It looks like you're using SASS/SCSS. Have you verified that your SCSS files are properly compiled in production? Are you using anything (e.g., Compass) to assemble your sprites?