css how to fix layout in table - css

Question

I am trying to get a few images in a table looking alright but there is an empty input on the 3rd row and 1st column. Also the input image types look slightly bigger?
Edit: I forgot to mention this has also has to work for IE7 and up.
fiddle:
http://jsfiddle.net/486EX/
style
input {
border: 1px solid black;
}
.emptyicon {
width: 37px;
height: 37px;
float: left;
font-size: 8px;
border: 1px solid grey;
}
.sizewidth {
width: 19px;
height: 10px;
padding: 5px 3px 8px 3px;
margin: 2px;
}
.showborder {
border: 2px solid red;
}
#product {
border: 1px solid #c1c1c1;
}
.sizebtn {
margin: 2px;
height: 31px;
width: 37px;
}
.icons {
width: 213px;
float: left;
padding: 2px;
}
.icons div {
padding: 2px;
float: left;
}
.icons input {
padding: 0;
cursor: pointer;
text-align: center;
background: #FFF;
color: #000;
display: block;
height: 37px;
width: 37px;
line-height: 37px;
font-size: .6em;
overflow: hidden;
}
.sizes {
float: left;
width: 213px;
}
.sizes div {
padding: 2px 0 0 2px;
float: left;
}
.sizes input {
padding: 0;
cursor: pointer;
text-align: center;
background: #FFF;
color: #000;
display: block;
height: 30px;
width: 30px;
font-size: 1.2em;
}
html:
<div id="product">
<table>
<tbody>
<tr>
<td>
<div id="icons_7934" class="icons">
<div>
<input id="imgcolor_7934_Amethyst" text="Amethyst" class="emptyicon showborder" type="button"
value="Amethyst">
</div>
<div>
<input id="imgcolor_7934_Aquamarine" text="Aquamarine" class="emptyicon " type="button"
value="Aquamarine">
</div>
<div>
<input id="imgcolor_7934_Baby_Pink" text="Baby Pink" class="emptyicon " type="button"
value="Baby Pink">
</div>
<div>
<input id="imgcolor_7934_Biscuit" text="Biscuit" class="emptyicon " type="button"
value="Biscuit">
</div>
<div>
<input id="imgcolor_7934_Bisque" text="Bisque" class="emptyicon " type="button" value="Bisque">
</div>
<div>
<input id="imgcolor_7934_Black" src="Images/black.jpg" class="emptyicon " type="image"
value="Black">
</div>
<div>
<input id="imgcolor_7934_Burnt_Orange" text="BurntOrange" class="emptyicon " type="button"
value="BurntOrange">
</div>
<div>
<input id="imgcolor_7934_Candy" text="Candy" class="emptyicon " type="button" value="Candy">
</div>
<div>
<input id="imgcolor_7934_Cherry" text="Cherry" class="emptyicon " type="button" value="Cherry">
</div>
<div>
<input id="imgcolor_7934_Deep_Lilac" text="DeepLilac" class="emptyicon " type="button"
value="DeepLilac">
</div>
<div>
<input id="imgcolor_7934_Dusty_Rose" text="DustyRose" class="emptyicon " type="button"
value="DustyRose">
</div>
<div>
<input id="imgcolor_7934_Iceblue" text="Iceblue" class="emptyicon " type="button"
value="Iceblue">
</div>
<div>
<input id="imgcolor_7934_Lime" text="Lime" class="emptyicon " type="button" value="Lime">
</div>
<div>
<input id="imgcolor_7934_Magenta" text="Magenta" class="emptyicon " type="button"
value="Magenta">
</div>
<div>
<input id="imgcolor_7934_Navy" text="Navy" class="emptyicon " type="button" value="Navy">
</div>
<div>
<input id="imgcolor_7934_Peacock" text="Peacock" class="emptyicon " type="button"
value="Peacock">
</div>
<div>
<input id="imgcolor_7934_Royal_Blue" text="RoyalBlue" class="emptyicon " type="button"
value="RoyalBlue">
</div>
<div>
<input id="imgcolor_7934_Teal" text="Teal" class="emptyicon " type="button" value="Teal">
</div>
<div>
<input id="imgcolor_7934_White" src="Images\White.jpg" class="emptyicon " type="image"
value="White">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script>
$("[id^='imgcolor_7934']").live("click", function () {
$("[id^='imgcolor_7934']").removeClass('showborder');
$(this).addClass("showborder");
});
</script>

Answer 1

I think your borders are throwing off the alignment. To correct, try using box-sizing:border-box;
Like so:
Working Example
.emptyicon {
width: 37px;
height: 37px;
float: left;
font-size: 8px;
border: 1px solid grey;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
box-sizing documentation -MDN
If you need to support ancient IE you can use this instead:
Working Example 2
#imgcolor_7934_White, #imgcolor_7934_Black{
height:35px;
width:35px;
}
#imgcolor_7934_White.showborder, #imgcolor_7934_Black.showborder{
height:33px;
width:33px;
}