Foros del Web » Creando para Internet » CSS »

Scroll en firefox me descuadra la página

Estas en el tema de Scroll en firefox me descuadra la página en el foro de CSS en Foros del Web. Me está pasando una cosa muy extraña: estoy haciendo una página de 780px de ancho y centrada, y observo que cuando la página crece mucho ...
  #1 (permalink)  
Antiguo 30/05/2008, 09:22
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Scroll en firefox me descuadra la página

Me está pasando una cosa muy extraña: estoy haciendo una página de 780px de ancho y centrada, y observo que cuando la página crece mucho por abajo, y por tanto sale el scroll vertical en la parte derecha, toda la página se desplaza la anchura del scroll hacia la izquierda. Pero solo me pasa en firefox, en cualquier versión de IE se ve bien. Aqui pongo el codigo del css:

Código:
body {
	text-align: center;
	margin: 0px;
	color: #336699;
	font-family: sans-serif;
	font-size: 12pt;
}

#container {
	width: 780px;
	margin: 0px auto;
	text-align: left;
}
Alguna idea para solucionarlo?
  #2 (permalink)  
Antiguo 30/05/2008, 10:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

Eso es porque en IE el scroll, aunque velado (inutilizado), siempre está presente en la página, aunque no se necesite, mientras que FF aparece y desaparece. Alguien dijo por aquí hace poco cómo hacer que el scroll aparezca siempre en firefox, pero no recuerdo dónde. Supongo que buscado por esos términos lo encontrarás.

Si no deberás usar relleno.

Mikel.

EDITO: JavierB aportaba este dato hace mucho tiempo por aquí:

body{overflow : -moz-scrollbars-vertical}
  #3 (permalink)  
Antiguo 12/06/2008, 09:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Muchas gracias por la ayuda, pero lo he probado y no me funciona. Creo que se ha quedado obsoleto:

http://developer.mozilla.org/es/docs/Referencia_CSS:Extensiones_Mozilla

Alguna otra sugerencia?
  #4 (permalink)  
Antiguo 12/06/2008, 09:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

¿Estás seguro de haber colocado exactamente esta línea en la css?

body{overflow : -moz-scrollbars-vertical}

Vamos, es que antes de ponerlo ya lo había probado, pero ahora lo he vuelto aprobar con FF 2.0 y funciona perfectamente.

Mikel.
  #5 (permalink)  
Antiguo 13/06/2008, 01:54
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Lo que yo he hecho ha sido añadirlo al final de las otras líneas de body en mi fichero css y ponerle un punto y coma al final, pero además de no funcionarme, es que no me valida el css la w3c, y necesito validarlo.

La verdad es que queda feisimo ver como se desplaza toda la página al aparecer el scroll. Existe alguna otra solución que valide en la w3c?
  #6 (permalink)  
Antiguo 13/06/2008, 02:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

No, validar no va a validar.

Podrías usar:

html {overflow:scroll;}

pero el problema es que sacará tanto la barra vertical como la horizontal sin necesidad.

Mikel.
  #7 (permalink)  
Antiguo 13/06/2008, 02:45
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Ya, eso tampoco me gusta demasiado. Y eso del relleno que me comentabas mas arriba en que consiste? Podría solucionarmelo y validar?
  #8 (permalink)  
Antiguo 13/06/2008, 03:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

Pues por ejemplo si usaras esto:

html, body {min-height: 101%;}

Te saldría en FF el scroll siempre, claro, que sería real, es decir, tendrías un 1% de scroll sin ser necesario.

Mikel.
  #9 (permalink)  
Antiguo 13/06/2008, 04:36
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Me parece rarisimo que tampoco me funcione. Puede ser por usar firefox 2.0?
  #10 (permalink)  
Antiguo 13/06/2008, 04:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

No, yo estoy usando FF 2.0. Quizá se trate de alguna cosa que tienes en alguna css. Si puedes poner un enlace o el código completo podremos ver qué ocurre. El anterior código del scroll, el que no valida, te garantizo que funciona en FF 2.0, pero decías que a ti no te funcionaba, así que algo más te ocurre.

Mikel.
  #11 (permalink)  
Antiguo 13/06/2008, 07:12
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Vale, aqui está el código del css:

Código:
body {
	text-align: center;
	margin: 0px;
	color: #336699;
	font-family: sans-serif;
	font-size: 12pt;
	min-height: 101%;
}

a {
	color: #336699;
}

#container {
	width: 780px;
	margin: 0px auto;
	text-align: left;
	min-height: 101%;
}

#header {
	background: url(Images/Alonsos_Cabecera.jpg) top left no-repeat;
	width: 780px;
	height: 170px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 200px;
	padding: 10px 0px 10px 10px;
	float: left;
}

#main {
	margin-left: 216px;
	padding: 10px 40px 10px 0px;
}

p.ppal {
	margin: 0px 0px 30px 0px;
  background: url(Images/flecha.jpg) no-repeat top left;
  padding-left: 20px;
}

#footer {
	clear: both;
}

.menu {
  width: 160px;
  margin-left: 17px;
	color: #333333;
}

.cabmenu {
	background-image: url("Images/Menu_cab.jpg");
	background-repeat: no-repeat;
	text-align: center;
	width: 160px;
	height: 27px;
	font-weight: bold;
	font-size: 10pt;
}

.cabmenu p {
	padding-top: 5px;
	margin: 0px;
}

.cuerpomenu {
  border-left: 1px solid #6F88DC;
  border-right: 1px solid #6F88DC;
  height: 100%;
}

.infomenu {
	font-style: italic;
	font-weight: normal;
	padding-left: 5px;
	display: block;
}

.cuerpomenu p {
	font-weight: bold;
	font-size: 10pt;
}

.cuerpomenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	font-weight: 500;
	font-size: 10pt;
}

.cuerpomenu li {	
	background: url(Images/Bullet.jpg) 1em 0.3em no-repeat;
	padding-left: 30px;
  border-bottom: 1px solid #6F88DC;
  /*border-top-width: 0px;*/
}

.cuerpomenu li a {
	color: #333333;
	text-decoration: none;
	display: block;
}

/*#cuerpomenu li a:hover {
	background-color: #000;
	color: #fff;
}*/

.piemenu {
	background-image: url("Images/Menu_pie.jpg");
	background-repeat: no-repeat;
	width: 160px;
	height: 38px;
}

#pie {
	background: url(Images/Alonsos_Pie.jpg) top left no-repeat;
	width: 780px;
	height: 29px;
}

#w3c {
	float: right;
	padding: 11px 5px 0px 0px;
	height: 15px;
}

#menuH {
	float: right;
	margin-top: 104px;
  width: 564px;
  height: 66px;
}

.menuHitem ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.menuHitem li {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestNoSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

li.sel {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

.menuHitem li a {
	text-decoration: none;
	display: block;
	color: #333333;
	font-weight: bold;
	font-size: 10pt;
	padding-top: 5px;
}

#menuHder {
	float: right;
	background: url(Images/MenuH_Der.gif) bottom right no-repeat;
	width: 44px;
	height: 28px;
}

#menuHpie {
	clear: both;
	background: url(Images/MenuH_Pie.jpg) bottom right no-repeat;
	width: 564px;
	height: 38px;
}

.formulario {
	margin: 0px;
}
.boton_frm {
	background: url(Images/Btn_azul.jpg) bottom left no-repeat;
	width: 96px;
	height: 100%;
	border: 0px;
	color: #333333;
}

.campo {
	width: 90px;
}

#citaindex {
  float: right;
  background: url(Images/abre-comillas.gif) no-repeat top left;
  width: 460px;
  padding-left: 35px;
}

#citaindex p {
  background: url(Images/cierra-comillas.gif) no-repeat bottom right;
  padding-right: 35px;
  height: 24px;
}

#autorcita {
	float: right;
  padding-right: 40px;
}

.menuG {
   width: 518px;
}

.cabmenuG {
	background-image: url("Images/MenuG_cab.jpg");
	background-repeat: no-repeat;
	text-align: center;
	width: 518px;
	height: 27px;
}

.cuerpomenuG {
  border-left: 1px solid #5A5A5A;
  border-right: 1px solid #5A5A5A;
  height: 100%;
  padding: 10px;
}

.cuerpomenuG p {
	margin: 0px;
	padding: 0px;
}

.piemenuG {
	background-image: url("Images/MenuG_pie.jpg");
	background-repeat: no-repeat;
	width: 518px;
	height: 14px;
}
  #12 (permalink)  
Antiguo 13/06/2008, 08:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

Pues es fácil: no te funciona porque no has puesto en ninguna parte lo que te he dicho:

html, body {min-height: 101%;}

Míralo bien. Esto no lo tienes en la css. Ponlo si quieres sólo así:

html {min-height: 101%;}

Mikel.
  #13 (permalink)  
Antiguo 13/06/2008, 09:43
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

Hecho, pero sigue sin funcionar. De que sera el problema?

Código:
html {
	min-height: 101%;
}

body {
	text-align: center;
	margin: 0px;
	color: #336699;
	font-family: sans-serif;
	font-size: 12pt;
	min-height: 101%;
}

a {
	color: #336699;
}

#container {
	width: 780px;
	margin: 0px auto;
	text-align: left;
	min-height: 101%;
}

#header {
	background: url(Images/Alonsos_Cabecera.jpg) top left no-repeat;
	width: 780px;
	height: 170px;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 200px;
	padding: 10px 0px 10px 10px;
	float: left;
}

#main {
	margin-left: 216px;
	padding: 10px 40px 10px 0px;
}

p.ppal {
	margin: 0px 0px 30px 0px;
  background: url(Images/flecha.jpg) no-repeat top left;
  padding-left: 20px;
}

#footer {
	clear: both;
}

.menu {
  width: 160px;
  margin-left: 17px;
	color: #333333;
}

.cabmenu {
	background-image: url("Images/Menu_cab.jpg");
	background-repeat: no-repeat;
	text-align: center;
	width: 160px;
	height: 27px;
	font-weight: bold;
	font-size: 10pt;
}

.cabmenu p {
	padding-top: 5px;
	margin: 0px;
}

.cuerpomenu {
  border-left: 1px solid #6F88DC;
  border-right: 1px solid #6F88DC;
  height: 100%;
}

.infomenu {
	font-style: italic;
	font-weight: normal;
	padding-left: 5px;
	display: block;
}

.cuerpomenu p {
	font-weight: bold;
	font-size: 10pt;
}

.cuerpomenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	font-weight: 500;
	font-size: 10pt;
}

.cuerpomenu li {	
	background: url(Images/Bullet.jpg) 1em 0.3em no-repeat;
	padding-left: 30px;
  border-bottom: 1px solid #6F88DC;
  /*border-top-width: 0px;*/
}

.cuerpomenu li a {
	color: #333333;
	text-decoration: none;
	display: block;
}

/*#cuerpomenu li a:hover {
	background-color: #000;
	color: #fff;
}*/

.piemenu {
	background-image: url("Images/Menu_pie.jpg");
	background-repeat: no-repeat;
	width: 160px;
	height: 38px;
}

#pie {
	background: url(Images/Alonsos_Pie.jpg) top left no-repeat;
	width: 780px;
	height: 29px;
}

#w3c {
	float: right;
	padding: 11px 5px 0px 0px;
	height: 15px;
}

#menuH {
	float: right;
	margin-top: 104px;
  width: 564px;
  height: 66px;
}

.menuHitem ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.menuHitem li {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestNoSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

li.sel {
	float: left;
	width: 104px;
	height: 28px;
	background-image: url(Images/MenuH_PestSel.gif);
	background-repeat: no-repeat;
	text-align: center;
}

.menuHitem li a {
	text-decoration: none;
	display: block;
	color: #333333;
	font-weight: bold;
	font-size: 10pt;
	padding-top: 5px;
}

#menuHder {
	float: right;
	background: url(Images/MenuH_Der.gif) bottom right no-repeat;
	width: 44px;
	height: 28px;
}

#menuHpie {
	clear: both;
	background: url(Images/MenuH_Pie.jpg) bottom right no-repeat;
	width: 564px;
	height: 38px;
}

.formulario {
	margin: 0px;
}
.boton_frm {
	background: url(Images/Btn_azul.jpg) bottom left no-repeat;
	width: 96px;
	height: 100%;
	border: 0px;
	color: #333333;
}

.campo {
	width: 90px;
}

#citaindex {
  float: right;
  background: url(Images/abre-comillas.gif) no-repeat top left;
  width: 460px;
  padding-left: 35px;
}

#citaindex p {
  background: url(Images/cierra-comillas.gif) no-repeat bottom right;
  padding-right: 35px;
  height: 24px;
}

#autorcita {
	float: right;
  padding-right: 40px;
}

.menuG {
   width: 518px;
}

.cabmenuG {
	background-image: url("Images/MenuG_cab.jpg");
	background-repeat: no-repeat;
	text-align: center;
	width: 518px;
	height: 27px;
}

.cuerpomenuG {
  border-left: 1px solid #5A5A5A;
  border-right: 1px solid #5A5A5A;
  height: 100%;
  padding: 10px;
}

.cuerpomenuG p {
	margin: 0px;
	padding: 0px;
}

.piemenuG {
	background-image: url("Images/MenuG_pie.jpg");
	background-repeat: no-repeat;
	width: 518px;
	height: 14px;
}
  #14 (permalink)  
Antiguo 13/06/2008, 09:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

A ver: esto es un documento con tu css tal cual y un sólo div con una palabra en el cuerpo.

¿En este ejemplo no ves la barra de scroll a tu derecha con FF 2.0?

Mikel.
  #15 (permalink)  
Antiguo 13/06/2008, 10:19
 
Fecha de Ingreso: mayo-2008
Mensajes: 70
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Scroll en firefox me descuadra la página

En este sí que lo veo. Está claro entonces que el problema no está en el css, sino en el fichero que lo llama. Le voy a echar un vistazo. Tendrá algo que ver que yo uso XHTML Strict?
  #16 (permalink)  
Antiguo 13/06/2008, 10:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Scroll en firefox me descuadra la página

No, con strict funciona igual. Deberá ser pues algo del html.

Mikel.
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 06:13.