css how to fix layout in table

Tags: css

Problem :

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>

---

Solution :

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;
}