Problema con float y clear

0le0 · #1 (**permalink**) 20/08/2009, 12:04

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
/*#form1{
margin:10px auto auto; 
padding:5px 250px 5px 10px; 
width:280px;
overflow: hidden;
*/
}
</style>
<script type="text/javascript">
 
var upload_number = 2;
function addNode() {
    var d = document.createElement("div");
    var file = document.createElement("input");
    file.setAttribute("type", "file");
    file.setAttribute("name", "attachment"+upload_number);
    d.appendChild(file);
    document.getElementById("moreUploads").appendChild(d);
    upload_number++;
}
 
function delNode(){
 
}
 
 
 
 
//-->
 
</script>
 
</head>
 
<body>
 
 
<h1>DOM Insert and Append</h1>
 
 
<form id="form1" name="form1" action="" method="post" enctype="multipart/form-data" >
 <div style=" float:left;">
 <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /></div>
 
<div id="moreUploadsLink" style="display:block; float:left;  "><a href="javascript:addNode();">Agregar otro archivo</a></div>
<div id="moreUploads" style="clear:both"></div>
<input type="submit" />
</form>
 
</body>
</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!!!

alexk · #2 (**permalink**) 20/08/2009, 13:58

mmm puedes dar la URL del problema?... solo asi me cuesta dibujarlo en mi mente... y como los elementos se crean dinamicamente (segun entendi) en el codigo que pegaste no estan (supongo) perdona pero solo asi yo no puedo jeje... chao y suerte!...

PD: Agrega un "display:block;" a los elementos que aparecen a ver k pasa

0le0 · #3 (**permalink**) 20/08/2009, 15:10

No puedo pegar url por que no tengo servidor para subirlos salvo el de mí trabajo...
Y como estamos detrás de un firewall pues nos bloquean todo entonces no puedo subir ni una imagen.

Tratare de explicar mejor:
Al cargar la página solo hay un elemento para subir archivos y si tu quieres subir más pues das click en el link que te crea un nuevo nodo.

Tal vez puedas probar esta págiana: http://htmledit.squarefree.com/, es un editor en línea.

kseso? · #4 (**permalink**) 20/08/2009, 15:33

Hola 0le0
Al reproducir tu código, a mi el segundo imput se coloca ya bajo el primero (bajo= en la vertical)
Lo que he podido ver es que hay 1 ó 2 px de distancia en la vertical entre cada uno de los imput (los bordes que aparecen con firefox en los campos de texto).
¿Supongo bien si supongo que son esos 2px los que quieres que desaparezcan?
Siendo así, deberías añadir en tus estilos lo siguiente:

Cita:

input {
font-size:13px;
height:21px;
}

Para otro tamaño tamaño de fuente tendrás que corregir la altura.

Un saludo

0le0 · #5 (**permalink**) 20/08/2009, 20:58

Aquí hay una imagen de como se ve el archivo:

Lo que esta en azul es lo que aparece con ie y si le doy click a agregar un nuevo archivo el div sube y rellena el espacio.
Como puedo evitar eso?

Y lo que esta señalado con rojo quiero que aparezca a la derecha de agregar archivo pero no lo consigo,será también confloat y clear??

kseso? · #6 (**permalink**) 21/08/2009, 05:48

¡Anda, co**! lo pillé "alverres"
¿Habré acertado ahora:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
/*#form1{
margin:10px auto auto; 
padding:5px 250px 5px 10px; 
width:280px;
overflow: hidden;
 
}*/
input {float: left;}
form .moreUploads {float: left;}
form a {float: left;, margin-bottom: 5px;}
.corte {display:block; float: none; clear: both;}
</style>
<script type="text/javascript"> 
var upload_number = 2;
function addNode() {
    var d = document.createElement("div");
    var file = document.createElement("input");
    file.setAttribute("type", "file");
    file.setAttribute("name", "attachment"+upload_number);
    d.appendChild(file);
    document.getElementById("moreUploads").appendChild(d);
    upload_number++;
}
 
function delNode(){
 
}
//-->
</script>
</head>
<body>
<h1>DOM Insert and Append</h1> 
<form id="form1" name="form1" action="" method="post" enctype="multipart/form-data" >
 <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploadsLink" style="float:left;">
<a href="javascript:addNode();">Agregar otro archivo</a>
</div>
<div id="moreUploads">
</div>
<div class="corte"></div>
<input type="submit" />
</form>
</body>
</html>

Pero lo que no tenemos en el código que pusiste al abrir el tema es el "eliminar archivo".
Ya dirás, 0le0