css how to fix layout in table -


i trying few images in table looking alright there empty input on 3rd row , 1st column. input image types bigger? edit: forgot mention has has work ie7 , 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> 

i think borders throwing off alignment. 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 need support ancient ie can use 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; } 

Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

c# - must be a non-abstract type with a public parameterless constructor in redis -

ajax - PHP/JSON Login script (Twitter style) not setting sessions -