HTML img refuses to go below certain width

Question

I have a razor view in which I'm trying to put an image, a simple green plus sign.

The problem is that for some reason, the image refuses to resize below a certain width.

I have tried:

<img src="~/Images/add.png" style="width:10px;" />

<img width="10" src="~/Images/add.png" />

<img class="imagesize" src="~/Images/add.png" style="width:10px" /> with the css class:

.imagesize {
width:10px;
}

I've tried wrapping it in div and tags

<div class="imagesize" style="width:10px"><a href="" class="imagesize" style="width:10px"><img width="10" class="imagesize" src="~/Images/add.png" style="width:10px" /></a></div>

Absolutely nothing will shrink this image below around 40px. I've tried swapping in different images as well.

I've also tried

<input type="button" style="background-image:url('../../Images/add.png'); width:10px; border:none" />

But it just shows a blank rectangle.

Height works fine, it will go to any height I specify, but width will not go down past around 40px. It's infuriating.

Here's the entire table:

<table>
  <tr>
    <td>
      <table class="table table-generic" style="width:700px", id="valuetable">
        <thead>
          <tr style="font-weight:bold">
            <td>MClass</td>
            <td>L<br />Percent</td>
            <td>E<br />GA Year</td>
            <td>Ey<br />GA Year</td>
            <td colspan="3" style="text-align:center">Approved</td>
          </tr>
        </thead>
        <tbody>
          @for (int i = 0; i < Model.md10001List.md10001list.Count; i++)
          {
            <tr>
              <td>@Html.DropDownListFor(model => Model.md1.name, m, Model.m[i].code, new { id = "mcl" + @i, name = "mcl" + @i })</td>
              <td>@Html.TextBoxFor(model => model.md1.percent, "{0:0.00}", new { style = "width:50px", id = "percent" + @i, name = "percent" + @i })</td>
              <td>@Html.TextBoxFor(model => model.md1.year, new { style = "width:40px", id = "gas_year" + @i, name = "gas_year" + @i })</td>
              <td>@Html.TextBoxFor(model => model.md1.exipry, new { style = "width:40px", id = "gas_expiry" + @i, name = "gas_expiry" + @i })</td>
              <td>@Html.CheckBoxFor(model => model.md1.approved, new { value = Model.md10001List.md10001list[i].approved_flag, disabled = "disabled", id = "aprooved" + @i, name = "aprooved" + @i })</td>
              <td>@Html.TextBoxFor(model => model.md1.approved_by, new { style = "width:70px", disabled = "disabled", id = "approved_by" + @i, name = "approved_by" + @i })</td>
              <td>@Html.TextBoxFor(model => model.md1.approved_date, "{0:MM/dd/yyyy}", new { style = "width:80px", disabled = "disabled", id = "approved_date" + @i, name = "approved_date" + @i })</td>
            </tr>
          }
        </tbody>
      </table>
    </td>
    <td class="bottom" style="padding-bottom:25px">
      <a href="javascript:addRow()" class="imagesize" style="width:10px;height:40px;"><img width="10" alt="image" class="imagesize" src="~/Images/add.png" style="width:10px;height:40px;" /></a>
    </td>
  </tr>
</table>

Answer 1

The min-width might be somehow set to 40px.

Try

{
min-width: 10px;
}