Problema con CSS3 y Firefox

[KeyPy HH]

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

[#!drvy]

Lo he probado en una resolución de 1280x1024 y en una de 1366x768. La caja sale bien alienada en Firefox.

PD: Te recomiendo usar .stop() para el efecto de slide. Si clickeas rapidamente sobre el boton inicio muchas veces, te va a crear un bucle no deseado.

Saludos

[KeyPy HH]

Lo he probado en una resolución de 1280x1024 y en una de 1366x768. La caja sale bien alienada en Firefox.

PD: Te recomiendo usar .stop() para el efecto de slide. Si clickeas rapidamente sobre el boton inicio muchas veces, te va a crear un bucle no deseado.

Saludos

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()

[#!drvy]

Nos podrías decir la resolución de la pantalla en la que sale descuadrada ? Y la marca si es posible xD

Saludos

[KeyPy HH]

Nos podrías decir la resolución de la pantalla en la que sale descuadrada ? Y la marca si es posible xD

Saludos

Es una HP LV1911 de 1366 x 768...

[#!drvy]

Hmmm por mas que intente no consigo reproducir el problema xD... se me ocurre que pueda ser algún parámetro sensible del CSS como el:

Código (css) [Seleccionar] Expandir

right: -96px; de #cajalogin..
Sin embargo no veo porque te iba a pasar en Firefox y no en Chrome o IE..

Prueba aislar el problema, en Firefox tienes el Web Developer. Ábrelo en la pantalla que se ve mal y busca con el Inspector las Reglas de css de la caja y sus componentes y mira a ver si el navegador sobrescribe alguna o alguna no esta bien definida.



Saludos

[WHK]

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:

Código (html4strict) [Seleccionar] Expandir

<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:

Código (html4strict) [Seleccionar] Expandir

<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.

Código (sql) [Seleccionar] Expandir

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:

Código (javascript) [Seleccionar] Expandir

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.

[KeyPy HH]

WHK

Muchas gracias por las observaciones, tenía rato sin ingresar y pues ya he hecho muchas de las correcciones pertinentes. Subi todos esos archivos sin proteccion por rapidez, e igual la página no trabajara con acceso a internet sino en una red local, por lo cual no he prestado mucha atención a la seguridad. Sin embargo, gracias por las correcciones en los CSS, en eso si estaba azul jeje