Bit of a css newbie so here goes: I am trying to get the right css but when I click on the different divs and adds a border it moves around other divs+inputs. For an example look at:
html
<div id="icons_761" class="icons"> <div> <input id="imgcolor_761_Black_Solid" src="/Images/icon/Black_Solid.jpg" class="emptyicon swatch" type="image" value="Black_Solid"></div> <div> <input id="imgcolor_761_Coral_Solid" src="/Images/icon/Coral_Solid.jpg" class="emptyicon swatch" type="image" value="Coral_Solid"></div> <div> <input id="imgcolor_761_Emerald_Solid" text="Emerald Solid" class="emptyicon swatch" type="button" value="Emerald Solid"></div> <div> <input id="imgcolor_761_Fuchsia_Print" text="Fuchsia Print" class="emptyicon swatch" type="button" value="Fuchsia Print"></div> <div> <input id="imgcolor_761_Lavender_Solid" src="/Images/icon/Lavender_Solid.jpg" class="emptyicon swatch" type="image" value="Lavender_Solid"></div> <div> <input id="imgcolor_761_Marine_Print" src="/Images/icon/Marine_Print.jpg" class="emptyicon swatch" type="image" value="Marine_Print"></div> <div> <input id="imgcolor_761_Marine_Solid" src="/Images/icon/Marine_Solid.jpg" class="emptyicon swatch" type="image" value="Marine_Solid"></div> <div> <input id="imgcolor_761_Natural_Print" text="Natural Print" class="emptyicon swatch showborder" type="button" value="Natural Print"></div> <div> <input id="imgcolor_761_Natural_Solid" text="Natural Solid" class="emptyicon swatch" type="button" value="Natural Solid"></div> <div> <input id="imgcolor_761_Navy_Solid" src="/Images/icon/Navy_Solid.jpg" class="emptyicon swatch" type="image" value="Navy_Solid"></div> <div> <input id="imgcolor_761_Rose_Solid" src="/Images/icon/Rose_Solid.jpg" class="emptyicon swatch" type="image" value="Rose_Solid"></div> <div> <input id="imgcolor_761_Watermelon_Solid" text="Watermelon Solid" class="emptyicon swatch" type="button" value="Watermelon Solid"></div> <div> <input id="imgcolor_761_White_Solid" src="/Images/icon/White_Solid.jpg" class="emptyicon swatch" type="image" value="White_Solid"></div> </div> <style> .emptyicon { width: 37px; height: 37px; float: left; font-size: 8px; } .sizewidth { width: 19px; height: 10px; padding: 5px 3px 8px 3px; margin: 2px; } .showborder { border: 1px solid black; } #product { border: 1px solid #c1c1c1; } .sizebtn { margin: 2px; height: 31px; width: 37px; } .icons { width: 213px; float: left; padding: 5px; margin: 5px; } .icons div { padding: 0px; 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; float:left; } .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; } .configs { float: left; width: 279px; } .configs div { padding: 2px 0 0 2px; float: left; } .configs input { padding: 0; cursor: pointer; text-align: center; background: #FFF; color: #000; display: block; height: 30px; width: 30px; font-size: 1.2em; } .swatch { } </style> //Clicked on color: will change sizes backgrounds ( in stock or not) $("[id^='imgcolor_761']").live("click", function () { //set style to no border for all $("[id^='imgcolor_761']").removeClass('showborder'); $(this).addClass("showborder"); return false; }); If you click on the 1st (empty) image it moves around divs on the 2nd row. However when you click on the input(type button with text) it does not move around?? When I change the showborder border 10 lower than 1px thickness it does not have this problem but then I would not be able to make a selection clear.
