Cita:
Iniciado por ananda 
La class "div.formu" no sé si está bien que la ponga porqué vi que lo pusieron en el tutorial de w3schools y pensé que debía ponerlo.
Pensaste que debías? Veo que no tienes claro el manejo de selectores en CSS, es bastante básico te recomiendo que revises
Selectores Básicos (para este caso "Selector de clase") y no estria mal estudies todos los capítulos de
CSS básico y luego
CSS avanzado.
En cuanto a
div.formu, pues el selector no es incorrecto y la explicación esta el link que dejé lineas más arriba.
Cita:
Iniciado por ananda El efecto que tiene que hacer es el siguiente: Aparecer el formulario 1 con el botón de "Editar información" arriba (eso lo conseguí dejándolo suelto con ayuda de los margins pero en mozilla se ve distinto) y que al darle a dicho botón, el formulario 1 desaparezca y aparezca el formulario 2 justo en el mismo sitio y con el botón de "Editar información" en el mismo sitio que el anterior, ya que es un Toggle y al darle volvería a aparecer el formulario 1.
1.
Quieres el botón arriba de los formularios siempre.
2.
Y "aparecer" los formularios debajo del botón siempre.
El siguiente ejemplo parte de tu código original. Cambios: 'subí' el div que contiene el botón para que se ubique antes de los div de los formularios. Agregué una nueva clase ".caja" con la propiedad
display y su valor inline-block.
Código CSS:
Ver original<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){
$(".editar").click(function(){
$(".editar").animate({width:414},"slow",function(){
$(".formulario").toggle(function(){
$(".formu").slideToggle("slow");
});
});
});
});
</script>
<style>
.formulario{
background:#E5EECC;
border:solid 1px green;
/*margin-top:-461px;
margin-left:1000px;*/
padding:5px 5px 5px 30px;
text-align:left;
width:377px
}
div.formu{
background:#E5EECC;
border:solid 1px green;
display:none;
/*margin:0px;
margin-top:-461px;
margin-left:1000px;*/
padding:5px 5px 5px 30px;
text-align:left;
width:377px
}
.editar{
background-color:#22B14C;
border:1px solid green;
color:white;
cursor:pointer;
font-weight:bold;
height:30px;
width:140px
}
.caja{display:inline-block}
</style>
</head>
<body>
<div class="caja">
<div id="edicion" class="caja">
<input type="button" id="editar" class="editar" value="Editar información">
</div>
<div class="formulario">
<form method="post">
<!-- elementos de formulario -->
</form>
</div>
<div class="formu" >
<form method="post">
<!-- elementos de formulario -->
</form>
</div>
</div>
</body>
</html>
Lo que he hecho con el display, en class .caja, es que ocupe solo el espacio necesario. Ya que tu maquetación y la disposición de los demás elementos que puedan contener a este fragmento de código que nos haz compartido pueden estar ocasionando que tu botón se muestre en distinto lugar al que inicialmente le haz asignado y puede que a su vez haya que modificar no solo las reglas de este fragmento par solucionar tu problema.