Databases
StackOverflow2013
Postsdbo
POForm Input Won't Take Percentage Padding
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm Input Won't Take Percentage Padding
    text
    copied!<p>My form inputs display properly if pixel padding is used, but using a percentage padding for left and right breaks it. I can't figure out why.</p> <p>It works in Safari, broken in Firefox 3.5.3 OSX.</p> <p>The problem is that when I use a percentage padding, the padding all breaks (hence why the input value is not aligned nicely.)</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;% padding&lt;/title&gt; &lt;style&gt; html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; border:none; } div.content { width:50%; margin:0 auto; background:#eee; } div.content form { width:100%; } div.content form ul { list-style:none; margin:0; width:100%; } div.content form li { position:relative; margin-bottom:20px; height:64px; width:100%; /* width is declared */ } div.content form li label { position:absolute; width:auto; left:0; top:0; line-height:20px; } div.content form li .text { position:absolute; bottom:0; left:0; padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */ width:96%; font-size:14px; outline:1px solid #ccc; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="content"&gt; &lt;form action="" method="get"&gt; &lt;ul&gt; &lt;li&gt; &lt;label for="text"&gt;Input&lt;/label&gt; &lt;input type="text" class="text" name="text" value="" /&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="text"&gt;Input&lt;/label&gt; &lt;input type="text" class="text" name="text" value="" /&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="text"&gt;Input&lt;/label&gt; &lt;input type="text" class="text" name="text" value="" /&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/form&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