Hola Por aquí...

Si, curiosamente vengo una vez más por acá por un problema mas de diseño en CSS que de PHP, por lo cual lo posteo aquí. Resulta que tengo una página web, y siempre lo pruebo en los navegadores actuales más utilizados que dicen que soportan CSS3 y HTML5 (IE 10, Chrome, Chromium en Linux, Firefox, Opera y Safari para Windows). Cuando abro la página en una pantalla de 1024x600 todo bien, pero cuando lo hago en pantallas más grandes, Mozilla Firefox me "trollea". ¿Porqué? La página tiene una caja de login que la abro mediante una función de jquery (slidetoggle) en el botón Iniciar Sesión. Cuando abro la cajita en Firefox sale corrida como 5px a la izquierda, efecto no deseado en la página. Debería salir como en los otros navegadores (el margen derecho alineado al botón). ¿Qué puede estar ocurriendo?

Link de la página: http://www.brujula.hol.es/

Gracias de antemano

Fíjate que eso tambien me pasó, hay algunas pantallas que sale alineado, y otras que sale desalineado (en estos momentos tengo frente a mi una pantalla donde sale desalineado) La verdad no tengo ni idea porque ocurre... he probado con medidas en pixeles y relativas (em)... ¿será cuestión de la pantalla donde se visualiza?

PD: Gracias por el consejo del .stop()

Es una HP LV1911 de 1366 x 768...

Tu página está totalmente descuadrada.

Nunca uses pixeles para definir posiciones estaticas en todas las divisiones, intenta utilizar siempre bloques encerrados en mas bloques... por ejemplo:

<div class="header">
	<a class="logo" href="#"></a>
	<a class="login" href="#"></a>
	<div class="login_box"></div>
</div>

Ahora.. header es el header completo, en tu sitio web está al 100% en ancho y debes darle posiciones con pixeles a cada división, en ves de eso solo ponle un padding top, left, right y bottom según lo necesite.

Después de eso .login debe tener un float right al igual que login_box, y eso es todo, no necesitas mas alineación porque el padding del header te lo va a ajustar.

Te recomiendo que tengas una estructura mas ordenada, por ejemplo:

<div class="fondo">
	<div class="contenido">
		<div class="cabecera"></div>
		<div class="cuerpo"></div>
		<div class="pie"></div>
	</div>
</div>

Entonces a .fondo le pones un padding de 10px, eso hará que todo el resto del sitio web ya tenga su margen y no tendrás que estar marcando posiciones manualmente y le das la imagen de fondo que tienes.

A demás esto te va a servir para que cada ves que hagas un layout se vea exactamente igual en todos los exploradores incluyendo ie.

PD: ten cuidado con subir archivos peligrosos como:
http://www.brujula.hol.es/imagenes/browsers/photothumb.db
http://www.brujula.hol.es/BD/Brujula2.sql

Restringe los directorios.

CREATE TABLE `sesion` (
  `cedula` text CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
  `usuario` text CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
  `clave` BLOB NOT NULL,
  PRIMARY KEY  (`cedula`(11))
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
-- 
-- Volcar la base de datos para la tabla `sesion`
-- 
 
INSERT INTO `sesion` VALUES ('123456789', 'admin', 0xe8ef3ab856f1c4d654973838cb01eb41);
INSERT INTO `sesion` VALUES ('987654321', 'empleado', 0xa32a68046843d0f50269eb7be3427942);
INSERT INTO `sesion` VALUES ('12334455', 'gerente', 0x3c48663e144eb8022c6caf03c7ae5fb2);
 

http://www.brujula.hol.es/admin/

Igual no corres peligro por el momento ya que no se el algoritmo que utilizas para la contraseña pero alguien con mas tiempo libre podría averiguarlo, cambialas y oculta esos files y creale un archivo htaccess para denegar la visualización directa.

También recuerda solicitar la sesión de usuarios a todos los archivos de administración y no solo de la portada:
http://www.brujula.hol.es/admin/actualizardatos.php

Observando el archivo funciones.js es posible saber como enviar datos arbitrarios para modificar los datos de tu sitio web sin la necesidad de autentificarse:

function enviarDatos(nombre, apellido, direccion, telefono, correo, cedula) {
 
    var pagina = "<div id=\"opexitosa\">La operaci\&oacute\;n se realiz\&oacute\; con \&eacute;xito. <br><br>"
            + "<input type=\"button\" class=\"boton\" id=\"boton\" name=\"boton\" value=\"Regresar al Inicio\" "
            + "onClick=\"javascript:Enviar('inicio.php','paginaajax');\"/></div>";
 
    ajax = ajaxFunction();
    ajax.open("POST", "../admin/actualizardatos.php", true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState === 4) {
            document.getElementById('paginaajax').innerHTML =
                    ajax.responseText;
            document.getElementById('paginaajax').innerHTML = pagina;
        }
    };
 
    //muy importante este encabezado ya que hacemos uso de un formulario
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    //enviando los valores
    ajax.send("cedula=" + cedula + "&nombre=" + nombre + "&apellido=" + apellido + "&direccion=" + direccion + "&telefono=" + telefono + "&correo=" + correo);//+"&colegio="+colegio+"&carrera="+carrera+"&turno="+turno+"&concepto="+concepto+"&pago="+pago);
}

A demás la petición ajax está mal hecha porque que pasa si ingreso el carácter = o & en la contraseña? me lo va a tomar con una variable arbitraria, procesalos con escape() para codificar en urlencode.

Si no me equivoco el validador del correo en javascript es vulnerable a un REDoS:
https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS

Saludos.