formulario de entrada no tomará Porcentaje Relleno

Mi pantalla de entradas de formulario correctamente si se utiliza el relleno de píxeles, pero utilizando un acolchado porcentaje de izquierda y derecha que se rompe. No puedo entender por qué.formulario de entrada no tomará Porcentaje Relleno

funciona en Safari, Firefox 3.5.3 roto en OSX.

El problema es que cuando se utiliza un relleno de porcentaje, el relleno de todos los saltos (de ahí el valor de entrada no se ajusta muy bien.)

<!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>

Fuente

2009-09-18 Anonymous

Funciona para IE y cromo. Solo Firefox no parece funcionar para mí.

La única manera que conozco para arreglar eso en Firefox es así (simplemente envolviendo el cuadro de texto dentro de un div con el relleno correcto)

<!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; 
     } 
     div.content form li .textbox { 
      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; 
      border:1px solid #ccc; 
      background-color:white; 
     } 

     .textbox { 
      width:100%; 
      border:solid 1px white; 
     } 
    </style> 
</head> 
<body> 
    <div class="content"> 
    <form action="" method="get"> 
     <ul> 
      <li> 
       <label for="text">Input</label> 
       <div class='text'> 
        <input type="text" class="textbox" name="text" value="" /> 
       </div> 
      </li> 
      <li> 
       <label for="text">Input</label> 
       <div class='text'> 
        <input type="text" class="textbox" name="text" value="" /> 
       </div> 
      </li> 
      <li> 
       <label for="text">Input</label> 
       <div class='text'> 
        <input type="text" class="textbox" name="text" value="" /> 
       </div> 
      </li> 

     </ul> 
    </form> 
    </div> 
</body>

Fuente

2009-09-18 21:18:16

Ah, y http://doctype.com es un lugar mejor para las preguntas de formato HTML, ya que está diseñado específicamente para eso. –

Desafortunadamente, tipo de documento está demasiado mal diseñado para mí de manejar. No parece "diseñado específicamente", simplemente diferente sin ningún motivo. – arbales

Hay una abierta (en el momento de escribir esto) error en esto aquí:

https://bugzilla.mozilla.org/show_bug.cgi?id=527459

ACTUALIZACIÓN: El error se fijó finalmente! 18/11/2012 15:35 PST

Fuente

2011-08-12 22:15:19

Dah, esto tiene que ser fijo :(. La gente espera votos para el tema. –

Asegúrese de que [votar] (https://bugzilla.mozilla.org/show_bug.cgi?id=716875) para el error que está bloqueando él también. –

Wow, ha sido casi 3 años y el error sigue ahí. Esperamos que se puede conseguir con el tiempo fijo. –

formulario de entrada no tomará Porcentaje Relleno

Respuesta

Cuestiones relacionadas