Submit button image overflowing - HTML - html

I've just created an image and am using it as a submit button:
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
However the image is larger than it should be, it's flowing outside the images border (not css).
You can see the example:
All the blue outside of the black border should not show!
Does anyone have any idea what's going on?
You can see the full HTML at: http://jsfiddle.net/9vsLyhwg/
Thanks

Remove padding: 7px; from .loudbutton, .quietbutton {
#submit {
padding:0;
}
<!doctype html>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://secure.workbooks.com/resources/=QzM/workbooks_signup_form.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://secure.workbooks.com/javascripts/jquery_validate.js"></script>
<title>Signup to Workbooks</title>
<script type="text/javascript">
$(window).load(function() { $("#spinner").fadeOut("fast"); });
</script>
</head><br>
<body>
<div id="spinner"></div>
<div id="wrap">
<div id="main">
<div id="main-body">
<form id="customer_signup_form" method="post">
<input type="hidden" name="edition" id="edition" value="trial"/>
<input name="nickname" id="nickname" class="hide"/>
<table>
<tr>
<td>
<label for="first_name">First Name</label>
</td>
<td>
<input name="first_name" id="first_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name</label>
</td>
<td>
<input name="last_name" id="last_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input name="email" id="email" class="required email" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="confirm_email">Email (Confirm)</label>
</td>
<td>
<input name="confirm_email" id="confirm_email" class="required email" equalTo='#email' size="40"/>
</td>
</tr>
<tr>
<td>
<label for="job_role">Job Role</label>
</td>
<td>
<select name="job_role" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1775">Business Leader</option>
<option value="1776">Customer Support: Leader</option>
<option value="1777">Customer Support: Team Member</option>
<option value="1778">Finance: Leader</option>
<option value="1779">Finance: Team Member</option>
<option value="1780">HR: Leader</option>
<option value="1781">HR: Team Member</option>
<option value="1782">Individual Contributor</option>
<option value="1783">Industry Analyst</option>
<option value="1784">Investment Analyst</option>
<option value="1785">IT: Leader</option>
<option value="1786">IT: Team Member</option>
<option value="1787">Journalist</option>
<option value="1788">Marketing: Leader</option>
<option value="1789">Marketing: Team Member</option>
<option value="1790">Office Manager / Assistant</option>
<option value="1791">Operations: Leader</option>
<option value="1792">Operations: Team Member</option>
<option value="1793">Procurement Professional</option>
<option value="1794">Purchasing: Leader</option>
<option value="1795">Purchasing: Team member</option>
<option value="1796">Sales: Leader</option>
<option value="1798">Sales: Team Member</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone</label>
</td>
<td>
<input name="telephone" id="telephone" class="required" minlength="10" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="number_of_employees">Number of Employees</label>
</td>
<td>
<input name="number_of_employees" id="number_of_employees" class="required integer" pattern="[0-9]*" size="7"/>
</td>
</tr>
<tr>
<td>
<label for="company_name">Company Name</label>
</td>
<td>
<input name="company_name" id="company_name" class="required" minlength="2" size="40"/>
</td>
</tr>
<tr>
<td>
<label for="industry">Industry</label>
</td>
<td>
<select name="industry" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1721">Agriculture, Forestry & Fishing</option>
<option value="1722">Charity</option>
<option value="1723">Construction</option>
<option value="1725">Education & Training</option>
<option value="1726">Energy: B2B</option>
<option value="1727">Energy: B2C</option>
<option value="1728">Energy: Utilities</option>
<option value="2204">Finance: General</option>
<option value="1729">Finance: B2B</option>
<option value="1730">Finance: B2C</option>
<option value="1731">Finance: Investment Banking</option>
<option value="1732">Finance: Retail Banking</option>
<option value="1733">Government: Local</option>
<option value="1734">Government: National</option>
<option value="1735">Government: National, Local</option>
<option value="1736">Health: B2C</option>
<option value="1737">Health: Government</option>
<option value="1738">Health: Social Care</option>
<option value="1739">Hotels & Restaurants</option>
<option value="2205">Insurance: General</option>
<option value="1740">Insurance: B2B</option>
<option value="1741">Insurance: B2C</option>
<option value="1799">IT & Telecommunications: General</option>
<option value="1742">IT & Telecommunications: Hardware</option>
<option value="1743">IT & Telecommunications: Mobile Operators</option>
<option value="1744">IT & Telecommunications: National Carriers</option>
<option value="1745">IT & Telecommunications: Reseller/Integrator</option>
<option value="1746">IT & Telecommunications: Service Provider</option>
<option value="1747">IT & Telecommunications: Software</option>
<option value="1748">IT & Telecommunications: Vendor</option>
<option value="1749">Leisure</option>
<option value="1750">Manufacturing</option>
<option value="1751">Media & Publishing</option>
<option value="1752">Mining & Quarrying</option>
<option value="1755">Real Estate</option>
<option value="1756">Research & Laboratories</option>
<option value="1759">Services: Accounting</option>
<option value="1760">Services: Advertising, Marketing & Event Management</option>
<option value="1762">Services: Consulting</option>
<option value="1763">Services: Engineering, Architecture & Design</option>
<option value="1765">Services: Legal</option>
<option value="2060">Services: Recruitment & HR</option>
<option value="1767">Services: Other</option>
<option value="1768">Services: Personal Services</option>
<option value="1769">Services: Professional Services</option>
<option value="2062">Trade Association & Professional Bodies</option>
<option value="1772">Transport & Logistics</option>
<option value="1773">Water Supply, Sewerage & Waste Management</option>
<option value="1774">Wholesale, Retail & Distribution</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="current_crm">Current CRM</label>
</td>
<td>
<select name="current_crm" min="1">
<option selected value="0">-- Please select one --</option>
<option value="1503">Salesforce.com</option>
<option value="2495">Microsoft Dynamics CRM Cloud</option>
<option value="1042">Microsoft Dynamics CRM On Network</option>
<option value="1232">Sugar CRM</option>
<option value="1052">Sage CRM</option>
<option value="1053">Saleslogix from Infor (ex Sage)</option>
<option value="1234">Netsuite</option>
<option value="1048">Spreadsheets / None</option>
<option value="1054">Custom/In-house</option>
<option value="2059">Other</option>
<option value="1842">Workbooks</option>
<option value="1504">Access Database</option>
<option value="1051">ACT!</option>
<option value="2157">Aderant CRM</option>
<option value="2491">Base CRM</option>
<option value="2100">Bluecube CRM</option>
<option value="1512">Capsule</option>
<option value="2489">CallPro</option>
<option value="2199">CCH Central</option>
<option value="2397">Charitylog</option>
<option value="2409">CiviCRM</option>
<option value="2092">Clarity</option>
<option value="1507">ClickHQ</option>
<option value="2263">Dealmaker (TAS Group)</option>
<option value="1509">Exact</option>
<option value="2099">FileMaker</option>
<option value="2076">FileVision</option>
<option value="2135">Frontline Data</option>
<option value="1043">Goldmine</option>
<option value="1046">Goldvision</option>
<option value="1505">Highrise</option>
<option value="2137">iMIS</option>
<option value="1840">Industry Specific</option>
<option value="1841">Insightly CRM</option>
<option value="2122">Intouch CRM</option>
<option value="1928">IRIS Integra</option>
<option value="2305">Lagan CRM</option>
<option value="2271">Lexis Nexis InterAction</option>
<option value="1237">Link CRM</option>
<option value="1930">Logical Office</option>
<option value="1044">Maximizer</option>
<option value="2505">Membrain</option>
<option value="2513">Method CRM</option>
<option value="1049">MS Outlook BCM</option>
<option value="1236">Myoffice.net</option>
<option value="1537">NetAge</option>
<option value="2146">Nimble CRM</option>
<option value="1983">Officetalk</option>
<option value="2369">OOMI CRM</option>
<option value="1610">Open CRM</option>
<option value="2200">Only Considering Workbooks</option>
<option value="2182">Onyx CRM</option>
<option value="2106">Open Market</option>
<option value="1510">Oracle</option>
<option value="2327">Orchard CRM</option>
<option value="2179">Pivotal CRM</option>
<option value="2156">Progress CRM</option>
<option value="1984">Prospectsoft</option>
<option value="2155">ProTech</option>
<option value="2102">Raisers Edge - Blackbaud</option>
<option value="1047">Really Simple Systems</option>
<option value="2139">Sage - Edition Unknown</option>
<option value="1206">Salesforce.com - Enterprise Edition</option>
<option value="1041">Salesforce.com - Group Edition</option>
<option value="1205">Salesforce.com - Professional Edition</option>
<option value="2121">Salesnet CRM</option>
<option value="1541">SalesNexus</option>
<option value="1444">Salesorder</option>
<option value="1511">SAP</option>
<option value="2181">Saratoga CRM</option>
<option value="2493">Second CRM</option>
<option value="2201">Siebel</option>
<option value="1929">Shuttleworth</option>
<option value="2105">Spirit</option>
<option value="1985">Superoffiice</option>
<option value="1648">Team Scope</option>
<option value="2097">Technique MIS</option>
<option value="2138">ThankQ</option>
<option value="1229">Tracker RMS</option>
<option value="1513">TSG MRM</option>
<option value="2272">Union Square CRM</option>
<option value="1839">VTiger</option>
<option value="2159">Webchise</option>
<option value="1050">WebCRM</option>
<option value="1045">Zoho</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="submit" id="submit" type="image" src="http://www.workbooks.com/sites/default/files/image/button.png" width="170" height="40" value="Sign up" class="loudbutton" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$.extend($.validator.messages, {
min: 'Please choose an option.'
});
$("#customer_signup_form").validate({
submitHandler: function(form) {
$('#submit').attr('disabled', 'disabled').attr('value', 'Registering. Please wait...');
document.body.style.cursor = "progress";
form.submit();
}
});
$("#customer_first_name").focus();
});
//]]>
</script>
</div>
</div>
</div>
</body>
</html>

In your workbooks_signup_form.css css file you have the .loudbutton declaration with...
background-color: rgb(79, 111, 163);
Remove that and the overflow color is removed.

you have used this:
.loudbutton, .quietbutton {
color: #FFF;
border-radius: 0.5em;
background-color: #4F6FA3;
border: medium none;
padding: 7px;
margin: 10px 0px;
float: right;
}
remove background-color: #4F6FA3; and you are good to go.

Related

Save input Chrome extension

so I am creating an html where the user has to input data that is going to be stored and then auto pasted (autofill). So I am trying to store it (function at top) and it stores it (seen in the link of the live server) but it wont write it down for a check to see that it works but it don't.
And can you give me a tip how to paste it after ?
PS: Doing this in a popup that's why its so unordered.
And when I normaly open the html in live or as a extension the button appears, but when uploading this html it doesn't.
(ADD)= Searched for errors and saw one when pressing button, recorded it and took a screenshot +
Thank you in advance.
enter image description here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dropdown.css">
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<head>
<script>
var
function save()
{
var first_name = document.getElementById("first name").value;
var last_name = document.getElementById("last name").value;
var email = document.getElementById("email").value;
var street_address = document.getElementById("street address").value;
var house_number = document.getElementById("house number").value;
var apartment = document.getElementById("apartment").value;
var postal_code = document.getElementById("postal code").value;
var city = document.getElementById("city").value;
document.write("Data: " + first_name + last_name + email + street_address + house_number +apartment +postal_code + city);
}
</script>
</head>
<form action="" method="GET">
<div>
<label for="first name" >First Name</label>
<input id="first name" type="first name" name='first name' placeholder="Enter your first name here" required>
</div>
<div>
<label for="last name">Last Name</label>
<input id="last name" type="last name" name='last name' placeholder="Enter your last name here" required>
</div>
E-Mail
<div>
<label for="email"></label>
<input id="email" type="email" name='email' placeholder="Enter your E-Mail here" required>
</div>
<div>
<label for="street address">Street Address</label>
<input id="street address" type="street address" name='street address' placeholder="Enter your address here" required>
</div>
<div>
<label for="house number">House Number</label>
<input id="house number" type="house number " name='house number' placeholder="Enter yout house number here" >
<div>
<div>
<label for="apartment">Apartment (optional)</label>
<input id="apartment" type="apartment" name='apartment' placeholder="Enter apartment (optional)">
</div>
<div>
<label for="postal code">Postal code</label>
<input type="postal code" name='postal code' placeholder="Enter your postal code here" required>
</div>
City
<div>
<label for="city"></label>
<input id="city" type="city" name='city' placeholder="Enter your city here" required>
</div>
<!---Dropdown Country-->
<body>
Country
<div>
<select name="" id="input" onchange="lel()" class="dropdown">
<option value="albania">Albania</option>
<option value="algeria">Algeria</option>
<option value="andorra">Andorra</option>
<option value="austria">Austria</option>
<option value="bahrain">Bahrain</option>
<option value="bangladesh">Bangladesh</option>
<option value="belarus">Belarus</option>
<option value="begium">Belgium</option>
<option value="bhutan">Bhutan</option>
<option value="bosnia">Bosnia & Heryegovina</option>
<option value="brunei">Brunei</option>
<option value="bulgaria">Bulgaria</option>
<option value="cambodia">Cambodia</option>
<option value="canada">Canada</option>
<option value="china">China</option>
<option value="croatia">Croatia</option>
<option value="cyperus">Cyperus</option>
<option value="czechia">Czechia</option>
<option value="denmark">Denmark</option>
<option value="egypt">Egypt</option>
<option value="estonia">Estonia</option>
<option value="faroe">Faroe Islands</option>
<option value="finland">Finland</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="gibraltar">Gibraltar</option>
<option value="greece">Greece</option>
<option value="greenland">Greenland</option>
<option value="hong kong sar china">Hong Kong SAR China</option>
<option value="hungary">Hungary</option>
<option value="iceland">Iceland</option>
<option value="india">India</option>
<option value="indonesia">Indonesia</option>
<option value="ireland">Ireland</option>
<option value="israel">Israel</option>
<option value="italy">Italy</option>
<option value="japan">Japan</option>
<option value="jordan">Jordan</option>
<option value="kuwait">Kuwait</option>
<option value="laos">Laos</option>
<option value="latvia">Latvia</option>
<option value="lebanon">Lebanon</option>
<option value="libya">Libya</option>
<option value="liechtenstein">Liechtenstein</option>
<option value="lithuania">Lithuania</option>
<option value="luxembourg">Luxembourg</option>
<option value="macao sar china">Macao SAR China</option>
<option value="malaysia">Malaysia</option>
<option value="malta">Malta</option>
<option value="mexico">Mexico</option>
<option value="moldova">Moldova</option>
<option value="monaco">Monaco</option>
<option value="montenegro">Montenegro</option>
<option value="morocco">Morocco</option>
<option value="myanmar (burma)">Myanmar (Burma(</option>
<option value="nepal">Nepal</option>
<option value="netherlands">Netherlands</option>
<option value="new zealand">New Zealand</option>
<option value="north macedonia">North Macedonia</option>
<option value="norway">Norway</option>
<option value="omanm">Oman</option>
<option value="parkistan">Parkistan</option>
<option value="palestinian territories">Palestinian Territories</option>
<option value="poland">Poland</option>
<option value="portugal">Portugal</option>
<option value="qatar">Qatar</option>
<option value="romania">Romania</option>
<option value="saudi arabia">Saudi Arabia</option>
<option value="singapore">Singapore</option>
<option value="slovakia">Slovakia</option>
<option value="slovenia">Slovenia</option>
<option value="south korea">South Korea</option>
<option value="spain">Spain</option>
<option value="sri lanka">Sri Lanka</option>
<option value="sweden">Sweden</option>
<option value="switzerland">Switzerland</option>
<option value="syria">Syria</option>
<option value="taiwan">Taiwan</option>
<option value="thailand">Thailand</option>
<option value="timor-leste">Timor-Leste</option>
<option value="tunisia">Tunisia</option>
<option value="turkey">Turkey</option>
<option value="ukraine">Ukraine</option>
<option value="united arab emirates">United Arab Emirates</option>
<option value="united kingdom">United Kingdom</option>
<option value="united states">United States</option>
<option value="vatican city">Vatican City</option>
<option value="vietnam">Vietnam</option>
<option value="yemen">Yemen</option>
</select>
</div>
<!---Dropdown Country-->
State/Province
<div>
<select name="" id="shis" class="dropdowntwo">
<option value="none" disabled selected value>None</option>
<optgroup value="united states states"label="--------------United States--------------">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="American Samoa">American Samoa</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="Arkansas">Arkansas</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Federated States of Micronesia">Federated States of Micronesia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Guam">Guam</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Lowa">Lowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nepraska">Nepraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakato">North Dakato</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Palau">Palau</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Islands">Rhode Islands</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Armed Forces Americas">Armed Forces Americas</option>
<option value="Armed Forces Europe">Armed Forces Europe</option>
<option value="Armed Forces Pacific">Armed Forces Pacific</option>
</optgroup>
<optgroup value="canada states"label="------------------Canada------------------">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</div>
<p><button class="button" onclick="save()">Save</button></p>
</body>
</form>
</html>

HTML Input Required not working as expected

This is supposed to be the template for a sign-up page that I am currently working on. I am having trouble with <input required> not being validated when the user submits the form - I would expect it to tell me that I have to fill out certain fields in order to submit / proceed, but this does not seem to be the case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form method="post">
<label for="f_name">First Name:</label>
<input id="f_name" type="text" placeholder="First Name" name="first_n" required>
<label for="l_name">Last Name:</label>
<input id="l_name" type="text" placeholder="Last Name" name="last_n" required>
</form>
<form method="post">
<label for="m_f_o">Male</label>
<input id="m_f_o" type="radio" name="gender">
<label for="f_m_o">Female</label>
<input id="f_m_o" type="radio" name="gender">
<label for="o_m_f">Other</label>
<input id="o_m_f" type="radio" name="gender">
</form>
<form method="post">
<label for="email">Email:</label>
<input id="email" type="email" placeholder="your email" name="email" required>
<label for="password">Password:</label>
<input id="password" type="password" placeholder="password" name="password" pattern=".{5,10}" required>
</form>
<form method="post">
<label>Birthday</label>
<select name="month" required>
<option value="Month">Month</option>
<option value="jan">Jan</option>
<option value="feb">Feb</option>
<option value="mar">Mar</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="aug">Aug</option>
<option value="sept">Sept</option>
<option value="oct">Oct</option>
<option value="nov">Nov</option>
<option value="dec">Dec</option>
</select>
<select name="day" required>
<option value="day">Day</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year" required>
<option value="year">Year</option>
<option value="1990">1999</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</form>
<form method="post">
<label>I agree to the</label>
terms and conditions
<input type="checkbox" required>
</form>
<form method="post">
<input type="submit">
</form>
</body>
</html>
There are two problems:
First, ensure that your inputs are closed.
Secondly, you have multiple forms, one for each collection of inputs. You need a single form and the submit button needs to be included inside it.
Here's an example:
<form method="post">
<label for="f_name">First Name:</label>
<input id="f_name" type="text" placeholder="First Name" name="first_n" required />
<label for="m_f_o">Male</label>
<input id="m_f_o" type="radio" name="gender" />
<input type="submit" />
</form>

Table Rows have different input lengths

I am trying to layout a table (I know a grid might work better but do not feel like changing everything for the 3rd time). I have 2 identical cells but one is smaller than the other. No matter what I do, whether I create a smaller class, or make them equal one will always be bigger than another
.grid td.normal{
width: 100px;
}
.grid td.small{
width: 50px;
}
<tr>
<!--Section Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="section.php" method="get" class="form-labels-on-toptabletry">
<label><span>Section:</span><br></label>
<select name="section">
<option value="">Select</option>
<option value="0">Unknown</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
</select><br>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Township Search-->
<td colspan="1" class="normal">
<form name="township" action="township.php" method="get" class="form-labels-on-toptabletry">
<label><span>Township:</span><br>
<input type="text" name="township"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--TD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="r" action="td.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Township Direction:</span><br>
<select name="td">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="N">North</option>
<option value="S">South</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
<!--Range Search-->
<td colspan="1" class="small">
<form name="range" action="range.php" method="get" class="form-labels-on-toptabletry">
<label>
<span>Range:</span><br>
<input type="text" name="range"><br>
<input type="submit" value="Search" class="form-buttons">
</label>
</form>
</td>
<!--RD Search-->
<td colspan="1" class="normal">
<div class="form-row">
<form name="rd" action="rd.php" method="get" class="form-labels-on-toptabletry">
<label><span>Range Direction:</span><br>
<select name="rd">
<option value="">Select</option>
<option value="0">Unknown</option>
<option value="W">West</option>
<option value="E">East</option>
</select><br>
</label>
<input type="submit" value="Search" class="form-buttons">
</form>
</div>
</td>
</tr>
On the snippet it looks ok but here is what it looks like when I test it:
Different Size Inputs
Does anybody have any idea why this would be happening?

How can I get the background image in full screen

I am just new to html ,and was deigning this page, I want the image to completely cover the background but rather it is showing something like this (pic given).
What should i change so that I can get a complete view (image covering the back ground completely.)
Here is my code.
Thanks in advance.
.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Imperial</title>
<meta name="author" content="">
<meta name="description" content="">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--[if IE 7]><link href="css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style1.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- Contact Form CSS files -->
<link type="text/css" href="./js-disclaimer/basic.css" rel="stylesheet" media="screen">
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='js-disclaimer/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type="text/javascript" src="./js-disclaimer/jquery.js"></script>
<script type="text/javascript" src="./js-disclaimer/jquery.simplemodal.js"></script>
<script type="text/javascript" src="./js-disclaimer/basic.js"></script>
</head>
<body id="Body" style="zoom: 1;" class="cover">
<i class="icon-eye-close icon-2x"></i>
<div class="wrappers" style="background-image:url(./img/waw.jpg);">
<!-- home -->
<div class="main">
<!---- menu area--->
<div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
<ul>
<li class="current">Home</li>
<li>World above the world</li>
<li>Spaces</li>
<li>Safety & Security</li>
<!----<li>Plans</li>--->
<li>Plans</li>
<!----<li>Location</li>--->
<li>Location</li>
<li>Enquiry</li>
<li>Contact Us</li>
<br>
<br>
<li>About SD Corp.</li>
<li>ebrochure</li>
<!--<li>E-Brochure</li>-->
</ul>
</div>
<div class="content">
<div id="loader"></div>
<ul class="grid blog one-col">
<li class="enquiry" style="height:600px;">
<div class="enquiry">
<h1 style="text-align:center; margin-left:-40px; font-size:large;"><b>Fill in the spaces below</b></h1>
<form onsubmit="return validation();" action="feedback_action.asp" method="post" name="form">
<table cellspacing="5" cellpadding="0" style="margin:10px;" class="c">
<tbody><tr>
<td colspan="2"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="c">
<tbody><tr>
<td>You Are a : </td>
<td><input type="radio" value="buyer" name="youare"> Buyer</td>
<td><input type="radio" value="agent" name="youare"> Agent</td>
<td><input type="radio" value="other" name="youare"> Other</td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td><label>Name</label></td>
<td><label>Mobile</label></td>
</tr>
<tr>
<td><input type="text" size="32" name="nameinput" id="userInput" value=""></td>
<td><input type="text" size="30" name="mobileinput" id="Phone" value=""></td>
</tr>
<tr>
<td>Address</td>
<td>Landline</td>
</tr>
<tr>
<td rowspan="3"><textarea name="addressinput" cols="26" rows="4"></textarea></td>
<td><input type="text" name="landlineinput" size="30"></td>
</tr>
<tr>
<td>E-mail</td>
</tr>
<tr>
<td><input type="text" name="emailinput" style="" height="20"></td>
</tr>
<tr>
<td>Country</td>
<td>City</td>
</tr>
<tr>
<td><select name="countryinput">
<option selected="selected" value="">Select Country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea</option>
<option value="Korea, Republic of">Korea</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Taiwan, Province of China">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">British</option>
<option value="Virgin Islands, U.S.">U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select></td>
<td><input type="text" name="cityinput" size="20"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" id="submit" value="Submit" name="submit"></td>
</tr>
</tbody></table>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer" id="basic-modal" style="color:#000000;">&copy SDCPL 2013. All Rights Reserved | Disclaimer</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Disclaimer</h3>
<p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
<!--LOAD SCRIPTS-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</body>
</html>
For CSS3, add this style to your page using background-size:cover;:
<style>
html {
background: url(YOUR IMAGE URL HERE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE 9 and under*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
</style>
If necessary, here is a non-css3 solution:
CSS:
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
width: auto;
height: auto;
}
Body HTML:
<div class="bg">
<img src="YOUR IMAGE URL HERE" alt="">
</div>
Use it like this
body{
background:url("img_flwr.gif");
background-size:100% 100%;
background-repeat:no-repeat;
}
I would recommend using a library like jquery.backstretch.js which can be found here: http://srobbin.com/jquery-plugins/backstretch/
Just take for bg properties:
.bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('image.jpg');
background-size: cover;
background-position: center;

How to prevent newline/line break within a <form></form>?

This is my code.
<form name="publish">
<?php include 'location.selector.html'; ?>
<input type="submit" value="submit"/> </form>
When displayed, there is a newline preceding the
submit
button, how to eliminate this newline/line break?
The HTML content of location.selector.html is
<table><tr><td>都道府県を選択してください</td>
<td>市区町村を選択してください</td></tr>
<tr><td align="center">
<SELECT name="pref" onChange="changePref(true)">
<OPTION VALUE="99">全国
<OPTION VALUE="0">北海道
<OPTION VALUE="1">青森県
<OPTION VALUE="2">岩手県
<OPTION VALUE="3">宮城県
<OPTION VALUE="4">秋田県
<OPTION VALUE="5">山形県
<OPTION VALUE="6">福島県
<OPTION VALUE="7">茨城県
<OPTION VALUE="8">栃木県
<OPTION VALUE="9">群馬県
<OPTION VALUE="10">埼玉県
<OPTION VALUE="11">千葉県
<OPTION VALUE="12">東京都
<OPTION VALUE="13">神奈川県
<OPTION VALUE="14">新潟県
<OPTION VALUE="15">富山県
<OPTION VALUE="16">石川県
<OPTION VALUE="17">福井県
<OPTION VALUE="18">山梨県
<OPTION VALUE="19">長野県
<OPTION VALUE="20">岐阜県
<OPTION VALUE="21">静岡県
<OPTION VALUE="22">愛知県
<OPTION VALUE="23">三重県
<OPTION VALUE="24">滋賀県
<OPTION VALUE="25">京都府
<OPTION VALUE="26">大阪府
<OPTION VALUE="27">兵庫県
<OPTION VALUE="28">奈良県
<OPTION VALUE="29">和歌山県
<OPTION VALUE="30">鳥取県
<OPTION VALUE="31">島根県
<OPTION VALUE="32">岡山県
<OPTION VALUE="33">広島県
<OPTION VALUE="34">山口県
<OPTION VALUE="35">徳島県
<OPTION VALUE="36">香川県
<OPTION VALUE="37">愛媛県
<OPTION VALUE="38">高知県
<OPTION VALUE="39">福岡県
<OPTION VALUE="40">佐賀県
<OPTION VALUE="41">長崎県
<OPTION VALUE="42">熊本県
<OPTION VALUE="43">大分県
<OPTION VALUE="44">宮崎県
<OPTION VALUE="45">鹿児島県
<OPTION VALUE="46">沖縄県
</SELECT></td><td align="center">
<SELECT NAME="city">
<OPTION VALUE="99" SELECTED>全地区
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT></td></tr></table>
Include the table before your form tag or use try using below CSS:
<style type="text/css">
form, table {
display:inline;
margin:0px;
padding:0px;
}
</style>
It's been awhile since I did CSS but try the
display:inline
style.