Form Input Won't Take Percentage Padding
css, css-selectors, html
Solution
There is an open (at time of writing) bug on this here:
https://bugzilla.mozilla.org/show_bug.cgi?id=527459
UPDATE: The bug is finally fixed! 2012-11-18 15:35 PST
Problem
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. It works in Safari, broken in Firefox 3.5.3 OSX. The problem is that when I use a percentage padding, the padding all breaks (hence why the input value is not aligned nicely.) ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>% padding</title> <style> 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; } </style> </head> <body> <div class="content"> <form action="" method="get"> <ul> <li> <label for="text">Input</label> <input type="text" class="text" name="text" value="" /> </li> <li> <label for="text">Input</label> <input type="text" class="text" name="text" value="" /> </li> <li> <label for="text">Input</label> <input type="text" class="text" name="text" value="" /> </li> </ul> </form> </div> </body> </form> ```