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:
.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; } if need support ancient ie can use instead:
#imgcolor_7934_white, #imgcolor_7934_black{ height:35px; width:35px; } #imgcolor_7934_white.showborder, #imgcolor_7934_black.showborder{ height:33px; width:33px; } 
Comments
Post a Comment