Databases
StackOverflow2013
Postsdbo
POCSS form input outcome as expected, however when viewed on i-OS device - is completely out of alignment, why is this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS form input outcome as expected, however when viewed on i-OS device - is completely out of alignment, why is this?
    text
    copied!<p>Keeping this short and sweet; my issue is as follows: When I view my form in Internet Explorer, Firefox or Google Chrome; the form is displayed as expected.</p> <p>When I view this form on an ipad (or ipod touch...) the form is not displaying as it should, it becomes 'staggered' across whatever container you place it within (fixed width or auto) and looks completely hideous to say the least! The issue I am having is illustrated in the images linked below.</p> <p>If someone has some suggestions I could try to force the forms to align correctly within the I-OS platform, that would be grand!</p> <p><strong>P.S. -</strong> <em>When viewed on an Android-based Sony Ericsson Xperia, the form is displayed correctly!</em></p> <p><strong>Images of issue</strong> (see images in link below here -> <a href="http://imgur.com/a/1aB2j" rel="nofollow">http://imgur.com/a/1aB2j</a> &lt;- for images)</p> <p><strong>HTML used</strong></p> <pre><code>&lt;p&gt;&lt;b&gt;Add a user:&lt;/b&gt;&lt;/p&gt; &lt;form action='adminmanageuser.php?addconf=yes' method='post'&gt; &lt;input type='checkbox' checked name='unamecheckbox'&gt; &lt;br&gt;&lt;br&gt;&lt;div style='width: auto; text-align:left; display: block;'&gt; &lt;label class='adduser' for='access'&gt;User Type:&lt;/label&gt;&lt;select name='access'&gt; &lt;option value='0'&gt;-- -- -- -- -- -- -- -- -- -- --&lt;/option&gt; &lt;option value='2'&gt;Student&lt;/option&gt; &lt;option value='3'&gt;Teacher&lt;/option&gt; &lt;option value='5'&gt;Admin&lt;/option&gt; &lt;/select&gt;&lt;br&gt; &lt;label class='adduser' for='access'&gt;Forename:&lt;/label&gt;&lt;input type='text' name='fname'&gt;&lt;br&gt; &lt;label class='adduser' for='sname'&gt;Surname:&lt;/label&gt;&lt;input type='text' name='sname'&gt;&lt;br&gt; &lt;label class='adduser' for='uname'&gt;Username:&lt;/label&gt;&lt;input type='text' name='uname'&lt;br&gt; &lt;label class='adduser' for='pass'&gt;Password:&lt;/label&gt;&lt;input type='text' name='pass'&gt;&lt;br&gt; &lt;label class='adduser' for='year'&gt;Yeargroup:&lt;/label&gt;&lt;input type='text' name='year'&gt;&lt;br &lt;label class='adduser' for='form'&gt;Formgroup:&lt;/label&gt;&lt;input type='text' name='form'&gt;&lt;br &lt;input type='submit' style='margin-left: 9em;' value='Add User'&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p><strong>CSS used</strong></p> <pre><code>label.adduser { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; width: 7em; float: left; text-align: right; margin-right: 0.5em; margin-top: 0.2em; margin-bottom: 0.2em; display: block } input[type='text'] { padding: 2px; border-color: gray; border-width: 2px; box-shadow: none font-size: 15px; border-radius: 5px; -moz-border-radius: 5px; width:12em; } </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