Problemas con position()

[juanleonardo]

Buenas tardes, tengo un pequeño problema:

tengo el siguiente codigo para mostrar uuna validacion al lado de un textbox.

<form>
<table align="center">
<tr>
<td>Usuario</td>
<td>
<input type="text" name="login" id="login" class="campo" tabindex="1" />
<div id="error1" class="errores">Ingrese Login</div>
</td>

tengo tambien el codigo jquery q me meustra el mensaje al hacer click en un boton

$(document).ready(function(){

function ValidarLogin()
{
var login = $("#login").val();
var widthLogin = $("#login").width();

var positionLogin = $("#login").offset();

$("#error1").css('margin-left', widthLogin + 32);
$("#error1").css('margin-top', positionLogin .Top);

el codigo CSS (q tambien usa para esto) es el siguiente:

.errores{
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.3);
background: #F93;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
color: #fff;
display:none;
font-size: 12px;
padding: 10px;
position: absolute;
}

El problema es cuando usa el metodo position(), (para obtener la posicion del textbox y asi saber en que posicion poner el mensaje) y hago positionLogin .Top me muestra desde donde esta ubicado hacia abajo y no desde el top de la pagina.

Con jquery intento hacer es, ubicar al lado del textbox la validacion.

Espero haber sido claro.

Saludos y muchas gracias.

[NueveReinas]

Quizá esto te ayude: http://jsfiddle.net/ujrxywsj/

Código HTML:

<div class="contenedor_general">
    <div class="test">
        <span id="resultado">AAAAA</span>
    </div>
</div>
 

Código CSS:

body {
    font-family:Verdana, Arial;
    /*margin:0;*/
}
 
.contenedor_general {
    max-width:400px;
    padding-top:42px; /* Cambia este valor y comprueba el resultado */
    padding-bottom:100px;
    background:#CCC;
}
 
.test {
    max-width:400px;
    padding-top:20px;
    padding-bottom:20px;
    background:#999;
    text-align:center;
}
 

Código Javascript:

var test = $(".test");
var offset = test.offset();
var tope = offset.top;
 
$("#resultado").html('Distancia desde el tope: '+tope+'px');
 

En el CSS verás que hay un comentario respecto al margen del cuerpo, y es que los JSFIDDLE automáticamente añaden un margen de aprox. 8 píxeles.

Pero sí, marca la distancia correcta aunque el padding sea de 42px (42 + 8 = 50).



Saludos.