1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with form

Discussion in 'CSS' started by Jeremy Benson, Mar 24, 2015.

0
  1. #1
    I'm trying to work out a form. This page interpolates other content based on $_GET variables but I've segregated the part I'm trying to fix here. The right column is causing one of my forms to be longer than it should be, or some other space to appear in my left column..

    I'm just trying to make a clean looking stripe form, lol.

    anyway, I'm gonna get heck for how bad this code is, but I'm here too learn :p

    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="gateway/code/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<link type="text/css" rel="stylesheet" href="gateway/css/nav.css"/>
<title>Post Ad</title>
<style>

h2{

  margin:0em;
}

#content{

    width:100%;
    overflow: hidden;
   
}

#benefitsheader{
   
    margin:0 4px 0 0;
    
}


#signupform{
   
  width:80%;

}

#postform{
   
    float:left;
    margin-left:8px;
   
}

#postform input{


margin-bottom: 8px;

}

#postform label{

margin-bottom: 8px;

}

.postinput{
   
    height:24px;

   
}

.reginput{
   
    height:24px;
    width:100%;
}

.required{

    color:red;
}

#paymentprocessingwrapper{
   
    width:80%; border:thick black solid; margin:0px auto 0px;
   
}

#paymentprocessingheaderwrapper{

height:40px; text-align:center; overflow: auto; background-color: #A0B0E0;
   
}

#paymentprocessingheaderwrapper p{

    margin-top:8px;
   
}

.4pxmarginL{
   
    margin-left:4px;
}

.4pxmarginB{

    margin-bottom:4px;
}

</style>
<script type="text/javascript">
 
$('document').ready(function(){

     document.getElementById('postbutton').onclick = function(){
    
       window.location.assign('../postad.php');
  
}
}); 
   
</script>
</head>

<body>

<!-- Top nav -->
<div id="topbar">
<p id="logo">crazyads</p>
<div class="button">
   <p><a href="postad.php">Post Ad</a></p>
  </div>
   <div class="button">
     <p><a>Search</a></p>
  </div>
<form class="navform" method="post" action="gateway/code/php/login_user.php">
<label>Username</label>
   <input type="text" name="userName"/>
   <label>Password</label>
    <input type="password" name="password" />
   <input type="submit" value="Log In"/>
   <input type="hidden" name="page" value="index"/>
</form> <p id="location">
     </p>
</div>

<!-- End of top nav -->


<!-- Content -->
<div id="content">
<!-- right column  -->
<div id="rightcolumn" style="width:14%; float:right;">
       <p id="signupheader"><b>Sign Up</b></p><br/>
      <form id="signupform" method="post" action="gateway/code/php/register_user.php">
     <label>First Name<span class="required">*</span></label><br/>
     <input class="reginput" name="firstName" type="text" required="required"/><br/>
     <label>Last Name<span class="required">*</span></label><br/>
     <input class="reginput" name="lastName" type="text" required="required"/><br/>
     <label>Username<span class="required">*</span></label><br/>
     <input class="reginput" name="userName" maxlength="16" type="text" required="required"/><br/>
     <label>Password<span class="required">*</span></label><br/>
     <input class="reginput" name="password" maxlength="18" type="password" required="required" /><br/>
     <label>Retype Password<span class="required">*</span></label><br/>
     <input class="reginput" type="password" name="password2" maxlength="18" required="required" /><br/>
     <label>Email<span class="required">*</span></label><br/>
     <input class="reginput" type="text" name="email" maxlength="40" required="required" /><br/>
     <label>Retype Email<span class="required">*</span></label><br/>
     <input class="reginput" type="text" name="email2" maxlength="40" required="required" /><br/>
     <label class="reglabel">Date of birth<span class="required">*</span></label><br/>
     <input class="reginput" type="text" placeholder="DD-MM-YY" pattern="\d{1,2}-\d{1,2}-\d{4}" name="dob" /><br/>
      <label>Province/State/Country</label><br/>
     <select class="reginput" name="userCountry" id="cityfilter"><span class="required">*</span>
      <option value="" selected="selected">--Choose--</option>
      <option disabled="disabled"></option>
      <option value="Canada" disabled="disabled"><b>Canada</b></option>
<option value="Canada-Alberta">&nbsp;&nbsp;Alberta</option>
<option value="Canada-British Columbia">&nbsp;&nbsp;British Columbia</option>
<option value="Canada-Manitoba">&nbsp;&nbsp;Manitoba</option>
<option value="Canada-New Brunswick">&nbsp;&nbsp;New Brunswick</option>
<option value="Canada-Newfoundland and Labrador">&nbsp;&nbsp;Newfoundland and Labrador</option>
<option value="Canada-Northwest Territories">&nbsp;&nbsp;Northwest Territories</option>
<option value="Canada-Nova Scotia">&nbsp;&nbsp;Nova Scotia</option>
<option value="Canada-Ontario">&nbsp;&nbsp;Ontario</option>
<option value="Canada-Quebec">&nbsp;&nbsp;Quebec</option>
<option value="Canada-Saskatchewan">&nbsp;&nbsp;Saskatchewan</option>
<option value="Canada-Yukon">&nbsp;&nbsp;Yukon</option>
<option disabled="disabled"></option>
        <option value="US" disabled="disabled"><b>United States</b></option>
<option value="United States-Alabama" selected="selected">&nbsp;&nbsp;Alabama</option>
<option value="United States-Alaska">&nbsp;&nbsp;Alaska</option>
<option value="United States-Arizona">&nbsp;&nbsp;Arizona</option>
<option value="United States-Arkansas">&nbsp;&nbsp;Arkansas</option>
<option value="United States-California">&nbsp;&nbsp;California</option>
<option value="United States-Colorado">&nbsp;&nbsp;Colorado</option>
<option value="United States-Connecticut">&nbsp;&nbsp;Connecticut</option>
<option value="United States-Delaware">&nbsp;&nbsp;Delaware</option>
<option value="United States-District of Columbia">&nbsp;&nbsp;District of Columbia</option>
<option value="United States-Florida">&nbsp;&nbsp;Florida</option>
<option value="United States-Georgia">&nbsp;&nbsp;Georgia</option>
<option value="United States-Hawaii">&nbsp;&nbsp;Hawaii</option>
<option value="United States-Idaho">&nbsp;&nbsp;Idaho</option>
<option value="United States-Illinois">&nbsp;&nbsp;Illinois</option>
<option value="United States-Indiana">&nbsp;&nbsp;Indiana</option>
<option value="United States-Iowa">&nbsp;&nbsp;Iowa</option>
<option value="United States-Kansas">&nbsp;&nbsp;Kansas</option>
<option value="United States-Kentucky">&nbsp;&nbsp;Kentucky</option>
<option value="United States-Louisiana">&nbsp;&nbsp;Louisiana</option>
<option value="United States-Maine">&nbsp;&nbsp;Maine</option>
<option value="United States-Maryland">&nbsp;&nbsp;Maryland</option>
<option value="United States-Massachusetts">&nbsp;&nbsp;Massachusetts</option>
<option value="United States-Michigan">&nbsp;&nbsp;Michigan</option>
<option value="United States-Minnesota">&nbsp;&nbsp;Minnesota</option>
<option value="United States-Mississippi">&nbsp;&nbsp;Mississippi</option>
<option value="United States-Missouri">&nbsp;&nbsp;Missouri</option>
<option value="United States-Montana">&nbsp;&nbsp;Montana</option>
<option value="United States-Nebraska">&nbsp;&nbsp;Nebraska</option>
<option value="United States-Nevada">&nbsp;&nbsp;Nevada</option>
<option value="United States-New Hampshire">&nbsp;&nbsp;New Hampshire</option>
<option value="United States-New Jersey">&nbsp;&nbsp;New Jersey</option>
<option value="United States-New Mexico">&nbsp;&nbsp;New Mexico</option>
<option value="United States-New York">&nbsp;&nbsp;New York</option>
<option value="United States-North Carolina">&nbsp;&nbsp;North Carolina</option>
<option value="United States-North Dakota">&nbsp;&nbsp;North Dakota</option>
<option value="United States-Ohio">&nbsp;&nbsp;Ohio</option>
<option value="United States-Oklahoma">&nbsp;&nbsp;Oklahoma</option>
<option value="United States-Oregon">&nbsp;&nbsp;Oregon</option>
<option value="United States-Pennsylvania">&nbsp;&nbsp;Pennsylvania</option>
<option value="United States-Rhode Island">&nbsp;&nbsp;Rhode Island</option>
<option value="United States-South Carolina">&nbsp;&nbsp;South Carolina</option>
<option value="United States-South Dakota">&nbsp;&nbsp;South Dakota</option>
<option value="United States-Tennessee">&nbsp;&nbsp;Tennessee</option>
<option value="United States-Texas">&nbsp;&nbsp;Texas</option>
<option value="United States-Utah">&nbsp;&nbsp;Utah</option>
<option value="United States-Bermont">&nbsp;&nbsp;Vermont</option>
<option value="United States-Birginia">&nbsp;&nbsp;Virginia</option>
<option value="United States-Washington">&nbsp;&nbsp;Washington</option>
<option value="United States-West Virginia">&nbsp;&nbsp;West Virginia</option>
<option value="United States-Wisconsin">&nbsp;&nbsp;Wisconsin</option>
<option value="United States-Wyoming">&nbsp;&nbsp;Wyoming</option>
<option disabled="disabled"></option>
        <option value="OT" disabled="disabled"><b>Other Countries</b></option>     
        <option value="Argentina" >&nbsp;&nbsp;Argentina</option>
        <option value="Australia" >&nbsp;&nbsp;Australia</option>
             <option value="Austria" >&nbsp;&nbsp;Austria</option>
            <option value="Bahrain" >&nbsp;&nbsp;Bahrain</option>
             <option value="Bangladesh" >&nbsp;&nbsp;Bangladesh</option>
             <option value="Belarus" >&nbsp;&nbsp;Belarus</option>
             <option value="Belgium" >&nbsp;&nbsp;Belgium</option>
             <option value="Belize" >&nbsp;&nbsp;Belize</option>
             <option value="Bolivia" >&nbsp;&nbsp;Bolivia</option>
             <option value="Brazil" >&nbsp;&nbsp;Brazil</option>
             <option value="Bulgaria" >&nbsp;&nbsp;Bulgaria</option>
             <option value="Cameroon" >&nbsp;&nbsp;Cameroon</option>
             <option value="Caribbean" >&nbsp;&nbsp;Caribbean</option>
             <option value="Chile" >&nbsp;&nbsp;Chile</option>
             <option value="China" >&nbsp;&nbsp;China</option>
             <option value="Colombia" >&nbsp;&nbsp;Colombia</option>
            <option value="Costa Rica" >&nbsp;&nbsp;Costa Rica</option>
            <option value="Cyprus" >&nbsp;&nbsp;Cyprus</option>
            <option value="Czech Republic" >&nbsp;&nbsp;Czech Republic</option>
             <option value="Denmark" >&nbsp;&nbsp;Denmark</option>
             <option value="Ecuador" >&nbsp;&nbsp;Ecuador</option>
             <option value="Egypt" >&nbsp;&nbsp;Egypt</option>
             <option value="El Salvador" >&nbsp;&nbsp;El Salvador</option>
             <option value="Estonia" >&nbsp;&nbsp;Estonia</option>
             <option value="Finland" >&nbsp;&nbsp;Finland</option>
             <option value="France" >&nbsp;&nbsp;France</option>
              <option value="Germany" >&nbsp;&nbsp;Germany</option>
              <option value="Greece" >&nbsp;&nbsp;Greece</option>
              <option value="Guam" >&nbsp;&nbsp;Guam</option>
              <option value="Guatemala" >&nbsp;&nbsp;Guatemala</option>
              <option value="Guyana" >&nbsp;&nbsp;Guyana</option>
              <option value="Honduras" >&nbsp;&nbsp;Honduras</option>
              <option value="Hong Kong" >&nbsp;&nbsp;Hong Kong</option>
             <option value="Hungary" >&nbsp;&nbsp;Hungary</option>
              <option value="Iceland" >&nbsp;&nbsp;Iceland</option>
             <option value="India" >&nbsp;&nbsp;India</option>
              <option value="Indonesia" >&nbsp;&nbsp;Indonesia</option>
              <option value="Iraq" >&nbsp;&nbsp;Iraq</option>
              <option value="Ireland" >&nbsp;&nbsp;Ireland</option>
              <option value="Israel" >&nbsp;&nbsp;Israel</option>
              <option value="Italy" >&nbsp;&nbsp;Italy</option>
              <option value="Ivory Coast" >&nbsp;&nbsp;Ivory Coast</option>
              <option value="Japan" >&nbsp;&nbsp;Japan</option>
              <option value="Jordan" >&nbsp;&nbsp;Jordan</option>
              <option value="Korea" >&nbsp;&nbsp;Korea</option>
              <option value="Kuwait" >&nbsp;&nbsp;Kuwait</option>
             <option value="Lebanon" >&nbsp;&nbsp;Lebanon</option>
             <option value="Lithuania" >&nbsp;&nbsp;Lithuania</option>
              <option value="Luxembourg" >&nbsp;&nbsp;Luxembourg</option>
              <option value="Malaysia" >&nbsp;&nbsp;Malaysia</option>
              <option value="Malta" >&nbsp;&nbsp;Malta</option>
              <option value="Mexico" >&nbsp;&nbsp;Mexico</option>
             <option value="Mongolia" >&nbsp;&nbsp;Mongolia</option>
              <option value="Morocco" >&nbsp;&nbsp;Morocco</option>
             <option value="Netherlands" >&nbsp;&nbsp;Netherlands</option>
              <option value="New Zealand" >&nbsp;&nbsp;New Zealand</option>
              <option value="Nicaragua" >&nbsp;&nbsp;Nicaragua</option>
              <option value="Nigeria" >&nbsp;&nbsp;Nigeria</option>
              <option value="Norway" >&nbsp;&nbsp;Norway</option>
              <option value="Oman" >&nbsp;&nbsp;Oman</option>
              <option value="Pakistan" >&nbsp;&nbsp;Pakistan</option>
              <option value="Panama" >&nbsp;&nbsp;Panama</option>
              <option value="Paraguay" >&nbsp;&nbsp;Paraguay</option>
              <option value="Peru" >&nbsp;&nbsp;Peru</option>
              <option value="Philippines" >&nbsp;&nbsp;Philippines</option>
              <option value="Poland" >&nbsp;&nbsp;Poland</option>
             <option value="Portugal" >&nbsp;&nbsp;Portugal</option>
              <option value="Qatar" >&nbsp;&nbsp;Qatar</option>
              <option value="Romania" >&nbsp;&nbsp;Romania</option>
              <option value="Russia" >&nbsp;&nbsp;Russia</option>
             <option value="Singapore" >&nbsp;&nbsp;Singapore</option>
              <option value="South Africa" >&nbsp;&nbsp;South Africa</option>
              <option value="Spain" >&nbsp;&nbsp;Spain</option>
              <option value="Suriname" >&nbsp;&nbsp;Suriname</option>
              <option value="Sweden" >&nbsp;&nbsp;Sweden</option>
              <option value="Switzerland" >&nbsp;&nbsp;Switzerland</option>
              <option value="Taiwan" >&nbsp;&nbsp;Taiwan</option>
             <option value="Thailand" >&nbsp;&nbsp;Thailand</option>
             <option value="Turkey" >&nbsp;&nbsp;Turkey</option>
              <option value="Ukraine" >&nbsp;&nbsp;Ukraine</option>
              <option value="United Arab Emirates" >&nbsp;&nbsp;United Arab Emirates</option>
              <option value="United Kingdom" >&nbsp;&nbsp;United Kingdom</option>
              <option value="Uruguay" >&nbsp;&nbsp;Uruguay</option>
              <option value="Venezuela" >&nbsp;&nbsp;Venezuela</option>
              <option value="Vietnam" >&nbsp;&nbsp;Vietnam</option>
         </select><br/>
     <input type="submit" value="register" required="required" style="height:28px; width:100%; margin-top:4px;"/><br/><br/>
  </form><br/>
   <p id="benefitsheader"><b>Benifits</b></p><br/>
  <ul id="benefitslist">
    <li>Listing store.</li>
    <li>Promoting on site</li>
    <li>Track ads easier.</li>
  </ul><br/><br/><br/>

  <!-- end of right column -->
</div>


<div id="leftcolumn" style="width:80%;">
<!-- left column  -->
<h2 style="margin:8px 0 0 8px;">Main Category</h2><br/>

<div id="paymentprocessingwrapper">
  <div id="paymentprocessingheaderwrapper">
    <p style=""><b>Payment processing</b></p>
  </div>
  <p class="4pxmargiL"><b>Overview</b></p><br/>
  <p class="4pxmarginL">Below is an overview of the listing upgrades. Feel free to change anything you'd like.
  Remember, all sales are final.</p><br/>
  <p style="margin-left:12px;"><b>Priority:</b> 1 weeks.</p>
  <p style="margin-left:12px;"><b>Sponsor:</b> 1 weeks.</p>
  <p style="margin-left:10px;"><b>Text Ad:</b> 1 weeks.</p>
  <p style="margin-left:12px;margin-top:8px;"><b>Total: </b>$1.56</p>
  <form id="payment-form" method="post" style="float:left; margin-left:8px; margin-right:8px; margin-top:8px;" action="gateway/code/php/process_listing_upgrade_payment.php">
       <label>Card Number</label><br/>
       <input class="postinput 4pxmarginB" data-stripe="number" type="text" />
       <img alt="locked_visa" src="gateway/images/payment/credit_card.png" /><br/>
       <label>Expiration month</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-month" pattern="\d{2}" placeholder="MM"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>Expiration year</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-year" pattern="\d{4}" placeholder="YYYY"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>CVC</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="cvc"/>
       <img alt="locked_visa" src="gateway/images/payment/sm_lock_32.png" /><br/>
       <br/><button type="submit" style="padding:4px; margin-top:8px;">Submit</button>
       <input type="hidden" name="feeDollars" value="1.56"/><br/><br/>
       <p id="payment-errors" class="payment-errors" style="background-color:yellow;"></p>    
       </form>
  
       <form action="gateway/code/php/process_listing.php" method="post">
   <b>Update Upgrades</b><br/>
   <label>priority time</label><br/>
   <select name="priorityTime">
      <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>        
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option>
        </select><br/>
   <label>sponsor time</label><br/>
   <select name="sponsorTime">
      <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>        
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option>  
        </select><br/>
   <label>text ad time</label><br/>
   <select name="textAdTime">
   <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>        
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option>
   </select><br/> 
   <input type="submit" value="Update"  style="margin-top:12px;"/>
  </form>    

    <div style="clear:both; margin: auto;">
       <img alt="ssl logo" src="gateway/images/payment/secure.png"/>

       <img alt="cards" src="gateway/images/payment/cards.jpg" />
       <p style="margin-left:12px; text-align:center; font-size:small;">This form is protected. No card data is stored on Crazyads. An ICS compliant third party company handles all transactions.</p>
    </div>

</div>  

<!-- end of left colum -->
</div>

<!-- end of content -->
</div>

<div id="footer">
<p><span>Home</span> |<span> About </span>|<span> Policy </span>|<span> Privacy </span>|<span> Safety </span>|<span> Contact </span>| Cazyads &copy; 2014</p>
</div>

</body>

</html>
    HTML:
    Thanks Jeremy.
     
    Jeremy Benson, Mar 24, 2015 IP
  2. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #2
    hm, I've been messing with this a bit but still not making much headway. I've just converted some margins into padding. I guess what I'm really wondering is why my right column effects my main left column

    <!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="gateway/code/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<link type="text/css" rel="stylesheet" href="gateway/css/nav.css"/>
<title>Post Ad</title>
<style>

h2{

  margin:0em;
}

#content{

    width:100%;
    overflow: hidden;
  
}

#benefitsheader{
  
    margin:0 4px 0 0;
   
}


#signupform{
  
  width:80%;

}

#postform{
  
    float:left;
    margin-left:8px;
  
}

#postform input{


margin-bottom: 8px;

}

#postform label{

margin-bottom: 8px;

}

.postinput{
  
    height:24px;

  
}

.reginput{
  
    height:24px;
    width:100%;
}

.required{

    color:red;
}

#paymentprocessingwrapper{
  
    width:80%; border:thick black solid; margin:0px auto 0px;
  
}

#paymentprocessingheaderwrapper{

height:40px; text-align:center; overflow: auto; background-color: #A0B0E0;
  
}

#paymentprocessingheaderwrapper p{

    margin-top:8px;
  
}

</style>
<script type="text/javascript">

$('document').ready(function(){

     document.getElementById('postbutton').onclick = function(){
   
       window.location.assign('../postad.php');
 
}
});
  
</script>
</head>

<body>

<!-- Top nav -->
<div id="topbar">
<p id="logo">crazyads</p>
<div class="button">
   <p><a href="postad.php">Post Ad</a></p>
  </div>
   <div class="button">
     <p><a>Search</a></p>
  </div>
<form class="navform" method="post" action="gateway/code/php/login_user.php">
<label>Username</label>
   <input type="text" name="userName"/>
   <label>Password</label>
    <input type="password" name="password" />
   <input type="submit" value="Log In"/>
   <input type="hidden" name="page" value="index"/>
</form> <p id="location">
     </p>
</div>

<!-- End of top nav -->


<!-- Content -->
<div id="content">
<!-- right column  -->
<div id="rightcolumn" style="width:14%; float:right;">
       <p id="signupheader"><b>Sign Up</b></p><br/>
      <form id="signupform" method="post" action="gateway/code/php/register_user.php">
     <label>First Name<span class="required">*</span></label><br/>
     <input class="reginput" name="firstName" type="text" required="required"/><br/>
     <label>Last Name<span class="required">*</span></label><br/>
     <input class="reginput" name="lastName" type="text" required="required"/><br/>
     <label>Username<span class="required">*</span></label><br/>
     <input class="reginput" name="userName" maxlength="16" type="text" required="required"/><br/>
     <label>Password<span class="required">*</span></label><br/>
     <input class="reginput" name="password" maxlength="18" type="password" required="required" /><br/>
     <label>Retype Password<span class="required">*</span></label><br/>
     <input class="reginput" type="password" name="password2" maxlength="18" required="required" /><br/>
     <label>Email<span class="required">*</span></label><br/>
     <input class="reginput" type="text" name="email" maxlength="40" required="required" /><br/>
     <label>Retype Email<span class="required">*</span></label><br/>
     <input class="reginput" type="text" name="email2" maxlength="40" required="required" /><br/>
     <label class="reglabel">Date of birth<span class="required">*</span></label><br/>
     <input class="reginput" type="text" placeholder="DD-MM-YY" pattern="\d{1,2}-\d{1,2}-\d{4}" name="dob" /><br/>
      <label>Province/State/Country</label><br/>
     <select class="reginput" name="userCountry" id="cityfilter"><span class="required">*</span>
      <option value="" selected="selected">--Choose--</option>
      <option disabled="disabled"></option>
      <option value="Canada" disabled="disabled"><b>Canada</b></option>
<option value="Canada-Alberta">&nbsp;&nbsp;Alberta</option>
<option value="Canada-British Columbia">&nbsp;&nbsp;British Columbia</option>
<option value="Canada-Manitoba">&nbsp;&nbsp;Manitoba</option>
<option value="Canada-New Brunswick">&nbsp;&nbsp;New Brunswick</option>
<option value="Canada-Newfoundland and Labrador">&nbsp;&nbsp;Newfoundland and Labrador</option>
<option value="Canada-Northwest Territories">&nbsp;&nbsp;Northwest Territories</option>
<option value="Canada-Nova Scotia">&nbsp;&nbsp;Nova Scotia</option>
<option value="Canada-Ontario">&nbsp;&nbsp;Ontario</option>
<option value="Canada-Quebec">&nbsp;&nbsp;Quebec</option>
<option value="Canada-Saskatchewan">&nbsp;&nbsp;Saskatchewan</option>
<option value="Canada-Yukon">&nbsp;&nbsp;Yukon</option>
<option disabled="disabled"></option>
        <option value="US" disabled="disabled"><b>United States</b></option>
<option value="United States-Alabama" selected="selected">&nbsp;&nbsp;Alabama</option>
<option value="United States-Alaska">&nbsp;&nbsp;Alaska</option>
<option value="United States-Arizona">&nbsp;&nbsp;Arizona</option>
<option value="United States-Arkansas">&nbsp;&nbsp;Arkansas</option>
<option value="United States-California">&nbsp;&nbsp;California</option>
<option value="United States-Colorado">&nbsp;&nbsp;Colorado</option>
<option value="United States-Connecticut">&nbsp;&nbsp;Connecticut</option>
<option value="United States-Delaware">&nbsp;&nbsp;Delaware</option>
<option value="United States-District of Columbia">&nbsp;&nbsp;District of Columbia</option>
<option value="United States-Florida">&nbsp;&nbsp;Florida</option>
<option value="United States-Georgia">&nbsp;&nbsp;Georgia</option>
<option value="United States-Hawaii">&nbsp;&nbsp;Hawaii</option>
<option value="United States-Idaho">&nbsp;&nbsp;Idaho</option>
<option value="United States-Illinois">&nbsp;&nbsp;Illinois</option>
<option value="United States-Indiana">&nbsp;&nbsp;Indiana</option>
<option value="United States-Iowa">&nbsp;&nbsp;Iowa</option>
<option value="United States-Kansas">&nbsp;&nbsp;Kansas</option>
<option value="United States-Kentucky">&nbsp;&nbsp;Kentucky</option>
<option value="United States-Louisiana">&nbsp;&nbsp;Louisiana</option>
<option value="United States-Maine">&nbsp;&nbsp;Maine</option>
<option value="United States-Maryland">&nbsp;&nbsp;Maryland</option>
<option value="United States-Massachusetts">&nbsp;&nbsp;Massachusetts</option>
<option value="United States-Michigan">&nbsp;&nbsp;Michigan</option>
<option value="United States-Minnesota">&nbsp;&nbsp;Minnesota</option>
<option value="United States-Mississippi">&nbsp;&nbsp;Mississippi</option>
<option value="United States-Missouri">&nbsp;&nbsp;Missouri</option>
<option value="United States-Montana">&nbsp;&nbsp;Montana</option>
<option value="United States-Nebraska">&nbsp;&nbsp;Nebraska</option>
<option value="United States-Nevada">&nbsp;&nbsp;Nevada</option>
<option value="United States-New Hampshire">&nbsp;&nbsp;New Hampshire</option>
<option value="United States-New Jersey">&nbsp;&nbsp;New Jersey</option>
<option value="United States-New Mexico">&nbsp;&nbsp;New Mexico</option>
<option value="United States-New York">&nbsp;&nbsp;New York</option>
<option value="United States-North Carolina">&nbsp;&nbsp;North Carolina</option>
<option value="United States-North Dakota">&nbsp;&nbsp;North Dakota</option>
<option value="United States-Ohio">&nbsp;&nbsp;Ohio</option>
<option value="United States-Oklahoma">&nbsp;&nbsp;Oklahoma</option>
<option value="United States-Oregon">&nbsp;&nbsp;Oregon</option>
<option value="United States-Pennsylvania">&nbsp;&nbsp;Pennsylvania</option>
<option value="United States-Rhode Island">&nbsp;&nbsp;Rhode Island</option>
<option value="United States-South Carolina">&nbsp;&nbsp;South Carolina</option>
<option value="United States-South Dakota">&nbsp;&nbsp;South Dakota</option>
<option value="United States-Tennessee">&nbsp;&nbsp;Tennessee</option>
<option value="United States-Texas">&nbsp;&nbsp;Texas</option>
<option value="United States-Utah">&nbsp;&nbsp;Utah</option>
<option value="United States-Bermont">&nbsp;&nbsp;Vermont</option>
<option value="United States-Birginia">&nbsp;&nbsp;Virginia</option>
<option value="United States-Washington">&nbsp;&nbsp;Washington</option>
<option value="United States-West Virginia">&nbsp;&nbsp;West Virginia</option>
<option value="United States-Wisconsin">&nbsp;&nbsp;Wisconsin</option>
<option value="United States-Wyoming">&nbsp;&nbsp;Wyoming</option>
<option disabled="disabled"></option>
        <option value="OT" disabled="disabled"><b>Other Countries</b></option>    
        <option value="Argentina" >&nbsp;&nbsp;Argentina</option>
        <option value="Australia" >&nbsp;&nbsp;Australia</option>
             <option value="Austria" >&nbsp;&nbsp;Austria</option>
            <option value="Bahrain" >&nbsp;&nbsp;Bahrain</option>
             <option value="Bangladesh" >&nbsp;&nbsp;Bangladesh</option>
             <option value="Belarus" >&nbsp;&nbsp;Belarus</option>
             <option value="Belgium" >&nbsp;&nbsp;Belgium</option>
             <option value="Belize" >&nbsp;&nbsp;Belize</option>
             <option value="Bolivia" >&nbsp;&nbsp;Bolivia</option>
             <option value="Brazil" >&nbsp;&nbsp;Brazil</option>
             <option value="Bulgaria" >&nbsp;&nbsp;Bulgaria</option>
             <option value="Cameroon" >&nbsp;&nbsp;Cameroon</option>
             <option value="Caribbean" >&nbsp;&nbsp;Caribbean</option>
             <option value="Chile" >&nbsp;&nbsp;Chile</option>
             <option value="China" >&nbsp;&nbsp;China</option>
             <option value="Colombia" >&nbsp;&nbsp;Colombia</option>
            <option value="Costa Rica" >&nbsp;&nbsp;Costa Rica</option>
            <option value="Cyprus" >&nbsp;&nbsp;Cyprus</option>
            <option value="Czech Republic" >&nbsp;&nbsp;Czech Republic</option>
             <option value="Denmark" >&nbsp;&nbsp;Denmark</option>
             <option value="Ecuador" >&nbsp;&nbsp;Ecuador</option>
             <option value="Egypt" >&nbsp;&nbsp;Egypt</option>
             <option value="El Salvador" >&nbsp;&nbsp;El Salvador</option>
             <option value="Estonia" >&nbsp;&nbsp;Estonia</option>
             <option value="Finland" >&nbsp;&nbsp;Finland</option>
             <option value="France" >&nbsp;&nbsp;France</option>
              <option value="Germany" >&nbsp;&nbsp;Germany</option>
              <option value="Greece" >&nbsp;&nbsp;Greece</option>
              <option value="Guam" >&nbsp;&nbsp;Guam</option>
              <option value="Guatemala" >&nbsp;&nbsp;Guatemala</option>
              <option value="Guyana" >&nbsp;&nbsp;Guyana</option>
              <option value="Honduras" >&nbsp;&nbsp;Honduras</option>
              <option value="Hong Kong" >&nbsp;&nbsp;Hong Kong</option>
             <option value="Hungary" >&nbsp;&nbsp;Hungary</option>
              <option value="Iceland" >&nbsp;&nbsp;Iceland</option>
             <option value="India" >&nbsp;&nbsp;India</option>
              <option value="Indonesia" >&nbsp;&nbsp;Indonesia</option>
              <option value="Iraq" >&nbsp;&nbsp;Iraq</option>
              <option value="Ireland" >&nbsp;&nbsp;Ireland</option>
              <option value="Israel" >&nbsp;&nbsp;Israel</option>
              <option value="Italy" >&nbsp;&nbsp;Italy</option>
              <option value="Ivory Coast" >&nbsp;&nbsp;Ivory Coast</option>
              <option value="Japan" >&nbsp;&nbsp;Japan</option>
              <option value="Jordan" >&nbsp;&nbsp;Jordan</option>
              <option value="Korea" >&nbsp;&nbsp;Korea</option>
              <option value="Kuwait" >&nbsp;&nbsp;Kuwait</option>
             <option value="Lebanon" >&nbsp;&nbsp;Lebanon</option>
             <option value="Lithuania" >&nbsp;&nbsp;Lithuania</option>
              <option value="Luxembourg" >&nbsp;&nbsp;Luxembourg</option>
              <option value="Malaysia" >&nbsp;&nbsp;Malaysia</option>
              <option value="Malta" >&nbsp;&nbsp;Malta</option>
              <option value="Mexico" >&nbsp;&nbsp;Mexico</option>
             <option value="Mongolia" >&nbsp;&nbsp;Mongolia</option>
              <option value="Morocco" >&nbsp;&nbsp;Morocco</option>
             <option value="Netherlands" >&nbsp;&nbsp;Netherlands</option>
              <option value="New Zealand" >&nbsp;&nbsp;New Zealand</option>
              <option value="Nicaragua" >&nbsp;&nbsp;Nicaragua</option>
              <option value="Nigeria" >&nbsp;&nbsp;Nigeria</option>
              <option value="Norway" >&nbsp;&nbsp;Norway</option>
              <option value="Oman" >&nbsp;&nbsp;Oman</option>
              <option value="Pakistan" >&nbsp;&nbsp;Pakistan</option>
              <option value="Panama" >&nbsp;&nbsp;Panama</option>
              <option value="Paraguay" >&nbsp;&nbsp;Paraguay</option>
              <option value="Peru" >&nbsp;&nbsp;Peru</option>
              <option value="Philippines" >&nbsp;&nbsp;Philippines</option>
              <option value="Poland" >&nbsp;&nbsp;Poland</option>
             <option value="Portugal" >&nbsp;&nbsp;Portugal</option>
              <option value="Qatar" >&nbsp;&nbsp;Qatar</option>
              <option value="Romania" >&nbsp;&nbsp;Romania</option>
              <option value="Russia" >&nbsp;&nbsp;Russia</option>
             <option value="Singapore" >&nbsp;&nbsp;Singapore</option>
              <option value="South Africa" >&nbsp;&nbsp;South Africa</option>
              <option value="Spain" >&nbsp;&nbsp;Spain</option>
              <option value="Suriname" >&nbsp;&nbsp;Suriname</option>
              <option value="Sweden" >&nbsp;&nbsp;Sweden</option>
              <option value="Switzerland" >&nbsp;&nbsp;Switzerland</option>
              <option value="Taiwan" >&nbsp;&nbsp;Taiwan</option>
             <option value="Thailand" >&nbsp;&nbsp;Thailand</option>
             <option value="Turkey" >&nbsp;&nbsp;Turkey</option>
              <option value="Ukraine" >&nbsp;&nbsp;Ukraine</option>
              <option value="United Arab Emirates" >&nbsp;&nbsp;United Arab Emirates</option>
              <option value="United Kingdom" >&nbsp;&nbsp;United Kingdom</option>
              <option value="Uruguay" >&nbsp;&nbsp;Uruguay</option>
              <option value="Venezuela" >&nbsp;&nbsp;Venezuela</option>
              <option value="Vietnam" >&nbsp;&nbsp;Vietnam</option>
         </select><br/>
     <input type="submit" value="register" required="required" style="height:28px; width:100%; margin-top:8px;"/><br/><br/>
  </form><br/>
   <p id="benefitsheader"><b>Benifits</b></p><br/>
  <ul id="benefitslist">
    <li>Listing store.</li>
    <li>Promoting on site</li>
    <li>Track ads easier.</li>
  </ul><br/><br/><br/>

  <!-- end of right column -->
</div>


<div id="leftcolumn" style="width:80%;">
<!-- left column  -->
<h2 style="margin:8px 0 0 8px;">Main Category</h2><br/>

<div id="paymentprocessingwrapper">
  <div id="paymentprocessingheaderwrapper">
    <p style=""><b>Payment processing</b></p>
  </div>
  <p style="padding:4px;"><b>Overview</b></p><br/>
  <p style="padding:4px;">Below is an overview of the listing upgrades. Feel free to change anything you'd like.
  Remember, all sales are final.</p><br/>
  <p style="padding-left:12px;"><b>Priority:</b> 1 weeks.</p>
  <p style="padding-left:12px;"><b>Sponsor:</b> 1 weeks.</p>
  <p style="padding-left:12px;"><b>Text Ad:</b> 1 weeks.</p>
  <p style="padding-left:12px; padding-top:8px;"><b>Total: </b>$1.56</p>
  <form id="payment-form" method="post" style="float:left; padding-left:8px; padding-right:8px; padding-top:8px;" action="gateway/code/php/process_listing_upgrade_payment.php">
       <label>Card Number</label><br/>
       <input class="postinput 4pxmarginB" data-stripe="number" type="text" />
       <img alt="locked_visa" src="gateway/images/payment/credit_card.png" /><br/>
       <label>Expiration month</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-month" pattern="\d{2}" placeholder="MM"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>Expiration year</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="exp-year" pattern="\d{4}" placeholder="YYYY"/>
       <img alt="locked_visa" src="gateway/images/payment/calendar.png" /><br/>
       <label>CVC</label><br/>
       <input class="postinput 4pxmarginB" type="text" data-stripe="cvc"/>
       <img alt="locked_visa" src="gateway/images/payment/sm_lock_32.png" /><br/>
       <br/><button type="submit" style="padding:4px; margin-top:8px;">Submit</button>
       <input type="hidden" name="feeDollars" value="1.56"/><br/><br/>
       <p id="payment-errors" class="payment-errors" style="background-color:yellow;"></p>   
       </form>
 
       <form action="gateway/code/php/process_listing.php" method="post">
   <b>Update Upgrades</b><br/>
   <label>priority time</label><br/>
   <select name="priorityTime">
      <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>       
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option>
        </select><br/>
   <label>sponsor time</label><br/>
   <select name="sponsorTime">
      <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>       
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option> 
        </select><br/>
   <label>text ad time</label><br/>
   <select name="textAdTime">
   <option value="0" selected="selected">--</option>
    <option value="1" selected="selected">1 week ($0.52)</option>
           <option value="2">2 week ($0.62)</option>
           <option value="3">3 week ($0.92)</option>
           <option value="4">4 week ($1.22)</option>
           <option value="5">5 weeks ($1.50)</option>       
           <option value="6">6 weeks ($1.80)</option>
           <option value="7">7 weeks ($2.10)</option>
           <option value="8">8 weeks ($2.40)</option>
           <option value="9">9 weeks ($2.70)</option>
           <option value="10">10 weeks ($3.00)</option>
           <option value="11">11 weeks ($3.30)</option>
           <option value="12">12 weeks ($3.60)</option>
           <option value="13">13 weeks ($3.90)</option>
           <option value="14">14 weeks ($4.20)</option>
           <option value="15">15 weeks ($4.50)</option>
           <option value="16">16 weeks ($4.80)</option>
           <option value="17">17 weeks ($5.10)</option>
           <option value="18">18 weeks ($5.40)</option>
           <option value="19">19 weeks ($5.70)</option>
           <option value="20">20 weeks ($6.00)</option>
           <option value="21">21 weeks ($6.30)</option>
           <option value="22">22 weeks ($6.60)</option>
           <option value="23">23 weeks ($6.90)</option>
           <option value="24">24 weeks ($7.20)</option>
           <option value="25">25 weeks ($7.50)</option>
           <option value="26">26 weeks ($7.80)</option>
           <option value="27">27 weeks ($8.10)</option>
           <option value="28">28 weeks ($8.40)</option>
           <option value="29">29 weeks ($8.70)</option>
           <option value="30">30 weeks ($9.00)</option>
           <option value="31">31 weeks ($9.30)</option>
           <option value="32">32 weeks ($9.60)</option>
           <option value="33">33 weeks ($9.90)</option>
           <option value="34">34 weeks ($10.20)</option>
           <option value="35">35 weeks ($10.50)</option>
           <option value="36">36 weeks ($10.80)</option>
           <option value="37">37 weeks ($11.10)</option>
           <option value="38">38 weeks ($11.40)</option>
           <option value="39">39 weeks ($11.70)</option>
           <option value="40">40 weeks ($12.00)</option>
           <option value="41">41 weeks ($12.30)</option>
           <option value="42">42 weeks ($12.60)</option>
           <option value="43">43 weeks ($12.90)</option>
           <option value="44">44 weeks ($13.20)</option>
           <option value="45">45 weeks ($13.50)</option>
           <option value="46">46 weeks ($13.80)</option>
           <option value="47">47 weeks ($14.10)</option>
           <option value="48">48 weeks ($14.40)</option>
           <option value="49">49 weeks ($14.70)</option>
           <option value="50">50 weeks ($15.00)</option>
           <option value="51">51 weeks ($15.30)</option>
           <option value="52">52 weeks ($15.60)</option>
   </select><br/>
   <input type="submit" value="Update"  style="margin-top:12px;"/>
  </form>   

    <div style="clear:both; margin: auto;">
       <img alt="ssl logo" src="gateway/images/payment/secure.png"/>

       <img alt="cards" src="gateway/images/payment/cards.jpg" />
       <p style="margin-left:12px; text-align:center; font-size:small;">This form is protected. No card data is stored on Crazyads. An ICS compliant third party company handles all transactions.</p>
    </div>

</div> 

<!-- end of left colum -->
</div>

<!-- end of content -->
</div>

<div id="footer">
<p><span>Home</span> |<span> About </span>|<span> Policy </span>|<span> Privacy </span>|<span> Safety </span>|<span> Contact </span>| Cazyads &copy; 2014</p>
</div>

</body>

</html>
    HTML:
     
    Jeremy Benson, Mar 24, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well... first off if I had that many <option> on a site, I'd probably be sucking on the end of a barrel contemplating pulling the trigger; as I'd sooner eat a bullet than deploy that. This probably stems from the fact that as a USER of websites every time I come across garbage like that all I can think is "FOR **** SAKE JUST LET ME TYPE IT IN!!! -- that is NOT good usability!!!

    Though your gibberish markup around it probably isn't helping... since what makes one word a paragraph... or the mess of P+span on text that is NOT a grammatical paragraph in the footer doing a UL's job... lack of fieldsets, invalid tags inside OPTION (which by the spec can ONLY contain CDATA),

    Of course that jquery-tardery BS pissing all over the form with some sort of popup, be one the second thing I'd swing a massive axe at like a second rate Gimli, son of Glóin.

    Was wondering about that from your post about the server side code; you REALLY might want to forget this train wreck of painfully agonizing to use SELECT garbage and server-side dicking around, and just let people type the blasted values in. You've got 10k of code JUST for a select -- who the **** wants to USE THAT?!?

    As a USER of websites, stuff like that just makes me wonder if the developer is off with Alice talking to the smoking caterpiller on the magic mushroom. Think about it, how in the blue blazes is that USEFUL or USABLE?
     
    deathshadow, Mar 24, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    @deathshadow - while I don't really appreciate never-ending selects myself, it's not really that hard to select it and then type whatever you want to reach - if one allows users to type in themselves, you'll have to have some sort of autocomplete available, if you want to have secondary selects, or use it for... mostly anything. Given that I've seen at least 14 ways of writing "USA" in a form, it gets tedious very quickly. Why it's hard-coded into the form, on the other hand, I've no idea.
     
    PoPSiCLe, Mar 25, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Assuming what you want to reach doesn't have non-breaking spaces in front of it... or that they're not in logical or alphabetical order and you happen to be using FF which ignores the specification to try and force bad selects to be usable...

    The MOST you could convince me to put on a site for a select would be country... and even then I'd be hesitant to do it just because of size... you say:

    Maybe it's because autocomplete pisses me off quite often overriding what I'm trying to type, but... WHY do you "have to have" it? For *** sake if someone can't type where they're from they probably shouldn't be using a computer in the first damned place.

    If mid-seizure I can blow out a post on these forums using the puffer stick, people with keyboards and touch-screens have no such excuse.

    Also seems pointless client side since you have to replicate it again server-side... but I know, client side validation is 'hot and trendy' -- who cares if most implementations don't gracefully degrade, are actually harder to use, and generally consume more bandwidth than just re-sending the form when the user screws up... or at least WOULD consume more bandwidth than a resend if people would bother learning how to leverage cache, practice separation of presentation from content, and stop wasting 50 to 100k of markup and 500k of CSS+JS on doing 10 to 15k of markup and 48k or less of CSS' job.

    damn, I'm really in boots to asses mode lately. Wonder if it's the Keppra.
     
    deathshadow, Mar 26, 2015 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Because people can't write. Period. Nothing new. And if you're doing something with the inputs, it's VERY hard to do that if you can expect 15 different ways of writing one country's name. That's where the autocomplete / suggestions come in. If you don't have a select, but still need the client to type things a certain way, your best bet is to have suggestions pop up when a user types something.
    Client side evaluation is good in that you don't have to submit the form to get a reply in case of bad data - it takes longer to reload the page, regardless of cache etc. Depends on what is on the page, of ourse, but inline evaluation looks smoother, gives instant feedback and provides an easier (to users) way of correcting. It's not really hard to make it deprecate properly either, since any sane dev will have checks server-side as well, and return the page with errors shown if something is amiss.
     
    PoPSiCLe, Mar 26, 2015 IP
  7. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #7
    Agree with Popsicle. You can't trust users to type in countries, cities, or provinces. For one hey could abbreviate any of them. Then there's the issue of miss spelling. Will they type in St. Stephens or saint Stephens, or even misspell it as Sant Stephens... You just can't trust users with it when it comes to having listings you can find....

    Besides, this is the same type of thing backpack does and they're around 170m annually.

    My site has good usability.

    pick main category, sub category, country, province, city, post.
    :p
     
    Jeremy Benson, Mar 26, 2015 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Did you intentionally mistype that post to prove the point? :D

    I think it would come down to usage scenario, but this is another of those things that if you do it on a website you are probably costing yourself visitors who hit the dropdown and end up going "Oh **** this!" and bounce. I know I do that every time I come to a website where all they want is a birthday or year; "Screw this" and then go find some unofficial site without that crap.

    See 99%+ of official websites for video games. Aka "screw this, what's PC Gamer or IGN have to say about it."

    Unless it's something that you are forcing people to use in-house, it's going to cost you conversions.

    ... and even in-house; a few years ago I was brought in to consult on why an in-house crapplet that replaced one I wrote for proofing the OCR scans of college applications was increasing the rejection rate and taking 5 times longer for the temp workers to process/verify.

    The reason for the slowdown was they switched from radio buttons to selects, and from some text fields to selects. The increase in rejection rate was that some selects didn't cover valid options -- most specifically empty/none.

    I already had a dislike for selects as a user, but didn't quite see why it was resulting in as bad a problem as it was. That's when I went to look it up and learned about "false simplicity".

    Selects are a STUNNING example of false simplicity and why as a rule if you have more than a dozen or so OPTION and/or need the VALUE attribute different from the content of the tag, you're doing something wrong that WILL cost you time and conversions.

    Note, that was one of my MANY cases of coming out of retirement to drag clients kicking and screaming back to what worked from some new kid framework bullshit mated to art-faygelah "design" idiocy that while very pretty and allegedly "easier to develop" delivered an experience useless to visitors. I still get WAY too many "why is this new stuff we did is not working, could you PLEASE have a look" calls. What I get for building a reputation with clients of cutting through the crap and getting down to what works efficiently instead of just crapping things together any old way. Pretty sure I took all these sleazeball shortcuts I wouldn't be getting these calls.

    Basically these massive SELECT are a cousin to #3 here:
    http://baymard.com/blog/false-simplicity

    Where four radio buttons were replaced by a slider -- but the slider only shows a description of the current value making it HARDER to use.

    Though, well... I have to ask, what's the USE scenario here? What specifically are you doing where differences like the spelling of a city name would ACTUALLY make a lick of difference? Also, are you REALLY planning on tying a simple address form to a multi-gigabyte database of all cities, states, provinces, etc?

    Though, you REALLY want to do this, here's a better idea. Use a postal code database and JUST have them enter their post/zip; reverse engineer from that instead. I've often thought that using address forms lately; "We have computers, why can't I just type in 03431 or 02360?"

    Admittedly that's easier with US addy's.
     
    Last edited: Mar 26, 2015
    deathshadow, Mar 26, 2015 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    @deathshadow
    How would you suggest doing a birthdate, for instance? There are plenty of reasons why having a birthdate on a form is mandatory, especially if it's to use that birthdate for several purposes (tax, government support etc).
    The simplest way to get a consistent value into the database is to use either a datepicker or selects - having users type in their birthdate results in a plethora of different ways of typing dates, which either means you'll have to have an equal amount of checks to get the correct value, or try to tell the user how to actually type it (which will fail, and frustrate the user). Lets take an example: "4th of July, 1915" - this can be typed as follows:
    04071915
    040715
    4715
    04/07/1915
    04.07.1915
    4.7.15
    04.07.15
    Jul 04 1915
    1915 4 jul
    july 4th 1915
    And I haven't really started on the retarded way US citizens write dates yet.

    My point is that selects works for getting consistent content from users - and even though some selects are unnecessary and long-winded, the basic premise is easy to understand, and users are used to them.
    As for the area/address-stuff, I do agree that typing a zip-code works much better.
     
    PoPSiCLe, Mar 27, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    1) I would have instructions, like say having "(DD/MM/YYYY)" in the LABEL, or maybe actually use PLACEHOLDER for what it's ACTUALLY for?

    2) I don't have this nutjob whackjob "pageloads are evil an slow" paranoia asshattery in my head; probably because if it's a form where something like that matters if you have more than 20k in ONE file being sent and/or resent if it fails server-side validation, you probably shouldn't be writing HTML in the first place.

    3) IF I were to ADD client side assistance once I have it working without scripting FIRST I would probably do input restriction... maybe a few remaps so that it's key-friendly so thinks like / and . are interchangeable. If that took more than 1k of JS, I'd say *** it and go without since again, oh noes a 20k pageload and a server request, not that :/

    Provide the user with INSTRUCTIONS using clear labels, placeholders and hinting. As I keep saying if you need that much validation asshattery and page-loads and one server request doing a server side validation -- that for security reasons you should be doing anyways and for graceful degradation should be done before you even THINK about dicking around client side -- then there's something horrifyingly wrong with how your form is built.

    In general "used to it" is a pretty lame excuse in my book. People have gotten used to websites sucking -- well that's just freaking GREAT! No wonder the web is less useful than it was fifteen years ago despite our being repeatedly handed the tools to do it better with instructions and guidelines for same.

    It's actually sad -- and I NEVER thought I'd say this --, but most of the crap people are vomiting up and calling websites right now makes me long for the days when people used Frontpage or Composer. The results were less bloated, more useful, and dare I say it... more accessible?!?

    Wow, I might have a new signature.
     
    deathshadow, Mar 27, 2015 IP
  11. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #11
    The PROBLEM is that instructions DOESN'T WORK. If you've had that little to do with users that you don't now that, I envy you. Labels with correct format, placeholders, even extra popups with instructions DOES NOT WORK - users will STILLL type shit that doesn't belong, or is the wrong format. That's why one choses to use selects or datepickers. The stuff you say with interchangeable dividers are no problem, but it sort of means that users at least TRY to fill out the form properly. One alternative would be having one input for month, one for day and one for year - I used to have that once - it limits the amount of possible errors, and is relatively easy to filter.
    What I'm wondering is why the input type="date" hasn't gotten more traction - it would be great for this, but unfortunately, the lack of support and inconsistent display makes it useless.
     
    PoPSiCLe, Mar 27, 2015 IP