title: Responsive Chess Board Issue
body: <p>As can be seen in the fiddle below, the chessboard responds as it should which is no more then 512px wide, while shrinking to fit whatever device. The pieces also respond with the board as they should. The problem I am having is that when I add a piece to the board / inside a square div, its like the img is creating a bunch of extra space below. Looks like its twice the size of the img... I know that the img's are causing the issue because I removed all the img's from the top of the board and the squares are completely square as they should be. Yes, the img's I am using are 64px x 64px. Any ideas of whats happening here? Any help would be great. Thanks!</p>
  
  <p><a href="http://jsfiddle.net/4vxLP" rel="nofollow">http://jsfiddle.net/4vxLP</a></p>
  
  <pre><code>&lt;div id="A2" class="whiteSquare square fl"&gt;
      &lt;img src="img/64PieceImg/white_pawn.png" class="piece"/&gt;
  &lt;/div&gt;
  
  
  .fl{
  
      float:left;
  }
  
  .board{
  
      max-width:512px;
      margin: 0 auto;   
  }
  
  .whiteSquare{
  
      max-height: 64px;
      max-width: 64px;
      width:12.5%;
      padding-bottom:12.5%;
      background-color:#F7F7F7;
  }
  
  .blackSquare{
  
      max-height: 64px;
      max-width: 64px;
      width:12.5%;
      padding-bottom: 12.5%;
      background-color:#29BEE8;
  }
  
  .piece{
  
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>