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>
Related
So I am doing a mobile site for my main site, but I wish for the site to be remained unchanged to its text input sizes, but for the mobile to be resizeable when using a mobile.
Here is my form code.
<form name="htmlform" method="post" action="thankyou.php" target="_blank">
<table width="447" cellpadding="0" cellspacing="0">
<td width="130"></tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Full Name</td>
<td width="317" height="30" valign="middle">
<input type="text" name="first_name" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle"">Subject</td>
<td height="30" valign="middle">
<input type="text" name="last_name" maxlength="100%" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Email Address</td>
<td height="30" valign="middle">
<input type="text" name="email" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Contact Number</td>
<td height="30" valign="middle">
<input type="text" name="telephone" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="140" align="left" valign="middle">Content</td>
<td height="140" valign="middle">
<textarea name="comments" cols="50" rows="8" wrap="VIRTUAL"></textarea> </td>
</tr>
<tr align="right" valign="middle">
<td height="32" colspan="2" style="text-align:center">
<div align="right">
<input type="submit" value="Submit">
</div></td>
</tr>
</table>
</form>
u can make 2 classes for all the inputs,and then use the jquery,to determine if the windowsize's width is a portable, small device or not,and toggle right classes accordingly to the size
(if u dont have a jquery knowledge,let me know,i will be more specific)
I'm trying to design a form looking like that:
I tried with a table embedding another two tables, one with 5 rows and the other with 6 rows, and tried to arrange it with CSS, but somehow it doesn't seem to work out. I'm looking for a solution to correct my design or for completely another (with div's?). Here my code:
<td style="display: table-cell; text-align: right; height: 80%;">
<table style="display: table-cell; text-align: right; height: 80%;">
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier1"
labelfor="inputPalier1" />
</td>
<td width="180" >
<tech:text property="inputPalier1"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier2"
labelfor="inputPalier2" />
</td>
<td width="180" >
<tech:text property="inputPalier2"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier3"
labelfor="inputPalier3" />
</td>
<td width="180" >
<tech:text property="inputPalier3"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier4"
labelfor="inputPalier4" />
</td>
<td width="180" >
<tech:text property="inputPalier4"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier5"
labelfor="inputPalier5" />
</td>
<td width="180" >
<tech:text property="inputPalier5"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
</table>
</td>
<td style="text-align: left;">
<table style="text-align: left;">
<tr>
<td><div style="background-color: #CDFFAA; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFFF99; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFDC77; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFBA44; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #F07300; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #A00000; height: 100%;"> </div></td>
</tr>
</table>
</td>
I tried some different variations, using various display css attributes on my first table, height css attributes on the cells, and so on, to no avail. Any idea?
I hope this is what you are looking for https://jsfiddle.net/sua15zok/3/ . Please specify if any corrections in css required. I will do it and update the required UI.
On this Mistar website I'm trying to make a request from an iOS app using NSURLSession that loads the website above in the background, passes two strings for username and password into the <input>'s and then lets me access the logged in page.
Here's the relevant HTML, it's a table with two input forms, pin which is a username and then the password:
<div class="widgetbdy" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
<table border="0" cellpadding="2" cellspacing="0" class="txtin3" style="width:100%; border-collapse: collapse">
<tbody><tr style="height:10px;">
<td colspan="2" style="height:10px;"></td>
</tr>
<tr style="padding-top:4px;">
<td align="right" style="width:30%;">
<b><label for="ID" id="lblID">ID</label>:</b>
</td>
<td align="left">
<input class="txtin" id="Pin" name="Pin" onfocus="clearmessages()" style="width:175px;" type="text" value="">
</td>
</tr>
<tr>
<td align="right" style="width:30%;">
<b><label for="Password" id="lblPassword">Password</label>:</b>
</td>
<td align="left">
<input class="txtin" id="Password" name="Password" onfocus="clearmessages()" style="width:175px;" type="password" value="">
</td>
</tr>
<tr>
<td id="loginerrormsg" align="center" colspan="2">
<img id="imgwait" src="./Student Portal_files/ajax-loader.gif" width="20" height="20" alt="" style="display:none;">
<div id="msg1" style="display: none;" class="error"><label for="idandpasswordrequired" id="lblidandpasswordrequired">ID and Password Required</label></div>
<div id="msgdisplay" style="display: none;">
<div id="msgmessage" style="text-align:center; padding-bottom:10px;" class="error"></div>
</div>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input id="LoginButton" style="visibility: visible" type="button" value="Log In">
</td>
</tr>
<tr style="height:10px;">
<td colspan="2" style="height:10px;"></td>
</tr>
</tbody></table>
</div>
You can do this by creating offscreen UIWebView and little javascript that fill required field and execute form submit.
Or another way, if site not so hard implemented you can make POST request to auth URL directly without html form
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>