Campos dinámicos salen en sitio distinto según navegador

[aventis]

Saludos.

He seguido este tutorial para crear campos dinámicamente:

http://www.telefonica.net/web2/blas-mar/crear.html

Código:

num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num; // 3
  fi.appendChild(contenedor); // 4

  ele = document.createElement('input'); // 5
  ele.type = 'file'; // 6
  ele.name = 'fil'+num; // 6
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = 'Borrar'; // 8
  ele.name = 'div'+num; // 8
  ele.onclick = function () {borrar(this.name)} // 9
  contenedor.appendChild(ele); // 7
}

Con Explorer me crea los campos justo debajo, que es lo que yo quiero.
Pero con Opera o con Safari el campo se crea a la derecha y un poco por debajo. Después, al seguir pulsando, sí se crean debajo los campos. En Firefox no sé, por que no tengo aquí.

Quería que alguien me dijese una solución para que se crease el campo siempre debajo.

Lo siento si es una tontería, apenas llevo 1 mes manejando java.

Muchas gracias.

[emprear]

Con tu script los campos se crean uno debajo del otro en todos los navegadores, vas a encontrar pequeñas diferencias en el tamaño y posicionamiento de los botones, fundamentalmente en IE, pero ya es un problema de css, podés corregirlo con

Código CSS:

input{
margin: 1px;
height: 25px;
}
 

Según la versión de ie, quizás necesites alguna corrección extra

Además 3 cosas, corregi algunas cosas de tu script
declara las variables siempre
fi = document.getElementById('fiel'); // 1
x
var fi = document.getElementById('fiel'); // 1
el parámetro obj, no parece cumplir ninguna función
Lo que estás aprendiendo desde hace un mes es "javascript" , no Java, tenelo presente para evitar confusiones futuras

Saludos

[IsaBelM]

mejor aún, usa cloneNode()

[aventis]

Iniciado por emprear

Con tu script los campos se crean uno debajo del otro en todos los navegadores, vas a encontrar pequeñas diferencias en el tamaño y posicionamiento de los botones, fundamentalmente en IE, pero ya es un problema de css, podés corregirlo con

Código CSS:

input{
margin: 1px;
height: 25px;
}
 

Según la versión de ie, quizás necesites alguna corrección extra

Además 3 cosas, corregi algunas cosas de tu script
declara las variables siempre
fi = document.getElementById('fiel'); // 1
x
var fi = document.getElementById('fiel'); // 1
el parámetro obj, no parece cumplir ninguna función
Lo que estás aprendiendo desde hace un mes es "javascript" , no Java, tenelo presente para evitar confusiones futuras

Saludos

Gracias por tus consejos, emprear.

El problema no se soluciona con el código css que me has dado.

Puedes ver mi página, que he colgado ayer mismo:

http://www.foroformulacion.com/valoracion-de-formulas/andalucia.html

He conseguido que me salgan los campos debajo en Opera agrandando el input con el contenido, pero en el Safari de mi iPhone me siguen saliendo al "sudeste" del botón. Con IE 8 y con el que trae el Windows 7 se ve bien.
Quizá se te ocurra otra solución.

Iniciado por IsaBelM

mejor aún, usa [URL="https://developer.mozilla.org/en/DOM/Node.cloneNode"]cloneNode()[/URL]

Me temo que empezar desde cero adaptando mi script a esto me llevaría mucho tiempo. Pero me lo apunto para un futuro. Muchas gracias.

[emprear]

Obviamente no se soluciona porque tampoco se tenía el código que estás usando, el problema se presenta en Firefox/Chrome y Safari
para corregirlo tenes que poner
<table style="clear: both;">
a la tabla que sigue al botón añadir, pero eso solo sería un parche, tu html tiene más de 50 errores, muchos de ellos, graves.
Con respecto al Iphone, vaya a saber, no tenfo un Iphone

Saludos

[aventis]

Iniciado por emprear

Obviamente no se soluciona porque tampoco se tenía el código que estás usando, el problema se presenta en Firefox/Chrome y Safari
para corregirlo tenes que poner
<table style="clear: both;">
a la tabla que sigue al botón añadir, pero eso solo sería un parche, tu html tiene más de 50 errores, muchos de ellos, graves.
Con respecto al Iphone, vaya a saber, no tenfo un Iphone

Saludos

Gracias por contestar. Al aplicar el estilo se soluciona el problema.

Lo de la tabla esa, creo recordar que la puse porque arreglaba el problema en IE. No fue capricho mío.

En cuanto o lo de los "50 errores"... Gracias, pero es como si me dices que me voy a morir pero no me dices de qué...

No te digo que me digas todos, pero dime "argo" para que pueda revisar mis conceptos equivocados.

[IsaBelM]

mas que limpiar el float en la tabla, que no tiene ningún sentido, es limpiarlo en el <br>

<br style="clear: both;">

pero tampoco tiene lógica, ya que, por qué está flotado el botón??. quita el float left al botón

en cuanto a los errores, puedes verlos aquí

ya por último, usar cloneNode es mucho mas sencillo de lo que te piensas. se trata de crear el bloque (oculto) y los controles, algo de css y ya está

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<script type="text/javascript">
var i = 1;
function fnc() {
var d = document.getElementsByTagName('div')[0];
var bloque = d.cloneNode(true);
bloque.id = 'div' + i++;
document.getElementById('fiel').appendChild(bloque );
}

</script>
<style type="text/css">
#div0 {display:none;}
.bloqueStyle {width:500px;}
</style>
</head>
<body>

<div id="div0" class="bloqueStyle">
<select name="sel[]">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<input type="text" value="" name="txt[]" />
<input type="button" value="eliminar" onclick="fnc2()" />
</div>

<form method="post" action="algo.php">
<fieldset id="fiel">
<input type="button" value="Crear" onclick="fnc()" />
</fieldset>
</form>

</body>
</html>

[aventis]

Iniciado por IsaBelM

mas que limpiar el float en la tabla, que no tiene ningún sentido, es limpiarlo en el <br>

pero tampoco tiene lógica, ya que, por qué está flotado el botón??. quita el float left al botón

en cuanto a los errores, puedes verlos [URL="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.foroformulacion.com%2Fv aloracion-de-formulas%2Fandalucia.html&charset=%28detect+automa tically%29&doctype=Inline&group=0"]aquí[/URL]

ya por último, usar cloneNode es mucho mas sencillo de lo que te piensas. se trata de crear el bloque (oculto) y los controles, algo de css y ya está

Tremendo ese enlace IsabelM... 8-/
Gracias de nuevo.

El float ese del botón...pffff ni idea...lo acabo de ver, vendrá seguro de cuando empecé el diseño con frontpage, que ya me he dado que cuenta de que más que ayudar da por culo. Ahora Notepad+ y punto.

Vaaale, miraré lo del cloneNode