HTML - ¿CSS para Firefox o prefijos??

Pos: 66

Val: 18

¿CSS para Firefox o prefijos??

Publicado por Albert (5 intervenciones) el 08/12/2020 11:08:23

Buenos días:

Me pasa algo curioso con mi Web en desarrollo. La he probado en distintos Navegadores y todo esta bien, hasta que la pruebo en Firefox y justo los formularios no me los muestra como deberían ser, es decir, son ventanas emergentes en position:absolute y con unas medidas concretas.

Pues bien, el firefox, me repite la ventana en cascada de arriba hacia abajo, repitiendose por cada campo o input que contiene el formulario. Usando la consola de Firefox y otra herramientas para el desarrollador, no veo donde puede estar el problema.

¿Es posible que tenga que ver con el .css?, ¿puede de los .class de mi hoja de estilos, necesite algún prefijo como el -moz- o algunas etiquetas para firefox tienen que ser diferentes?

Si alguien me puede orientar o redirigir a alguna web donde haya algún ejemplo o plantilla css para firefox, os lo agradeceria.

Un saludo

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 1.453

¿CSS para Firefox o prefijos??

Publicado por joel (460 intervenciones) el 08/12/2020 12:12:49

Hola Albert, no me queda claro exactamente que te esta pasando... puedes mostrar una imagen del problema?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 66

Val: 18

¿CSS para Firefox o prefijos??

Publicado por Albert (5 intervenciones) el 08/12/2020 15:25:27

Te pondré un ejemplo de lo que me hace con el formulario de entrada de usuarios, aunque con el de Registro me hace lo mismo, pero en cascasa, es decir, me repite la misma ventana colocada una debajo de la otra:

Así me sale en Crome y Microsoft Edge:

form_OK

Esta es la clase ventana de mi css:

.ventana {

   font-size: 13px;

   font-family: Segoe Print, Ink Free, Maiandra GD, Calibri, Verdana, Geneva, Arial, Helvetica;

   line-height: 13.5px;

   background-image: url(images/fondo_ventana.png);

   text-align: left;

   width: 80%;

   min-height: 85%;

   left: 7%;

   top: 5%;

   padding: 20px;

   border-radius: 22px;

   position: absolute;

   z-index: 1;

   display: none;

Y en el html lo he tenido que combinar así para que tome las dimensiones y la posición que necesito:

<div id="entrada" class="ventana" style="width:350px; min-height:200px; top:-9%; left:72%; background-image: url(images/fondo_entrada.png);">

Y en firefox me lo muestra así:

form_firefox

Valora esta respuesta

Comentar

Pos: 66

Val: 18

¿CSS para Firefox o prefijos??

Publicado por Albert (5 intervenciones) el 08/12/2020 17:39:41

Es como si no me cogiera el "min-height:200px" en FireFox, no ??

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

¿CSS para Firefox o prefijos??

Publicado por joel (460 intervenciones) el 08/12/2020 20:33:19

Hola Albert, para poder probar tu código, he tenido que modificarlo un poco y dejarlo así:

<!DOCTYPE html>

<html>

<head>

<style>

.ventana {

   font-size: 13px;

   font-family: Segoe Print, Ink Free, Maiandra GD, Calibri, Verdana, Geneva, Arial, Helvetica;

   line-height: 13.5px;

   text-align: left;

   width: 80%;

   min-height: 85%;

   left: 7%;

   top: 5%;

   padding: 20px;

   border-radius: 22px;

   position: absolute;

   z-index: 1;

   border:1px solid;

</style>

</head>

<body>

    <div id="entrada" class="ventana" style="width:350px; min-height:200px;">hola</div>

</body>

</html>

Así se visualiza perfectamente tanto en chrome como firefox!!!

Puede ser que tu le añadas otro estilo desde JS o algo por el estilo?

Valora esta respuesta

Comentar

Pos: 66

Val: 18

¿CSS para Firefox o prefijos??

Publicado por Albert (5 intervenciones) el 08/12/2020 21:05:02

Hola Joel, no no le cambio nada del estilo desde JS, lo único que hay es una función para ocultar la ventana:

<div id="cerrar"><a href="javascript:cerrar_entrada()"><img src="images/cerrar.png"></a></div>

Y este es el código JS de la función de cerrar ventana:

function abrir_entrada() {

	document.getElementById("entrada").style.display="block";

function cerrar_entrada() {

	document.getElementById("entrada").style.display="none";

Con la modificación que me comentas, si funciona, pero si prescindo de: top:-9%; left:72%; no me lo deja donde yo quiero. Por el momento, le he quitado el background-image y almenos ahora se ve toda la ventana al 100%, pero sigue mostrandola en cascada y repetida hacia abajo en el Firefox

La clase .ventana que te he pasado es de la ventana de registro que es mucho más grande (es por decirlo, la clase madre). Intenté crear otra classe llamada .ventanita copiando las propiedades de .ventana y modificando el top y el left, pero me lo mostraba todo transparente y desordenado,y bueno, en fin, vi que desde el HTML podía modificarlo como yo queria y lo deje así.

Hasta ahora que me he dado cuenta que en FireFox me hace esto!! ¿Sabes si podría hacerlo desde la .css sin problemas? puede que ahí este el tema, pero no se porque no me admite una segunda clase tipo ventana ?¿?

Así me ha quedado, al quitarle el background-image:

form_firefox_2

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

¿CSS para Firefox o prefijos??

Publicado por joel (460 intervenciones) el 09/12/2020 08:01:08

Si yo pongo el top:-9%; left:72% se me sale de la pantalla el recuadro.

Yo creo que tiene que ver con algún elemento que lo contiene, porque el solo, no genera esa altura. La web esta publicada en internet para poder acceder y revisarla?

Valora esta respuesta

Comentar

Pos: 66

Val: 18

¿CSS para Firefox o prefijos??

Publicado por Albert (5 intervenciones) el 09/12/2020 10:38:25

Buenos dias, Joel:

Si se te sale, será por la resolución de pantalla. Yo la tengo a 1280 x 1024

No, no la tengo publicada. Estoy trabajando el localhost.

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

¿CSS para Firefox o prefijos??

Publicado por joel (460 intervenciones) el 09/12/2020 19:09:31

Si, se me sale hacia arriba por el top:-9%

Valora esta respuesta

Comentar

href no funciona en teléfonos

Cambiar dinámicamente una imagen