posicion elementos formulario CSS

Hola que tal, paso a describir el problema que tengo al querer posicionar los elementos de un formulario sobre un div con imagen de fondo.

En dreamweaver lo veo todo bien posicionado pero en todos los navegadores el tag form se desplaza para arriba.

<a href="http://www.digital-x.com.ar/form1.png" target="_blank">imagen de como se ve en dreamweaver</a>
<a href="http://www.digital-x.com.ar/form2.png" target="_blank">imagen de como se ve en cualquier navegador</a>

Hay un div que contiene el form (#formbckg) con una imagen de fondo y luego el div #form1.

El Css de esas etiquetas es:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
#formbckg {
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(Imagenes/bckg_form.png);
&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;
&nbsp;&nbsp;&nbsp;&nbsp;background-position: left;
&nbsp;&nbsp;&nbsp;&nbsp;height: 330px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 59px;
&nbsp;&nbsp;&nbsp;&nbsp;text-align: left;
&nbsp;&nbsp;&nbsp;&nbsp;width: 455px;
}
#form1 {
&nbsp;&nbsp;&nbsp;&nbsp;width: 410px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 25px;
&nbsp;&nbsp;&nbsp;&nbsp;padding-left: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 30px;
}
<!--c2--></div><!--ec2-->

Es bastante difícil para mi detectar el error ya que en dreamweaver lo veo correctamente.
Muchas gracias a todos.

 

dreamweaver no ve lo que ve los navegadores.

tu situación es facil de arreglar... puedes darle un padding-top a la capa que contiene la imagen de fondo del formulario o

usar un margin-top en la capa que contiene al formulario en sí, no al fondo

el valor del padding o margin, tienes que ir calculandolo, prueba con uno y en base a eso vas viendo sí subirlo o bajarlo

 

Gracias pero ya lo había intentado de esa manera sin tener buenos resultados.

Si agrego un padding-top al div que tiene el fondo, la imagen de fondo se mueve para abajo.
Ahora bien, le agrego margin-top al div del formulario y en Google chrome se ve igual... es decir que pisa el borde superior de la imagen de fondo, no se mueve nada nada... En Iexplorer si baja, y en Firefox en vez de bajar solamente el formulario baja todo: fondo y formulario y éste sigue pisando la imagen de fondo. Es muy raro, nunca me habia pasado algo así.

 

Finalmente lo he solucionado.
en vez de colocar la imagen de fondo del formulario en un div que incluya al formulario, puse el fondo en el div del formulario y allí lo ubique utilizando padding. No se si es la forma correcta de hacerlo pero al previzualizarlo en Iexplorer, Google Chrome, y Firefox se ve bien en todos.

Si alguien tiene o conoce otro método para hacerlo seria bueno conocerlo ya que no se si mi manera de hacerla fue correcta, pero ha funcionado. Gracias

 

ahh, que la capa con la imagen de fondo era solo para contener la imagen del fondo, no otros elementos??

no hagas eso, siempre trata de que halla las menos capas posibles, sí con una capa puedes ordenar 2 cosas, usa solo 1 capa para ordenarlas y no dos; una para el fondo y otra para el contenido.

o sea que lo que has echo, es lo más correcto

 

La capa con la imagen de fondo era solamente para poner debajo del formulario. Pero al querer poner una capa con el fondo y luego dentro de ella el formulario tenia problemas.

La solución fue poner ese fondo dentro de la capa del formulario y luego con padding controle las etiquetas y campos del formulario para que quedaran centradas en la imagen de fondo.

Gracias por tu tiempo!