I'm trying to get an image to appear next to a select when an option is chosen. Unfortunately when the image is added in jolts the wholde table. I've tried altering paddings and heights and widths but I'm basically stabbing around in the dark. I'd appreciate it if someone could help me out. Here's the fiddle:http://jsfiddle.net/vwWb9/7/Here is the code. I've put it all into one file so you can easily copy and paste it into your TE to have a look.\[code\]<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @CHARSET "ISO-8859-1";html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent}body { line-height: 1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block}nav ul { list-style: none}blockquote,q { quotes: none}blockquote:before,blockquote:after,q:before,q:after { content: none}a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent}ins { background-color: #ff9; color: #000; text-decoration: none}mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold}del { text-decoration: line-through}abbr[title],dfn[title] { border-bottom: 1px dotted; cursor: help}table { /* border-collapse:collapse;*/ border-spacing: 0}hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0}input,select { vertical-align: middle}/**********CUSTOMISED***********/ body { font-size: 62.5%;}h1 { font-size: 2em;}h2 { font-size: 1.5em;}h3 { font-size: 1.2em;}h4 { font-size: 1em;}h5 { font-size: 0.8em;}h6 { font-size: 0.7em}/**********END CUSTOMISED***********/#app_cont { border: 1px solid grey; height: auto; width: 500px; margin: 200px auto 200px auto; background: #efefef; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-family: Arial; font-size: 1.6em; padding: 10px}#ab_cont { float: left; height: auto; width: 100%; margin: 10px 0 0px 0;}#btn_cont { border: 1px solid grey; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #dcdcdc; clear: both; padding: 10px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.app_btns { margin: 0px 0px 0px 0px; min-width: 90px; text-align: center; font-size: 16px; font-family: Arial; font-weight: normal; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #ababab; padding: 9px 18px; text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) ); background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#ededed', endColorstr = '#dfdfdf' ); background-color: #ededed; color: #777777; display: inline-block; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.app_btns:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) ); background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%); filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#dfdfdf', endColorstr = '#ededed' ); background-color: #dfdfdf; cursor: pointer;}.app_btns:active { position: relative; top: 1px;}.disabled { margin: 0; min-width: 90px; text-align: center; font-size: 16px; font-family: Arial; font-weight: normal; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid grey; padding: 9px 18px; text-decoration: none; background: rgb(156, 156, 156); color: #efefef !important; display: inline-block; text-decoration: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.disabled:hover { cursor: default;}#opts_tbl { margin-bottom: 5px; table-layout: fixed; width:500px;}#opts_tbl td { padding: 15px 0px 15px 0px; overflow: hidden;}.opt_slcts { width: 165px; padding: 4px 3px 4px 0px; text-indent: 1px; line-height: 23px;}.val_ers { font-size: 0.8em; color: #1133aa;}.val_img { float:left; height: 24px; width: 24px; padding: 0px 0px 0px 15px;} </style></head><body> <div id="app_cont"><div id="opts_pnl"> <table id="opts_tbl"> <tr> <td> <label for="num_slct" class="opt_labels">Options 1:</label> </td> <td> <select name="num_slct" id="num_slct" class="opt_slcts"> <option value="http://stackoverflow.com/questions/15724774/-" >-</option> <option value="http://stackoverflow.com/questions/15724774/5" >5</option> <option value="http://stackoverflow.com/questions/15724774/10" >10</option> <option value="http://stackoverflow.com/questions/15724774/15" >15</option> <option value="http://stackoverflow.com/questions/15724774/20" >20</option> <option value="http://stackoverflow.com/questions/15724774/25" >25</option> <!-- <option value="http://stackoverflow.com/questions/15724774/3" >3</option> --> </select> </td> <td id="num_slct_er" class="val_ers">Please make a selection.</td> </tr> <tr> <td id="tl_c"> <label for="top_slct" class="opt_labels">Options 2:</label> </td> <td id="tr_c"> <select name="top_slct" id="top_slct" class="opt_slcts"> <option value="http://stackoverflow.com/questions/15724774/-" id="opt-1" >-</option> <option value="http://stackoverflow.com/questions/15724774/rnd_sel" id="opt-2" >Option</option> <option value="http://stackoverflow.com/questions/15724774/blank" id="blank" disabled="disabled" ></option> <optgroup label="Misc."> <option value="http://stackoverflow.com/questions/15724774/cmn_mis" id="opt-3">Option</option> <option value="http://stackoverflow.com/questions/15724774/ib4e" id="opt-1">Option</option> <option value="http://stackoverflow.com/questions/15724774/fin_e" id="opt-1">Option</option> <option value="http://stackoverflow.com/questions/15724774/dbl_cons" id="opt-1">Option</option> <option value="http://stackoverflow.com/questions/15724774/slt_lts" id="opt-6">Option</option> <option value="http://stackoverflow.com/questions/15724774/plrs" id="opt-1">Option</option> <option value="http://stackoverflow.com/questions/15724774/blank" id="blank" disabled="disabled"></option> </optgroup> </select> </td> <td id="top_slct_er" class="val_ers">Please make a selection.</td> </tr> <tr> <td id="bl_c"> <label for="diff_slct" class="opt_labels">Options 3:</label> </td> <td id="br_c"> <select name="diff_slct" id="diff_slct" class="opt_slcts"> <option value="http://stackoverflow.com/questions/15724774/-" id="item-1">-</option> <option value="http://stackoverflow.com/questions/15724774/1" id="item-2">Option</option> <option value="http://stackoverflow.com/questions/15724774/2" id="item-3">Option</option> <option value="http://stackoverflow.com/questions/15724774/3" id="item-4">Option</option> </select> </td> <td id="diff_slct_er" class="val_ers">Please make a selection.</td> </tr> </table> <div id="btn_cont" unselectable="on"> <a href="http://stackoverflow.com/questions/15724774/#" id="strt_btn" class="disabled" unselectable="on">Start</a> <a href="http://stackoverflow.com/questions/15724774/#" id="help_btn" class="app_btns hlp_btns" unselectable="on">Help</a> </div> </div><!--#opts_pnl--> </div><!--#app_cont --> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script type="text/javascript">$('.opt_slcts').on('change', function(){ var errors = 0; $('.opt_slcts').each(function(){ var id = this.id + "_er", tick = "<img src='http://stackoverflow.com/questions/15724774/images/tick.png' alt='tick' class='val_img'>"; if($(this).val() == "-"){ errors++; $('#' + id).empty(); $('#' + id).append('Please make a selection.'); } else { $('#' + id).empty(); $('#' + id).append(tick); } }); if(errors > 0){ $('#strt_btn').attr('class', 'disabled'); } else { $('#strt_btn').attr('class', 'app_btns'); } }); </script></body></html>\[/code\]
How do I stop HTML table from altering cell height when I dynamically add an image?
- Thread starter codytokyo
- Start date