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

    CSS Howto..

    How to position two blocks side by side with CSS

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    How do i vertically align my form in bootstrap?

    How should I crop the image at client side using jcrop and upload it?

    How to float a
    echoed in the footer over a
    located elsewhere (PHP/jQuery/HTML/CSS)

    How to make a HTML/CSS/JS iOS style slide transition? [closed]

    How to clip the top bar with screen

    Css how to replace block after click button

    Responsive CSS: Replicating how Facebook's chat panel disappears below a certain browser window width

    How to set p margin for a section

    How to make semi-transparent background [duplicate]

    How can I use dropdowns in a masonry layout?

    How to assign CSS background image properties mixing classes and ids

    How to center dropdown menu under parent tab?

    How do I stop the text from moving when hovered? (background-image is involved)

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    How to prevent opening multiple popup windows?

    How to have no border around a DIV

    How to spin an image horizontally with CSS

    How to add multiple font files for the same font?

    How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

    How to use different CSS in the same page

    how to disable drupal7 system css files?

    How to remove rounded from to select query in jquery?

    How can I get this CSS to display properly in IE8?

    How to center the center circle?

    How to center in CSS only after specific HTML element?

    How to make children auto fit parent's width only with CSS?