<form action="javascript:goCalc('calcForm')" id="calcForm" name="calcForm">
<table align="center" border="0" cellpadding="3" cellspacing="1" width="100%">
<tbody>
<tr bgcolor="#bfd5ea">
<td style="font-size: 30px; color: f00; FONT-WEIGHT: bold; TEXT-ALIGN: center">
Donation:</td>
<td style="FONT-WEIGHT: bold; TEXT-ALIGN: center">
Tax Rate %:</td>
<td style="FONT-WEIGHT: bold; TEXT-ALIGN: center">
Net Cost of Donation</td>
<td style="FONT-WEIGHT: bold; color: 00f; TEXT-ALIGN: center">
Tax Savings</td>
</tr>
<tr bgcolor="#e6eef7">
<td align="middle" nowrap="nowrap" valign="center">
$
<input class="formtext" name="inputIncome" size="12">x</td>
<td align="middle" bgcolor="#e6eef7" nowrap="nowrap" valign="center">
<select class="formtext" id="inputPercentage" name="inputPercentage">
<option selected="selected" value="10">10%</option>
<option value="15">15%</option>
<option value="25">25%</option>
<option value="28">28%</option>
<option value="33">33%</option>
<option value="35">35%</option>
<option value="39.6">39.6%</option>
</select>=</td>
<td align="middle" valign="center">
$ <span style="FONT-WEIGHT: bold; TEXT-ALIGN: center"> <input class="formtext" id="inputCost" name="inputCost" readonly="readonly" size="12"> </span>
</td>
<td align="middle" valign="center">
$
<input class="formtext" id="inputMoney" name="inputMoney" readonly="readonly" size="12">
</td>
</tr>
<tr align="right">
<td nowrap="nowrap" valign="center">
</td>
<td nowrap="nowrap" valign="center">
<div align="center">
<input class="btn" name="Submit" type="submit" value="Calculate">
</div>
</td>
<td nowrap="nowrap" valign="center">
<div align="center">
</div>
</td>
<td nowrap="nowrap" valign="center">
</td>
</tr>
</tbody>
</table>
</form>
Issue is when user clicks the calculate tab, it does not display the other fields as coded... Tried everything, please help - (2) Readonly lines issue - in lower section of code - only need to display attributes of amount
Have you tried setting the cursor-eventsattribute on an inline css? Say
#inputMoney{
cursor-events: none;
}
or you can also try using the disabled='disabled' property though you have to enable thhose disabled elements before you submit the form
Related
I am trying to obtain this InputBox:
(source: instructables.com)
with this html code
<body style="background-color:#EEEEEE" onkeypress='vbs:Default_Buttons' align='top'>
<table width='90%' height='100%' align='center' border='0'>
<tr border='0'>
<td align="left" style="font-family: arial; font-size: 11px;">
Un Message
</td>
<td align='right'>
<table align='right'>
<tr align='right'>
<input type="button" value="OK" name="btn_OK" onClick="vbs: Run_ProgramOK" style="font-size: 11px;">
<input type="button" value="Cancel" name="btn_Cancel" onClick="vbs: Run_ProgramCancel" style="font-size: 11px;"><br><br>
</tr>
</table>
</td>
</tr>
</table>
<table width='90%' height='100%' align='center' border='0'>
<tr>
<td align='left' style="font-family: arial; font-size: 16px; font-weight: bold;">
<input type="text" size="60" id="txt_input"
name="txt_input" style="font-size: 11px;" value="Un Input" ><BR>
<!-- <input type="password" -->
</td>
</tr>
</table>
</body>
but I can't get things right, the buttons are not left aligned.
I do not handle the table rows and column correctly
Check out this:
Click here!
Should look more like the thing you are looking for, let me know if you wanted something else basically just aligned it to the left instead and gave it margin/right/top to position it exactly where it should be - not responsive, can be added.
Let me know what you think
<body style="background-color:#EEEEEE" onkeypress='vbs:Default_Buttons' align='top'>
<table width='90%' height='100%' align='center' border='0'>
<tr border='0'>
<td align="left" style="font-family: arial; font-size: 11px;">
Un Message
</td>
<td align='left' style="margin-top: 5em;">
<table align='left' style="margin-right: 7.2em;">
<tr align='left' "margin-top: 5em;">
<input type="button" value="OK" name="btn_OK" onClick="vbs: Run_ProgramOK" style="font-size: 11px; width: 5em; margin-top: 4em;"><br>
<input type="button" value="Cancel" name="btn_Cancel" onClick="vbs: Run_ProgramCancel" style="font-size: 11px; width: 5em;"><br><br>
</tr>
</table>
</td>
</tr>
</table>
<table width='90%' height='100%' align='center' border='0'>
<tr>
<td align='left' style="font-family: arial; font-size: 16px; font-weight: bold;">
<input type="text" size="60" id="txt_input"
name="txt_input" style="font-size: 11px;" value="Un Input" ><BR>
<!-- <input type="password" -->
</td>
</tr>
</table>
</body>
But like the guy who replied to you first said, tables are redudant, use div
I have this html (fiddle):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vetical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vetical-align:top;"/>
<button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
The problem is that i cant display the contents of second td vertically aligned top.
I saw also other answers that use the property display: table-cell; but doesn't seem to work.
Any ideas on how to do this?
You have a typo is vertical-align not vetical-align:top(also please avoid using inline styles):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vertical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vertical-align:top;" />
<button class="" style="width:90px;vertical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="1" style="vertical-align: top"><span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height: 80px; vertical-align: top;">
<div>text</div>
<div>
<textarea id="" class="" style="height: 52px; vetical-align: top;"></textarea></div>
<div>Person:</div>
<div>
<input id="Text1" class="" type="text" value="" style="vetical-align: top;" /></div>
<div>
<button class="" style="width: 90px; vetical-align: top;" onclick="">Insert</button></div>
</td>
</tr>
</table>
used html divs around contents,have a look at updated link please,hope it helps
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td colspan="1" valign="top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" valign="top">
<table cellpadding="0" cellspacing="5" border="0">
<tr valign="top">
<td>Text:</td>
<td><textarea id="" class="" style="height:52px;vetical-align:top;"></textarea></td>
<td>Person:</td>
<td><input id="" class="" type="text" value="" style="vetical-align:top;"/></td>
<td><button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button></td>
</tr>
</table>
</td>
</tr>
</table>
I am creating an HTML form that will be used in a third party software. I've created the form in IE9 and everything displays exactly how I want it to. When opened with IE10 or Chrome it becomes a giant mess. It appears as if styling/css is completely ignored. I need some help determining what I am doing wrong to prevent the cross-browser functionality. Code below.
<STYLE>
fieldset {
width: 655 px;
padding: 10 px;
background-color: transparent;
border: 1px solid #A5C0DF
}
TABLE {
width: 630 px;
align: left;
text-align: left;
border-color: #000000;
border: #000000;
table-layout: fixed;
}
td {
border: none;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
}
input {
width: 100%;
text-align: left;
}
select {
width: 100%;
}
textarea {
width: 100%;
overflow: visible;
}
Label {
width: 100%;
}
.mcInput {
border: 1px solid #A5C0DF;
font: 12 pt Times New Roman, Arial, Helvetica, sans-serif;
color: blue;
margin-bottom: 1px;
}
.mcPage{
page-break-after:always;
width:100%;
}
.center {
text-align: center;
}
button {
border-radius: 50%;
border: 1px solid #000;
text-align: center;
}
.bttnstyle {
text-align: center;
width: 109 px;
}
.bttntwo {
text-align: center;
width: 40 px;
font-size: 12;
}
.readonly {
color: black;
background-color: #f4f4f4;
}
</STYLE>
<FORM>
<DIV id="mcPage_001" name="mcPage_001">
<fieldset>
<TABLE cellpadding="0" cellspacing="0" style="width: 620 px">
<tr>
<td style="width: 120 px">
<LABEL>CU #:</LABEL>
</td>
<td style="width: 190 px">
<INPUT
type="text"
id="mastercontrol.form.number"
alt="CU Number"
title="CU Number"
class="mcInput center"
readonly="true">
</td>
<td style="width: 120 px">
<LABEL style="padding-left: .75em">Date Initiated:</LABEL>
</td>
<td style="width: 190 px">
<INPUT
type="text"
id="mastercontrol.form.created"
alt="Date Initiated"
title="Date Initiated"
class="mcInput center"
readonly="true">
</td>
</tr>
<tr>
<td>
<LABEL>Form Initiator:</LABEL>
</td>
<td colspan="3">
<INPUT
type="text"
id="mastercontrol.form.creatorname"
alt="Form Initiator"
title="Form Initiator"
class="mcInput"
readonly="true">
</td>
</tr>
</TABLE>
</fieldset><br><br>
<fieldset>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="width: 150 px">
<LABEL style="font-size: 14 px"><b>Location(s) Affected:</b></LABEL>
</td>
<td style="width: 200 px">
<select
onchange="locOther();"
id="cboLocationsAffected"
alt="Locations Affected"
title="Locations Affected"
class="mcInput">
<option value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
</td>
<td style="width: 65 px">
<LABEL style="padding-left: .75em; font-size: 14 px"><b>Other:</b></LABEL>
</td>
<td style="width: 215 px">
<INPUT
type="text"
id="txtLocationAffectedOther"
alt="Location Affected Other"
title="Location Affected Other"
value=" N/A"
maxlength="29"
class="mcInput">
</td>
</tr>
<tr>
<td style="width: 110 px; text-align: right">
<input
onclick="addItems(); Limit();"
type="button"
id="txtAdd"
alt="Add Locations"
title="Add Locations"
value="Add"
class="button bttntwo">
</td>
<td style="width: 40 px">
<input
onclick="Clear();"
type="button"
id="txtClear"
alt="Clear Locations"
title="Clear Locations"
value="Clear"
class="button bttntwo">
</td>
<td colspan="3">
<TEXTAREA
type="text"
id="txtLocations"
alt="All Locations"
title="All Locations Affected"
style="height: 63 px"
readonly="true"
class="mcInput"
onKeyDown="limitText(this.form.txtLocations,this.form.countdown,200);"
onKeyUp="limitText(this.form.txtLocations,this.form.countdown,200);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td style="width: 290 px">
<LABEL style="font-size: 14 px"><b>Application and/or System Affected:</b></LABEL>
</td>
<td style="width: 340 px">
<INPUT
type="text"
id="txtApplicationSystemAffected"
alt="Application System Affected"
title="Application System Affected"
maxlength="48"
class="mcInput"><br>
</td>
</tr>
<tr>
<td>
<LABEL style="font-size: 14 px; height: 63 px"><b>Servers/Workstations/Equipment Affected:</b></LABEL>
</td>
<td>
<TEXTAREA
type="text"
id="txtEquipmentAffected"
alt="Equipment Affected"
title="Equipment Affected"
maxlength="48"
class="mcInput"
style="height: 63 px"
onKeyDown="limitText(this.form.txtLocations,this.form.countdown,600);"
onKeyUp="limitText(this.form.txtLocations,this.form.countdown,600);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td>
<LABEL style="font-size: 14 px"><b>Description of Updated to be Applied:</b></LABEL>
</td>
</tr>
<tr>
<td>
<TEXTAREA
type="text"
id="txtDescriptionUpdatesApplied"
alt="Description Updates Applied"
title="Description Updates Applied"
style="height: 150 px"
class="mcInput"
onKeyDown="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);"
onKeyUp="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td rowspan="7" style="background-color: #E8E8E9; width: 85 px">
<LABEL style="font-size: 14 px"><b>Risk<br>Assessment:</b><br></LABEL><LABEL style="font-size: 13 px"><i> (check all<br> that apply)</i></LABEL>
</td>
<td style="width: 25 px">
<INPUT
type="checkbox"
id="chkReviewUpdatesConducted"
alt="Review Updates Conducted"
title="Review Updates Conducted"
value="A review of potential critical updates was conducted">
</td>
<td style="width: 520 px">
<LABEL style="padding-left: .5em">A review of potential critical updates was conducted</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkUpdatesAffectValidatedSystems"
alt="Updates Affect Validated Systems"
title="Updates Affect Validated Systems"
value="Updates could affect Validated Systems">
</td>
<td>
<LABEL style="padding-left: .5em">Updates could affect Validated Systems</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkInstallConfigChangesDocumented"
alt="Install Config Changes Documented"
title="Install Config Changes Documented"
value="Installation instructions/configuration changes are documented">
</td>
<td>
<LABEL style="padding-left: .5em">Installation instructions/configuration changes are documented</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkRevertMethodIdentified"
alt="Revert Method Identified"
title="Revert Method Identified"
value="A method to revert back has been identified">
</td>
<td>
<LABEL style="padding-left: .5em">A method to revert back has been identified</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkAffectedVendorsContacted"
alt="Affected Vendors Contacted"
title="Affected Vendors Contacted"
value="Affected application vendors have been contacted to ensure that the updates will run at the to be applied version">
</td>
<td>
<LABEL style="padding-left: .5em">Affected application vendors have been contacted to ensure that the updates</LABEL>
</td>
</tr>
<tr>
<td>
<LABEL></LABEL>
</td>
<td>
<LABEL style="padding-left: .5 em">will run at the to be applied version</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
onclick="riskOther();"
type="checkbox"
id="chkRiskAssessOther"
alt="Risk Assess Other checkbox"
title="Risk Assess Other checkbox"
value="Other">
<td>
<LABEL style="padding-left: .5em">Other:<span style="padding-left: .5 em"></span>
<INPUT
type="text"
id="txtRiskAssessOther"
alt="Risk Assess Other"
title="Risk Assess Other"
maxlength="60"
disabled="true"
class="mcInput"
style="width: 440 px"></LABEL>
</td>
</tr>
</TABLE><br>
</fieldset>
</DIV>
I have been agonizing over this, the alignment of my third table row is complete messed when viewed either Firefox or Chrome but look exactly as expected in IE9.
I have tried using style (text-align, width, margin-left, overflow, etc...) and direct align, width. etc.... When creating the width, I have tried using % and direct pixel values.
The parent table has a width 400px, or at least is should because that is the width of the parent TD and table width is 100% and cellpadding and cellspacing is 0.
<table align="center" style="width: 650px; border-style: none" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 250px;"><img src="../images/incidentmonitor.gif" alt="" /></td>
<td style="text-align: center; width: 400px">
<!-- Login section Table -->
<table align="center" style="width: 100%; border-style: none;" class="clsLoginTable" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: right; width: 25%; overflow: hidden;"> </td>
<td style="text-align: right; width: 5%; overflow: hidden;"> </td>
<td style="text-align: left; width: 70%; overflow: hidden;"> </td>
</tr>
<tr>
<td colspan="3" class="clsLoginLabel" style="text-align:center;">
<p><b>Please enter your User ID and Password</b><br /><br /></p>
</td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">User ID:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input name="UserID" value="administrator" size="20" /></td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">Password:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input autocomplete="off" type="password" name="Password" onkeydown="SendForm(event.keyCode)" size="20" /></td>
</tr>
<tr style="display: block;">
<td align="right" width="25%" class="clsLoginLabel">Domain:</td>
<td align="right" width="5%"> </td>
<td align="left" width="70%">
<select id="DomainName" name="DomainName" size="1" style="width: 200px">
<option selected="selected" value='' >Built-In</option>
<option value='dnsdev.com' >dnsdev.com</option>
<option value='dnsdev.org' >dnsdev.org</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<button id="submit_request" name="submit_request" class="clsButton" accesskey="L" onclick="Validate();return false" Title="Login to IncidentMonitor "><u>L</u>ogin</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<label id="hhaaaa" for='<%= hh.ClientID %>'>
<table style="height: 100px; width: 300px;cursor: pointer" cellpadding="0" cellspacing="0" id="jhuu" onmouseover="Highlight(this.id,true,'ss');" onmouseout="Highlight(this.id,false,'ss');" class="asdqweqwe">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" style="height: 10px">
</td>
</tr>
<tr>
<td valign="top" style="width: 20px; padding-left: 5px; padding-top: 7px"><input id="hh" runat="server" type="checkbox" /></td>
<td style="width: 60px" valign="top" align="center"><img src="" /></td>
<td align="left" valign="top"><span style="font-weight: bold;"></span><img alt="" id="asd" onclick="" style="cursor: pointer" src="" /></span><br /><span></span></td>
</tr>
<tr>
<td colspan="3" style="height: 10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</label>
Hello i write this code to make a check box label this code run in all Browser Except Firefox ???!!!!
The Label can't contain the element it's labeling, it's simply wrong.
(Thanks erKURITA :))
Try something like this first and see if it works fine:
<label id="hhaaaa" for="<%= hh.ClientID %>">Some description here..</label>
As far as I know Label is an inline element so to have it contain other elements add display: block; CSS to it although it's not very elegant and probably against standards.
I think this line is the problem:
<td align="left" valign="top"><span style="font-weight: bold;"></span><img alt="" id="asd" onclick="" style="cursor: pointer" src="" /></span><br /><span></span></td>
Remove the span end tag that is not open.
<td align="left" valign="top"><span style="font-weight: bold;"></span><img alt="" id="asd" style="cursor: pointer" src="" /><br /><span></span></td>