Foros del Web » Creando para Internet » CSS »

Css y pestaña de Firefox

Estas en el tema de Css y pestaña de Firefox en el foro de CSS en Foros del Web. Hola a todos, tengo un problemilla con el Firefox. Estoy desarrollando una web, en la que tengo controlado mediante CSS que ocupe el 100% en ...
  #1 (permalink)  
Antiguo 11/06/2007, 12:55
 
Fecha de Ingreso: julio-2004
Mensajes: 117
Antigüedad: 13 años, 5 meses
Puntos: 0
Css y pestaña de Firefox

Hola a todos, tengo un problemilla con el Firefox. Estoy desarrollando una web, en la que tengo controlado mediante CSS que ocupe el 100% en altura y en anchura.

Hasta aqui todo perfecto, funciona tanto en IE como en Firefox. El problema ocurre cuando abro una pestaña más en firefox. Al tener abiertas 2 pestañas sale una barra horizontal con las 2 pestañas (con una sola no ocurre), el caso es que esa barra come como es lógico ocupa un cacho del área visible del navegador y mi página sigue ocupando lo mismo, por lo cual sale un scroll vertical con un desplazamiento igual al ancho de la barra de las pestañas.

¿Por qué no se me ajusta el ancho del 100% a la nueva situación para que no aparezca el scroll? ¿Hay alguna solución a este tipo de cambios?

PD: lo mismo me ocurre en Firefox cuando muestro la barra de búsqueda que sale abajo (Ctrl+F)

A ver si alguien sabe la solución o se le ocurre como solventarlo. Gracias por anticipado.
  #2 (permalink)  
Antiguo 11/06/2007, 13:01
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Css y pestaña de Firefox

Hola bejarano

Prueba este ejemplo:

Código:
<html>
<head>
<style type="text/css">
body, html {height:100%}
</style>
</head>
<body>
<div style="width:100%; height:100%; border:1px solid red"></div>
</body>
</html>
Se ve igual, con pestañas, sin pestañas, con barra de búsqueda, con barra de marcadores...

Saludos,
  #3 (permalink)  
Antiguo 11/06/2007, 15:01
 
Fecha de Ingreso: julio-2004
Mensajes: 117
Antigüedad: 13 años, 5 meses
Puntos: 0
Re: Css y pestaña de Firefox

Hola JavierB, gracias por contestar tan pronto.

Cita:
body, html {height:100%}
Yo usaba también ese código, pero no me funcionaba. He puesto tu código tal cual lo has escrito en un nuevo documento y al mostrarlo me ocurre lo mismo que con el mío. La parte de abajo del rectángulo rojo no se me muestra. (Si hace falta puedo poner una captura).

Antes no lo he dicho, pero creo que viene "de serie" con el Firefox, encima de las pestañas tengo otra barra con unos "RSS", pero no creo que afecte en este asunto ¿o si?

De todas formas gracias JavierB, a ver si localizamos la solución.

Un saludo
  #4 (permalink)  
Antiguo 12/06/2007, 08:06
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Css y pestaña de Firefox

el código de javier no te va a funcionar porque eso siempre va a medir + del 100%... concretamente 100% + 2px (el ancho de los bordes ).. probá con esto:

Código HTML:
<html>
<head>
<style type="text/css">
body, html {height:100%}
</style>
</head>
<body>
<div style="width:100%; height:100%; background:#333"></div>
</body>
</html> 
La "teoría" de Javier funciona, de eso estoy seguro.. el 100% es siempre el 100% de la ventana visible, así que no se "deforma" con barras ni nada por el estilo..
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 12/06/2007, 09:54
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Css y pestaña de Firefox

Gracias por la corrección webosiris, siempre me olvido del modelo de cajas de los navegadores.

Ahora habría que añadir otro pequeño detalle:

Código:
body, html {height:100%; margin:0}
Saludos,
  #6 (permalink)  
Antiguo 13/06/2007, 06:47
 
Fecha de Ingreso: julio-2004
Mensajes: 117
Antigüedad: 13 años, 5 meses
Puntos: 0
Re: Css y pestaña de Firefox

Hola webosiris y javierB. Muchas gracias a ambos. He estado "acoplando" vuestras sugerencias y funciona correctamente.

El fallo debías ser que tenía puesto

Código:
html,body {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center;
   background-color: green;
   height:100%;
   margin:0;
   padding:0;
}
sin lo que está en rojo. Para cerrar ya el tema y que me quede claro (o al menos eso espero), ¿es aconsejable añadir al html y body la propiedad de margin y padding en rojo siempre o es para evitar problemas con los navegadores?

Muchas gracias por ayudarme a aprender con explicaciones tan claras.
Un saludo.
  #7 (permalink)  
Antiguo 13/06/2007, 07:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
Re: Css y pestaña de Firefox

Yo siempre lo añado, porque hay navegadores que difieren con las medidas. Es una especie de reseteo, y luego ya poner las medidas que se necesitan.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:50.