Table and td width issue - html
This works fine in Firefox and Chrome, but not in IE:
CSS
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.redtab_head th {
/* Mozilla: */
background: -moz-linear-gradient(top, #C80000, #9F0101);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#C80000), to(#9F0101));
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
}
#pls-play { cursor:pointer; }
/*.tb1hide {
table-layout:fixed!important;
}
*/
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
HTML
<table width="94%" cellpadding="2" cellspacing="1" class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" align="right" >
<th width="44" align="center"><span style="text-transform:lowercase;">q te</span>.R </th>
<th width="212" align="left" class="tab_space">tester</th>
<th width="54" align="center">tes</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">te</th>
<th width="34" align="center">tes</th>
<th width="44" align="center">tes</span>.L</th>
<th width="34" align="center"> tes</th>
<th width="34" align="center" >tes</th>
<th width="34" align="center">tes</th>
<th width="34" align="center">tes</th>
</tr>
</thead>
<tbody>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
<tr>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsr_select" class="psvsr_sel_class" id="psvsr_select111904" style="width:40px;" >
<option value=""> </option>
<option>codeup</option>
<option>codeup</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="left" class="box tb1hide" style="max-width: 124px;">dfjbdsjbfhjb bdshfbdshbfhb jasbdfhbasdhjb
<input type="hidden" name="psb_playerId" value="/111904/" /></td>
<td width="54" align="left" valign="top" >OF</td>
<td align="center" valign="top" ><span style="display:none;" id="r_hr1_hid">3</span>
<input name="r_hr1" type="text" class="txt_fid" id="r_hr1" onBlur="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_hr1',0,3,'tbl1')" maxlength="1" value="3" onfocus="return selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_bnt1_hid">3</span>
<input name="r_bnt1" type="text" class="txt_fid" id="r_bnt1" onBlur="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_bnt1',0,4,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_ph1_hid">3</span>
<input name="r_ph1" type="text" class="txt_fid" id="r_ph1" onBlur="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_ph1',0,5,'tbl1')" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="r_run1_hid">3</span>
<input name="r_run1" type="text" class="txt_fid" id="r_run1" onBlur="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" onKeyUp="return chk_txtval(this.value,'r_run11',0,6,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td width="44" align="left" ><span style="display:none;">11</span>
<select name="psvsl_select" class="psvsl_sel_class" id="psvsl_select111904" style="width:40px;" >
<option value=""></option>
<option value="lineup" >Lineup</option>
<option value="bench" >Bench</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="senddown">Send Down</option>
</select></td>
<td align="center" valign="top" ><span style="display:none;" id="l_hr1_hid">3</span>
<input name="l_hr1" type="text" class="txt_fid" id="l_hr1" onBlur="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_hr1',0,8,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_bnt1_hid">3</span>
<input name="l_bnt1" type="text" class="txt_fid" id="l_bnt1" onBlur="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_bnt1',0,9,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_ph1_hid">3</span>
<input name="l_ph1" type="text" class="txt_fid" id="l_ph1" onBlur="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_ph1',0,10,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
<td align="center" valign="top" ><span style="display:none;" id="l_run1_hid">3</span>
<input name="l_run1" type="text" class="txt_fid" id="l_run1" onBlur="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" onKeyUp="return chk_txtval(this.value,'l_run1',0,11,'tbl1')" maxlength="1" value="3" onfocus="selectText(this);" ></td>
</tr>
</tbody>
</table>
I was able to get it working with the following:
table{
table-layout: fixed;
}
How about stripping this down a bit to see if the issue is with the property in IE or something else. Does the following work?
HTML:
<table class="tablehead" id="pls-batting">
<thead>
<tr class="tab_head" id="pls-play">
<th># vs.R</th><th class="tab_space">PLAYER</th>
</tr>
</thead>
<tbody>
<tr class="oddrow player-10-5544" id="111904">
<td>11</td>
<td class="box tb1hide" style="max-width: 124px;">Cameron, Mike (FLA)fdgdsgfdtertwet dgfs aesfaesrf</td>
</tr>
</tbody>
</table>
CSS:
.tablehead th{
border-bottom: 1px solid #C2C2C2;
color: #FFFFFF; background-color:#000058;
font-size: 13px; font-family:calibri!important;
font-weight: 700;
}
.tab_head th.tab_space {
padding-left: 5px;
}
.box {
text-overflow:clip!important;
overflow:hidden!important;
white-space:nowrap!important; table-layout:fixed!important;
-o-text-overflow: clip!important;
}
*html .box {
width: expression( document.body.clientWidth > 124 ? "124px" : "auto" ); /* sets max-width for IE */
}
It's hard to determine in it's built-out state what's relevant and what isn't, with the inline styles, onmousehovers, etc. One of these could be at fault, but best to start with the stuff that is supposed to be working to make sure it is.
My guess is that the expression isn't working, but that's just a guess.
Related
width: 100% and white-space: nowrap results in input elements going over width of parent element
Here's my code: <table> <tr> <td colspan="2" style="white-space: nowrap">Field 1: <input type="text" name="member_name" style="width: 100%"/></td> <td colspan="2" style="white-space: nowrap">Field 2: <input type="text" name="member_name2" style="width: 100%"/></td> </tr> <tr> <td>Phone: <input type="text" name="phone" /></td> <td>State: <select name="state"> <option value="TX">Texas</option> </select></td> <td>Phone: <input type="text" name="phone2" /></td> <td>State: <select name="state2"> <option value="TX">Texas</option> </select></td> </tr> </table> The problem is that the <td> elements with white-space set to nowrap extend into the neighboring <td>'s, presumably because of the width: 100% bit in the child <input>. Any ideas as to how I can fix this?
You can place a div inside td. use flex to align the elements. No need of using white-space and width: 100% .form-control { display: flex; } .form-control input { flex-grow: 1; } <table> <tr> <td colspan="2"> <div class="form-control"> <label>Field 1: </label> <input type="text" name="member_name"/> </div> </td> <td colspan="2"> <div class="form-control"> <label>Field 2: </label> <input type="text" name="member_name"/> </div> </td> </tr> <tr> <td>Phone: <input type="text" name="phone" /></td> <td>State: <select name="state"> <option value="TX">Texas</option> </select></td> <td>Phone: <input type="text" name="phone2" /></td> <td>State: <select name="state2"> <option value="TX">Texas</option> </select></td> </tr> </table>
Chosen select width problems
I am using the chosen select plugin in a bootstrap site and in a table. My problem is, as u can see on the picture, the width will be bigger in each row. The bootstrap and the chosen css is the basis. The generated html in the page source: <table class="table table-hover table-bordered list"><thead style="font-weight:bold;"> <tr class="tr_bold"> <td style="text-align: center;">ID</td> <td class="left">Megnevezés</td> <td style="text-align: center;">Egység</td> <td>Bruttó ár</td> <td>Akciós ár</td> <td style="text-align: center;">Akciós</td> </tr> </thead><tbody> <tr id="sor52"> <input type="hidden" name="sav_id[]" class="sav_input" value="52" /> <td style="text-align: center;">52</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[52]" value="1000" class="form-control" /></td> <td><input type="text" name="b[52]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[52]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor117"> <input type="hidden" name="sav_id[]" class="sav_input" value="117" /> <td style="text-align: center;">117</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[117]" value="1000" class="form-control" /></td> <td><input type="text" name="b[117]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[117]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor50"> <input type="hidden" name="sav_id[]" class="sav_input" value="50" /> <td style="text-align: center;">50</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[50]" value="1000" class="form-control" /></td> <td><input type="text" name="b[50]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[50]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> </tbody></table> Edit: If i delete the form-control class from the select, it will be like this:
select { width: inherit !important; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover table-bordered list"><thead style="font-weight:bold;"> <tr class="tr_bold"> <td style="text-align: center;">ID</td> <td class="left">Megnevezés</td> <td style="text-align: center;">Egység</td> <td>Bruttó ár</td> <td>Akciós ár</td> <td style="text-align: center;">Akciós</td> </tr> </thead><tbody> <tr id="sor52"> <input type="hidden" name="sav_id[]" class="sav_input" value="52" /> <td style="text-align: center;">52</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[52]" value="1000" class="form-control" /></td> <td><input type="text" name="b[52]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[52]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor117"> <input type="hidden" name="sav_id[]" class="sav_input" value="117" /> <td style="text-align: center;">117</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[117]" value="1000" class="form-control" /></td> <td><input type="text" name="b[117]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[117]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor50"> <input type="hidden" name="sav_id[]" class="sav_input" value="50" /> <td style="text-align: center;">50</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[50]" value="1000" class="form-control" /></td> <td><input type="text" name="b[50]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[50]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> </tbody></table>
Best solution Remove style="text-align:center" from last td. Because, inside that td, any element can be center. Also add css to your stylesheet from below code snippet. .input-select{ width:100% !Important; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-hover table-bordered list"><thead style="font-weight:bold;"> <tr class="tr_bold"> <td style="text-align: center;">ID</td> <td class="left">Megnevezés</td> <td style="text-align: center;">Egység</td> <td>Bruttó ár</td> <td>Akciós ár</td> <td style="text-align: center;">Akciós</td> </tr> </thead><tbody> <tr id="sor52"> <input type="hidden" name="sav_id[]" class="sav_input" value="52" /> <td style="text-align: center;">52</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=52">Barabás Gerecse térkő őszilomb</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[52]" value="1000" class="form-control" /></td> <td><input type="text" name="b[52]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[52]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor117"> <input type="hidden" name="sav_id[]" class="sav_input" value="117" /> <td style="text-align: center;">117</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=117">Barabás Patent térkő 222</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[117]" value="1000" class="form-control" /></td> <td><input type="text" name="b[117]" value="500" class="form-control" /></td> <td style="text-align: center;"> <select name="termek_akcio[117]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> <tr id="sor50"> <input type="hidden" name="sav_id[]" class="sav_input" value="50" /> <td style="text-align: center;">50</td> <td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="https://projektar.hu/cms2/termek-szerkesztes.php?id=50">Barabás Somló Trió térkő holdfény</a></td> <td style="text-align: center;">m2</td> <td><input type="text" name="a[50]" value="1000" class="form-control" /></td> <td><input type="text" name="b[50]" value="500" class="form-control" /></td> <td > <select name="termek_akcio[50]" class="input input-select form-control"> <option selected="selected" value="1">Igen</option><option value="0">Nem</option> </select> </td> </tr> </tbody></table>
HTML Tables & Automated Email Response with Forms
I'm trying to fix a form and it doesn't seem to be cooperating. It was originally done in HTML tables and because of the old structure of the website I manage (it's an internal only), I'm having a difficult time trying to see where my problem lies. Issue: There's a form created for Key requests for desks and cabinets, etc. The automated e-mail response after the form fill is coming through with a message to reply to an email dress that is no longer valid. I've updated the HTML version of the form, along with the fields of the form processor and the e-mail is still coming up to say "To approve - reply to : lebarbe#example.org". It should say "To approve - reply to: rolandjordan#example.org". I've attached copies of the confirmation e-mail, the HTML form, and screenshots of the form processor. Can anyone help me understand what needs to change? Here's the E-Mailed response that generates to the Department Director: Received : 1/18/2017 10:48:48 AM Form : Key and Lock Request Form Submission ID : 27715 User IP : ______________________ NOTE : A key and lock request has been made for your department by the person listed below. To approve, you must reply to this email. Task : Keys Made Key Number : 1234 Quantity of Keys Needed : 7 Lock Number : 1234 Current Lock Combination : Location : Marketing Justification : Comments : Test - do not process Requestor Name : Kara Kentner TM Number : 1234 Title : Webmaster Department : Marketing Phone Extension : 7214 Cost Center : Access Control Request : Access Area Requested To : : FOR KEYS THAT OPEN DEPARTMENTS OR OFFICES : Key Issued To : Team Member Number : : DIRECTOR INFORMATION : Director : Kara Kentner Email : kjkentner#example.org To approve - reply to : lebarbe#example.org The last part is what needs changed. The email also comes from the email address lebarbe#example.org and it should come from rolandjorand#example.org. I've updated this section of the HTML form: <input type="hidden" name="To approve - reply to" value="rolandjordan#example.org"> <html> <head> <title>EJGH Team Talk</title> <meta http-equiv="Content-Type" content="text/html;"> <style type="text/css"> <!-- .heading {font:bold 1.4em Arial,Tahoma,sans-serif; color:#333;} .title {font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#ffffff;} .text {font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#2A6BA5;} .text:hover { font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#2A6BA5; text-decoration: none } .copytext {font:11px Verdana,Tahoma,sans-serif; font-weight:normal; color:#333;} --> </style> </head> <body > <table width="100%" border="0" cellpadding="0" cellspacing="16"> <form name="KeyRequest" method="POST" action="http://teamtalk.net/absolutefp/afp.asp?formid=22"> <tr> <td valign="top" class="copytext"><table width="100%" border="0"> <tr> <td width="100%" colspan="4" valign="top" class="copytext"><span class="text">Key and Lock Request Printable Form</span><br> <span class="text">Note</span>: To save form to your computer, Right click on icon and select <span class="text">Save Target As...</span><br> <br> <table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;"> <tr bgcolor="#666666"> <td width="56%" bgcolor="#666666" class="title">Name</td> <td width="21%" bgcolor="#666666" class="title"><div align="center">Adobe PDF Format</div></td> </tr> <tr> <td class="copytext" width="56%" style="border: 1px solid #e9e9e9;">Key and Lock Request Printable Form</td> <td class="copytext" width="21%" style="border: 1px solid #e9e9e9;"><div align="center"><img src="images/pdf-logo.gif" width="16" height="16" border="0"></div></td> </tr> </table> <br> <br> <span class="text">Key and Lock Request Online Form</span><br> <span class="text">Note: </span>Fields marked with an asterisk(*) are required.<br> <input type="hidden" name="NOTE" value="A key and lock request has been made for your department by the person listed below. To approve, you must send your reply to rolandjordan#example.org. "> </td> </tr> <tr> <td colspan="4" class="text"><table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;"> <tr> <td colspan="2" bgcolor="#666666" class="title">Task (<strong>Please select all</strong> that apply:) *</td> </tr> <tr> <td width="4%" class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Keys Made"></td> <td width="96%" class="text" style="border: 1px solid #e9e9e9;">Keys made</td> </tr> <tr> <td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Lock Changed"></td> <td class="text" style="border: 1px solid #e9e9e9;">Lock changed</td> </tr> <tr> <td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Push button lock combination changed"></td> <td class="text" style="border: 1px solid #e9e9e9;">Push button lock combination changed</td> </tr> <tr> <td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Padlock removed"></td> <td class="text" style="border: 1px solid #e9e9e9;">Padlock removed</td> </tr> <tr> <td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Padlock installed"></td> <td class="text" style="border: 1px solid #e9e9e9;">Padlock installed</td> </tr> </table> <br> <table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;"> <tr class="title"> <td width="14%" bgcolor="#666666" align="center" class="title">Key #</td> <td width="13%" bgcolor="#666666" align="center" class="title">Quantity of Keys Needed</td> <td width="13%" bgcolor="#666666" align="center" class="title">Lock #</td> <td width="18%" bgcolor="#666666" align="center" class="title">Current Lock Combination</td> </tr> <tr> <td valign="top" class="text" align="center" style="border: 1px solid #e9e9e9;"><input name="Key Number" type="text" class="copytext" id="Key Number" size="8" maxlength="10"></td> <td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center"> <select name="Quantity of Keys Needed" class="copytext" id="Quantity of Keys Needed"> <option value="" selected="selected"></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> <td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center"> <input name="Lock Number" type="text" class="copytext" id="Lock Number" size="8" maxlength="10"> </td> <td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center"> <input name="Current Lock Combination" type="text" class="copytext" id="Current Lock Combination" size="12" maxlength="15"> </td> </tr> </table></td> </tr> <tr> <td colspan="4" class="text"> </td> </tr> <tr> <td class="text"><span class="text">Location: * </span></td> <td colspan="3" class="text"><input name="Location" type="text" class="copytext" id="Location" size="87" maxlength="200"></td> </tr> <tr> <td class="text">Justification:</td> <td colspan="3" class="text"><input name="Justification" type="text" class="copytext" id="Justification2" size="30" maxlength="200"></td> </tr> <tr> <td valign="top" class="text">Comments:</td> <td colspan="3" class="text"><textarea name="Comments" cols="89" rows="6" class="copytext" id="Comments"></textarea></td> </tr> <tr> <td colspan="4" valign="top" class="text"> </td> </tr> <tr> <td nowrap class="text">Requestor Name: *</td> <td class="text"><input name="Requestor Name" type="text" class="copytext" id="Requestor Name" size="30" maxlength="100"></td> <td class="text">TM Number: * </td> <td class="text"><input name="TM Number" type="text" class="copytext" id="TM Number" size="30" maxlength="100"></td> </tr> <tr> <td class="text">Title: *</td> <td class="text"><input name="Title" type="text" class="copytext" id="Title" size="30" maxlength="100"></td> <td nowrap class="text">Department: *</td> <td class="text"><input name="Department" type="text" class="copytext" id="Department" size="30" maxlength="100"></td> </tr> <tr> <td nowrap class="text">Phone Extension: *</td> <td class="text"><input name="Phone Extension" type="text" class="copytext" id="Phone Extension" size="30" maxlength="15"></td> <td class="text">Cost Center: </td> <td class="text"><input name="Cost Center" type="text" class="copytext" id="Cost Center" size="30" maxlength="200"></td> </tr> <tr> <td nowrap class="text">Access Control Request: </td> <td class="text"><input name="Access Control Request" type="text" class="copytext" id="Access Control Request" size="30" maxlength="200"></td> <td class="text">Access Area Requested To: </td> <td class="text"><input name="Access Area Requested To" type="text" class="copytext" id="Access Area Requested To" size="30" maxlength="200"></td> </tr> <tr> <td colspan="4" class="text"> </td> </tr> <tr> <td colspan="4" class="text"> <table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr> <td colspan="2" bgcolor="#666666" class="title"><input type="hidden" name=" "><input type="hidden" name="FOR KEYS THAT OPEN DEPARTMENTS OR OFFICES">For Keys That Open Departments Or Offices (Does not apply to keys for desks, file cabinets, etc.)</td> </tr> <tr> <td width="19%" class="text">Key Issued To (Name): </td> <td width="81%" class="copytext"><input name="Key Issued To" type="text" class="copytext" size="50" maxlength="100"></td> </tr> <tr> <td class="text">TM Number: </td> <td class="text"><input name="Team Member Number" type="text" class="copytext" size="50" maxlength="100" id="Team Member Number"></td> </tr> <tr> <td colspan="2" class="copytext"><span style="color: #FF0000"><strong>NOTE:</strong></span> <em>This may be the same person as the requestor. A separate request is required for each individual receiving key(s). Requests for multiple copies of the same key for one person will be denied.</em></td> </tr> </table> </td> </tr> <tr> <td colspan="4" class="text"> </td> </tr> <tr> <td colspan="4" class="text"><table width="100%" border="0" cellspacing="0" cellpadding="4"> <tr> <td colspan="2" bgcolor="#666666" class="title"><input type="hidden" name=" "><input type="hidden" name="DIRECTOR INFORMATION"> Director Information</td> </tr> <tr> <td width="19%" class="text">Dept. Director: *</td> <td width="81%" class="text"><input name="Director" type="text" class="copytext" size="50" maxlength="100"> <span class="text" style="color: #FF0000">DEPARTMENT DIRECTOR ONLY</span></td> </tr> <tr> <td class="text">Dept. Director Email: *</td> <td class="text"><input name="Email" type="text" class="copytext" size="50" maxlength="100"> <span class="text" style="color: #FF0000">DEPARTMENT DIRECTOR'S EMAIL ONLY</span> <input type="hidden" name="To approve - reply to" value="rolandjordan#example.org"></td> </tr> <tr> <td class="text"> </td> <td class="text"> </td> </tr> <tr> <td colspan="2" class="text" style="color: #FF0000">NOTE: <span class="text" style="color: #FF0000">Request will be emailed to the Department Director first for approval.</span></td> </tr> </table></td> </tr> <tr> <td colspan="4" class="copytext"> </td> </tr> <tr> <td colspan="4" class="copytext"><p align="left"> <input type="submit" name="Submit" value="Submit" class="copytext"> <input type="reset" name="Reset" value="Reset" class="copytext"> </p></td> </tr> </table></td> </tr> </form> </table> </body> </html> However, it still is not coming through correctly. I've also cleared my cache and restarted my browser, just as a last resort. To no avail.
Add calculator from other website to my website
I want to add this calculator to my website html. What code should I write to my html? Can I do it without the extra javascript and css? Thanks in advance
There are few ways to do it but these are the two best options: Use iframe - you don't need much extra javascript code, but you'll have to fiddle with the css and positioning as the calculator is in the middle of an empty page. As LearningPhase said, use <iframe src="http://www.superskinnyme.com/bf.html"></iframe> + styles. Copy and paste HTML block (table) that includes the calculator, and copy the javascript code as well. You can access them through "View page source": Javascript: <script type="text/javascript" src="http://www.superskinnyme.com/js/fatcalc.js"></script>. Table: <table width="480px" border="0" cellspacing="0" cellpadding="0" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg" align="left"> <tbody><tr> <td align="left"><form> <table width="490" align="left" border="0" cellpadding="5" cellspacing="2" bgcolor="#F8FDFF" class="wp" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg"> <tbody><tr> <td align="right" class="style4">Gender </td> <td><label for="s1"> <input type="radio" id="s1" name="s" value="m" onclick="sex(this.form)"> <span class="wp"> Male</span></label> <span class="wp"> <label for="s2"> </label> </span> <label for="s2"> <input type="radio" id="s2" name="s" value="f" onclick="sex(this.form)"> <span class="wp">Female</span></label></td> </tr> <tr> <td align="right" class="wp"><strong>Preferred measurement </strong></td> <td><label for="d1"> <input type="radio" id="d1" name="d" value="1"> <span class="wp">Centimetres</span></label> <label for="d2"> <input type="radio" id="d2" name="d" value="2.54"> <span class="wp">Inches</span></label> <span class="wp"> <label for="d2"></label> <label for="d2"> </label> </span> <label for="d2"></label></td> </tr> <tr> <td><div align="right" class="wp"><strong>Height </strong></div></td> <td><input type="text" id="h" name="h" size="6" class="calcbox"></td> </tr> <tr> <td align="right" class="wp"><strong>Neck </strong></td> <td><input type="text" id="n" name="n" size="6" class="calcbox"></td> </tr> <tr> <td align="right"><strong class="wp">Waist</strong> </td> <td><input type="text" id="w" name="w" size="6" class="calcbox"></td> </tr> <tr> <td align="right" class="wp"><strong>Hips</strong> </td> <td><input type="text" id="r" name="r" size="6" disabled="disabled" class="calcbox"></td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="Calculate" onclick="calc(this.form);return false;" name="button2" class="calcbutton" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996;vertical-align:middle"> <input type="reset" value="Reset" onclick="clearForm(this.form)" class="calcbuttons" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996; vertical-align:middle"></td> </tr> <tr> <td height="19" colspan="2" align="center" class="bigbold"> </td> </tr> <tr> <td height="19" colspan="2" bgcolor="#DDDDDD" id="mus"><div align="center"><span class="smallw">RESULT</span></div></td> </tr> <tr> <td align="right"><strong>BODY FAT </strong></td> <td><input type="text" id="f" name="f" size="6" readonly="readonly" class="calcboxa"></td> </tr> </tbody></table> </form></td> </tr> </tbody></table>
Trying to use an image for submit buttons in multipart/form-data
I have a project where I am trying to convert an old style form to something more modern. The form is a multipart/form-data, and has multiple entry fields and different submit options per table row. Below are some screenshots and a copy of the code. I hope it makes sense, as I have trimmed down the code to a single row to make is smaller. Normally this form can grow to hundreds of rows. I have searched everywhere, and I won't go into all the variants I have tried, but the closest I got to getting it to work was using the <button> tag, however, it would not post to the server. Here is a jsfiddle of the code I am using: http://jsfiddle.net/kbbz19zm/ <form method="post" action="/CM/cmach" enctype="multipart/form-data" onreset="document" name="edittmpl"> <table class="accts" border="2" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <h4>Participant</h4> </td> <td align="center"> <h4>ABA</h4> </td> <td align="center"> <h4>Account</h4> </td> <td align="center"> <h4>Tran Type</h4> </td> <td align="center"> <h4>Amount</h4> </td> <td align="center"> <h4>ID Num</h4> </td> <td align="center"> <h4>Disc Data</h4> </td> <td align="center"> <h4>Addenda Info</h4> </td> <td align="center"> <h4>Actions</h4> </td> </tr> <tr class="tabledetail"> <td align="center"> <h6>Joe Schmoe</h6> </td> <td align="center"> <h6>0101010101</h6> </td> <td align="center"> <h6>CK - 10001000111001</h6> </td> <td class="blankcell1" align="left"> <h6><label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Withdrawal" />Withdrawal</label><br /> <label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Deposit" checked="checked" />Deposit</label><br /></h6> </td> <td class="blankcell1" align="center"> <input name="part_amount_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="14" type="text" value="0.00" size="8" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_id_num_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="15" type="text" value="" size="8" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_disc_data_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="2" type="text" value="" size="1" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_addenda_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="80" type="text" value="" size="15" override="1" /> </td> <td class="blankcell1" align="center"> <input name="edit_tmpl_part_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="submit" value="Update" /> <input name="del_tmpl_part_conf_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="submit" value="Delete" /> </td> </tr> </table> <input name="edit_switch" type="hidden" value="on" /> <input name="tmpl_val" type="hidden" value="Schmoe Enterprises" /> </form> Here are screenshots of what works currently and what I am trying to achieve. The current is using input type="submit": edit: for some reason the forum doesn't like this link as an image, I'll try again. http://s4.postimg.org/5a3hokc9p/Image3.png
Use type="image" for the input if you want it to act like a submit button. You can set an image for it using the src attribute. <td class="blankcell1" align="center"> <input name="edit" type="image" src="http://placehold.it/20x20"> <input name="delete" type="submit" value="Delete"> </td> Demo: table{border:solid CornflowerBlue 1px;border-radius:8px;margin-left:auto;margin-right:auto;max-width:1024px;-webkit-box-shadow:0 3px 5px 0 rgba(128,128,128,0.9);-moz-box-shadow:0 3px 5px 0 rgba(128,128,128,0.9);box-shadow:0 3px 5px 0 rgba(128,128,128,0.9)} h1{text-align:left;font-family:"Open Sans",helvetica;font-weight:bold;font-size:20px;color:#f9f3f3;margin:8px;border:0;text-shadow:0 1px 0 rgba(32,32,192,0.4),0px -1px 0 rgba(32,32,192,0.2)} h2{font-family:"Open Sans",helvetica;font-weight:bold;font-size:18px;color:#f9f3f3;margin:8px;border:0;text-align:left;padding:2px 0 4px 10px;border-radius:8px;background:url(/images/tablebg.png) center repeat-x;background-size:auto 100%;background:linear-gradient(#5c90be,#0053a0);max-width:1016px;text-shadow:0 1px 0 rgba(32,32,192,0.4),0px -1px 0 rgba(32,32,192,0.2)} h5{font-family:"Open Sans",helvetica;font-weight:bold;font-size:16px;color:#50575d;margin:4px;border:0;text-shadow:0 1px 0 rgba(32,32,32,0.1),0px -1px 0 rgba(32,32,32,0.1)} h5.messagetext{font-family:"Open Sans",helvetica;font-weight:normal;font-size:16px;color:#c9c3c3;margin:4px;border:0;padding:2px 2px 2px 2px;text-shadow:0 1px 0 rgba(32,32,32,0.1),0px -1px 0 rgba(32,32,32,0.1)} h3{font-family:"Open Sans",helvetica;font-weight:bold;color:#333;font-size:12px;margin:0;padding:0 2px 2px 5px} #tc297{width:297px} #tc97{width:97px} #tc25{width:25px} table{background-color:#fff} td{border:0} h4{font-family:"Open Sans",helvetica;font-weight:bold;color:#333;font-size:12px;margin:6px} tr.tabledetail{background-color:#f7f7f7;border-radius:8px} tr.tabledetail1{background-color:#efefef;border-radius:8px} h6{font-family:"Open Sans",helvetica;font-weight:normal;color:#333;font-size:12px;margin:0;padding:2px 5px 2px 5px} td.pad3{padding:3px} td.title{background-color:#fff;border-bottom:1px CornflowerBlue solid;border-radius:8px;-webkit-box-shadow:0 0 7px 0 rgba(192,192,192,1);-moz-box-shadow:0 0 7px 0 rgba(192,192,192,1);box-shadow:0 0 7px 0 rgba(192,192,192,1)} td.pad_bottom_border{padding-bottom:8px;border-bottom:1px CornflowerBlue solid;border-radius:8px} td.tablelabelleft{border-bottom:1px white solid;border-top:1px white solid;border-radius:8px} td.tablelabellefttopright{border-left:1px white solid;border-top:1px white solid;border-right:1px white solid;border-radius:8px} td.tablelabellefttop{border-left:1px white solid;border-top:1px white solid;border-radius:8px} td.tablelabel{border-bottom:1px white solid;border-left:1px white solid;border-top:1px white solid;border-radius:8px} td.tablebottom{border-top:1px white solid;padding:2px;border-radius:8px} td.blankcellb{border-left:1px white solid;border-radius:8px} td.blankcellb1{border-left:1px white solid;border-radius:8px} tbody tr.tabledetail:hover{background:#dce2e6} tbody tr.tabledetail1:hover{background:#dce2e6} input{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px} textarea{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px} select{font-family:"Open Sans",helvetica;color:#333;font-weight:normal;font-size:12px} #font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url('/css/open_sans_light.woff') format('woff')} #font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url('/css/open_sans.woff') format('woff')} #font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local('Open Sans Semibold'),local('OpenSans-Semibold'),url('/css/open_sans_semibold.woff') format('woff')} #font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url('/css/open_sans_bold.woff') format('woff')} #font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url('/css/open_sans_italic.woff') format('woff')} <form method="post" action="/CM/cmach" enctype="multipart/form-data" onreset="document" name="edittmpl"> <table class="accts" border="2" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <h4>Participant</h4> </td> <td align="center"> <h4>ABA</h4> </td> <td align="center"> <h4>Account</h4> </td> <td align="center"> <h4>Tran Type</h4> </td> <td align="center"> <h4>Amount</h4> </td> <td align="center"> <h4>ID Num</h4> </td> <td align="center"> <h4>Disc Data</h4> </td> <td align="center"> <h4>Addenda Info</h4> </td> <td align="center"> <h4>Actions</h4> </td> </tr> <tr class="tabledetail"> <td align="center"> <h6>Joe Schmoe</h6> </td> <td align="center"> <h6>0101010101</h6> </td> <td align="center"> <h6>CK - 10001000111001</h6> </td> <td class="blankcell1" align="left"> <h6><label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Withdrawal" />Withdrawal</label><br /> <label><input type="radio" name="part_debit_credit_Damon Lewis:_:0101010101:_:CK:_:10001000111001" value="Deposit" checked="checked" />Deposit</label><br /></h6> </td> <td class="blankcell1" align="center"> <input name="part_amount_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="14" type="text" value="0.00" size="8" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_id_num_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="15" type="text" value="" size="8" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_disc_data_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="2" type="text" value="" size="1" override="1" /> </td> <td class="blankcell1" align="center"> <input name="part_addenda_Damon Lewis:_:0101010101:_:CK:_:10001000111001" maxlength="80" type="text" value="" size="15" override="1" /> </td> <td class="blankcell1" align="center"> <input name="edit_tmpl_part_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="image" src="http://placehold.it/30&text=U" /> <input name="del_tmpl_part_conf_Damon Lewis:_:0101010101:_:CK:_:10001000111001" type="image" src="http://placehold.it/30&text=D" /> </td> </tr> </table> <input name="edit_switch" type="hidden" value="on" /> <input name="tmpl_val" type="hidden" value="Schmoe Enterprises" /> </form>
Thank you for your replies. I ended up abandoning using actual images for the icon buttons, and instead used a custom font similar to webdings or wingdings, with some CSS styling. Below is the code and screenshots: HTML: <input name="mark_batch_conf_2015006:_:1" class="buttonIcons" title="Mark" type="submit" value="m" id="blue" /> <input name="edit_batch_2015006:_:1" class="buttonIcons" title="Edit" type="submit" value="a" id="orange" /> CSS .buttonIcons { font-family:"Icons", helvetica; color:#636363; font-weight:normal; font-size:24px; text-align: center; text-decoration: none; letter-spacing: 1px; margin: 0px; padding: 0px 0px 0px 0px; display: inline-block; vertical-align: baseline; border-radius: 15px; outline: none; border: none; cursor: pointer; background: transparent; } #blue { color: #5e83cc; } #blue:hover , #blue:active { text-shadow: 1px 1px 2px rgba(192, 192, 192, 0.9); transition: color 0.2s ease-in; position: relative; top: -1px; left: -1px; color: #539cd0; } The font I used: Sosa-Regular (http://tenbytwenty.com/?xxxx_posts=sosa) Screenshot: http://s30.postimg.org/v5w2qo1el/Untitled.png