Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/08/2009, 12:04
0le0
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 15 años, 5 meses
Puntos: 0
Problema con float y clear

Saludos a todos en el foro.
Estoy peleandome con un estilo y me creerán que me cuesta más crear un estilo que programar,diablos

Tengo un formulario para subir archivos el cual tiene un link para dar la opción de subir más de un archivo, crando un nuevo nodo.
Hasta aquí todo bien pero llegué a los problemas con ie y firefox , pues cuando creo un nuevo nodo no lo inserta debajo del primer campo file.
Es decir deja un espacio y agrega el nuevo nodo y después de agregar unos 4 nodos más rellena el espacio dejado.

Quería saber si alguien sabe como puedo manejar esto??

Aquí mi código:

Código css:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. /*#form1{
  8. margin:10px auto auto;
  9. padding:5px 250px 5px 10px;
  10. width:280px;
  11. overflow: hidden;
  12. */
  13. }
  14. </style>
  15. <script type="text/javascript">
  16.  
  17. var upload_number = 2;
  18. function addNode() {
  19.     var d = document.createElement("div");
  20.     var file = document.createElement("input");
  21.     file.setAttribute("type", "file");
  22.     file.setAttribute("name", "attachment"+upload_number);
  23.     d.appendChild(file);
  24.     document.getElementById("moreUploads").appendChild(d);
  25.     upload_number++;
  26. }
  27.  
  28. function delNode(){
  29.  
  30. }
  31.  
  32.  
  33.  
  34.  
  35. //-->
  36.  
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.  
  43.  
  44. <h1>DOM Insert and Append</h1>
  45.  
  46.  
  47. <form id="form1" name="form1" action="" method="post" enctype="multipart/form-data" >
  48.  <div style=" float:left;">
  49.  <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /></div>
  50.  
  51. <div id="moreUploadsLink" style="display:block; float:left;  "><a href="javascript:addNode();">Agregar otro archivo</a></div>
  52. <div id="moreUploads" style="clear:both"></div>
  53. <input type="submit" />
  54. </form>
  55.  
  56. </body>
  57. </html>

Yo quiero que aparezca debajo del primer nodo pero no lo hace.
Como referencia trabaja algo parecido a subir archivos como gmail.

Ojalá alguien me pueda ayudar!!!