Databases
StackOverflow2013
Postsdbo
POCSS & Form issue - giving me strife :(
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS & Form issue - giving me strife :(
    text
    copied!<p>I have created a form and it is supposed to look like this:</p> <p><a href="http://s14.postimage.org/yoc1unp4h/Screen_Shot_2012_10_25_at_4_00_04_PM.jpg" rel="nofollow noreferrer">screenshot http://s14.postimage.org/yoc1unp4h/Screen_Shot_2012_10_25_at_4_00_04_PM.jpg</a></p> <p>Can someone please help me edit my code to look like the above image and explain what I was doing wrong? A JSFiddle would be amazing so I can understand how to fix it.</p> <p>The zip label and field needs to be brought up and the submit button pushed to the right, yet it's not working for me :(</p> <p>My attempt is as follows:</p> <p><a href="http://jsfiddle.net/2w6mK/" rel="nofollow noreferrer">http://jsfiddle.net/2w6mK/</a></p> <p>CSS:</p> <pre><code> #form-container { width: 710px; height: 450px; padding: 20px 50px; margin: 35px 0 0 25px; } form { position: relative; margin-left: -10px; } form label { display: block; font: normal 12px/16px arial, Arial, Helvetica, sans-serif; font-weight: bold; color: #000; text-transform: uppercase; text-align: left; } form [type="text"], form [type="email"] { display: block; border: 1px solid #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 12px/14px arial, helvetica, verdana, sans-serif; width: 60%; padding: 5px 5px; margin: 5px 0; -webkit-appearance: none; } .zip { display: block; border: 1px solid #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 12px/14px arial, helvetica, verdana, sans-serif; width: 20%; padding: 5px 5px; margin: 5px 0; -webkit-appearance: none; } .dob-select { display: block; border: 1px solid #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 12px/14px arial, helvetica, verdana, sans-serif; width: 80px; height:25px; -webkit-appearance: none; overflow: hidden; background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff; float: left; margin-right: 5px; } .dob-select select { background: transparent; width: 125px; height: 25px; border: none; padding: 5px 0 0 5px; color: #cccccc; } .left { float: left; } form [type="submit"] { display: block; background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat; margin: 25px auto; width: 154px; height:57px; border: none; color: transparent; font-size: 0; float: left; } form input[type=submit]:hover { background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat; cursor: hand; cursor: pointer; } #FileUpload { position:relative; margin-top: -13px; padding-bottom: 15px; } #BrowserVisible { position: absolute; top: 0; left: 0; z-index: 1; background:url(images/btn_browse.gif) 100% 0px no-repeat; height:27px; width:390px; cursor: hand; cursor: pointer; } #FileField { display: block; margin-right: 85px; border: 1px solid #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: 12px/14px arial, helvetica, verdana, sans-serif; color: #777; width: 300px; padding: 5px 5px; -webkit-appearance: none; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="form-container"&gt; &lt;form&gt; &lt;fieldset&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input type="text" name="name"&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;label for="dob"&gt;date of birth&lt;/label&gt; &lt;div class="dob-select"&gt; &lt;select name="dob_day"&gt; &lt;option value="01"&gt;01&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="dob-select"&gt; &lt;select name="dob_month"&gt; &lt;option value="01"&gt;Jan&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="dob-select"&gt; &lt;select name="dob_year"&gt; &lt;option value="2012"&gt;2012&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;label for="zip"&gt;zip&lt;/label&gt; &lt;input type="text" class="short" name="zip"&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;label for="email"&gt;Email&lt;/label&gt; &lt;input type="email" name="email"&gt; &lt;/fieldset&gt; &lt;fieldset&gt; &lt;label for="subscribe"&gt;&lt;input type="checkbox" class="left"&gt; &lt;p class="left"&gt;Tick&lt;/p&gt;&lt;/label&gt; &lt;input type="submit" name="submit"&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload