I have three <input type="submit" /> elements arranged vertically. The top two are in the same <div> and <table>, but the bottom one is in a different <div> and <table>. I can't change this, as it is for UX purposes in the context of the larger page from which this is just a snippet. My third button is an extra few pixels too low, such that the spacing between these three buttons is inconsistent.
I would like to not have to do a junky vertical-align: -2px or something like that. What I'd like is to gain some understanding as to why the spacing is inconsistent. Thanks for reading.
Here is a JSFiddle example:
https://jsfiddle.net/y57wLtjb/
use border-spacing: 0; for table
table {
border-collapse: collapse;
border-spacing: 0;
}
<div id="pre-update-section">
<table>
<tr>
<td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td>
<td><label id="ajaxStatusMsg"></label></td>
</tr>
<tr>
<td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td>
<td></td>
</tr>
</table>
</div>
<div id="start-update-section">
<table >
<tr>
<td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td>
<td>
</td>
</tr>
</table>
</div>
Related
I'm having trouble identifying td and ts with css selectors. I'd like to move some elements around the page so gave them a div class. Howver using this in css doesn't seem to work.
What is the selector here please, as I can't understand if td, tr is acting as a label and in what sense?
Html:
<div class="ye">
<td>Your Email
</td>
</div>
<div class="ye1">.
<td><input type="text" name="email" /></td>
</div>
</tr>
<tr>
<div class="un">
<td>Username:</td>.
</div>
<div class="un1">
<td><input type="text" name="username" />.
</td>
</div>
</tr>
<tr>
<div class="pw">
<td>
<div align="right">Password:</div>
</td>
<td><input type="text" name="password" /></td>
</d iv>
</tr>
<tr>
<div class="
sub">
</td>
</div>
<div class="sub1">
<td><input name="submit" type="submit" value="Submit" /></td>
</div>
</tr ">
</table></form></body></html>
First of all, td inside a div is a big no no. Best practise it to keep the tr > td hirerarchy as is.
You can restructure it to have all your div inside td. Please check the code below.
<table>
<tbody>
<tr>
<td>
<div class="ye">
Your Email
</div>
</td>
<td>
<div class="ye1">
<input type="text" name="email" />
</div>
</td>
</tr>
</tbody>
</table>
Now, to use css,
table tbody .ye {
...
}
table tbody .ye1 input {
...
}
Current display
Im working on a asp.net site for work and I need to have inputs both text and checkboxes. My current solution is as follows:
<form method="post" style="width:100%">
<table style="padding:5px; width:100%">
<tr>
<td style="white-space:nowrap; width:1%">Printer name:</td>
<td><input type="text" name="PrinterName" value="#Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Model:</td>
<td><input type="text" name="Model" value="#Request["Model"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Location:</td>
<td><input type="text" name="Location" value="#Request[" Location"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">IP:</td>
<td>
<table style="margin:0px; padding:0px">
<tr>
<td style="padding:0px"><input type="text" name="IP" value="#Request["IP"]" style="max-width:100%; width:100%" /></td>
<td style="white-space:nowrap;width:1%">
<div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
<td><input type="text" name="MAC" value="#Request["MAC"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
</tr>
</table>
</form>
The checkbox is not reporting the correct size(IE and Chrome) and the text is not being kept inside of the space either.
The aim is to have the text directly beside the checkbox, and both fo those being in line as small as possible to the right of the text input. How would i achieve that without this strange bug ?
Edit: in my testing i had switched the textbox and the button as wel las added a height in the style of the checkbox, those have been corrected now
Edit2: Added in a picture of what shows up right now
It seems you just need to remove height: 1% from
<td style="white-space:nowrap;width:1%">
<!-- remove the height from the style below -->
<div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>
This will render the checkbox next to the "QuickIP" text
Take a look at this codepen.
I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
Try to change the form width to 100%. This the example
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">
You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.
You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.
Now consider the following:
<style>
form {
width: 200px;
margin: 0 auto;
}
input {
display: block;
margin: 5px 0;
}
</style>
<form name="form1" method="POST" action="/">
<h1>Client Login</h1>
<input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
<input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
<input name="Submit" type="submit" class="submit_button" value="Login">
</form>
The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.
We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.
Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.
Would you mind to try this maybe :)
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>
Im trying to make a search bar like google, i have it all pretty much worked out, im just not sure how to make the search bar wider, heres the code i have so far
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<FORM name="doingasearch" id="doingasearch">
<p align="center"><INPUT name=searchbox type=text size=20></p>
<p align="center"><INPUT type="button" value="Search" onclick="return
googleSearch();">
<INPUT type="button" value="I Feel Lucky" onclick="return googleSearch
();"></p>
</FORM>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
If you find anything wrong with it, please say so
You could either do it in your HTML:
<input name="searchbox" type="text" size="40" />
Or you could do it the right way, with CSS:
input {
width: 200px;
}
You should refrain from tables when using search forms. Anyways, you could do two things here.
Either remove the size="20" from the searchbox <input> and change the width in CSS or you can increase the <input> size.
like this:
input {
width: XXpx;
}
I am trying to create a table in which the border will appear like a login box.
<table border="1">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="submit" value="Log In" /></td>
</tr>
</table>
What happens is that even the table cells have border and the border sucks. I want to remove cell border. The border should only be wrapping around the table. I am totally new to this.
Thanks in advance.
Use CSS
<style type="text/css">
.loginbox {
border-collapse: collapse;
border-width: 1px;
border-style: solid
}
</style>
<table class="loginbox">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>
FYI: I added colspan="2" to your last <td> in order to make the border go all the way around.
If you use the following css,
table {
border: thin solid black;
}
that will give you a border around the table only, you can see a jsfiddle for it at http://jsfiddle.net/2CdwW/
Use CSS to put the border on the table instead:
<table style="border: 1px solid black">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>