elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con CSS3 y Firefox
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con CSS3 y Firefox  (Leído 3,203 veces)
KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Problema con CSS3 y Firefox
« en: 17 Abril 2013, 15:23 pm »

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


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Problema con CSS3 y Firefox
« Respuesta #1 en: 17 Abril 2013, 15:29 pm »

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


En línea

KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Re: Problema con CSS3 y Firefox
« Respuesta #2 en: 17 Abril 2013, 15:32 pm »

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()
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Problema con CSS3 y Firefox
« Respuesta #3 en: 17 Abril 2013, 15:36 pm »

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

Saludos
En línea

KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Re: Problema con CSS3 y Firefox
« Respuesta #4 en: 17 Abril 2013, 15:39 pm »

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...
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Problema con CSS3 y Firefox
« Respuesta #5 en: 17 Abril 2013, 16:12 pm »

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
  1. 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
En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: Problema con CSS3 y Firefox
« Respuesta #6 en: 17 Abril 2013, 16:45 pm »

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
  1. <div class="header">
  2. <a class="logo" href="#"></a>
  3. <a class="login" href="#"></a>
  4. <div class="login_box"></div>
  5. </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
  1. <div class="fondo">
  2. <div class="contenido">
  3. <div class="cabecera"></div>
  4. <div class="cuerpo"></div>
  5. <div class="pie"></div>
  6. </div>
  7. </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
  1. CREATE TABLE `sesion` (
  2.  `cedula` text CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
  3.  `usuario` text CHARACTER SET utf8 COLLATE utf8_spanish_ci NOT NULL,
  4.  `clave` BLOB NOT NULL,
  5.  PRIMARY KEY  (`cedula`(11))
  6. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
  7.  
  8. --
  9. -- Volcar la base de datos para la tabla `sesion`
  10. --
  11.  
  12. INSERT INTO `sesion` VALUES ('123456789', 'admin', 0xe8ef3ab856f1c4d654973838cb01eb41);
  13. INSERT INTO `sesion` VALUES ('987654321', 'empleado', 0xa32a68046843d0f50269eb7be3427942);
  14. INSERT INTO `sesion` VALUES ('12334455', 'gerente', 0x3c48663e144eb8022c6caf03c7ae5fb2);
  15.  

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

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.
« Última modificación: 17 Abril 2013, 17:13 pm por WHK » En línea

KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Re: Problema con CSS3 y Firefox
« Respuesta #7 en: 9 Mayo 2013, 02:15 am »

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  :D
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Mozilla lanzará Firefox 4, Firefox 5, Firefox 6 y Firefox 7 en este mismo año
Noticias
wolfbcn 4 3,801 Último mensaje 27 Marzo 2011, 18:10 pm
por chillinfart
Problema compatibilidad css3 (Solucionado) « 1 2 »
Desarrollo Web
Jnex 10 6,402 Último mensaje 28 Febrero 2012, 20:42 pm
por Jnex
Crear animaciones con CSS3
Desarrollo Web
desastro 1 2,052 Último mensaje 25 Marzo 2012, 17:31 pm
por inlain
Web HTML5 & CSS3
Desarrollo Web
Nâmek 4 3,759 Último mensaje 14 Noviembre 2012, 01:29 am
por Nâmek
¿HTML5 y CSS3?
Desarrollo Web
TheEGG 89 7 4,101 Último mensaje 26 Febrero 2013, 13:45 pm
por Linton
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines