Scroll en firefox me descuadra la página

Acelsp · #1 (**permalink**) 30/05/2008, 09:22

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?

Mikmoro · #2 (**permalink**) 30/05/2008, 10:15

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}

Acelsp · #3 (**permalink**) 12/06/2008, 09:24

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?

Mikmoro · #4 (**permalink**) 12/06/2008, 09:45

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

Acelsp · #5 (**permalink**) 13/06/2008, 01:54

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?

Mikmoro · #6 (**permalink**) 13/06/2008, 02:28

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.

Acelsp · #7 (**permalink**) 13/06/2008, 02:45

Ya, eso tampoco me gusta demasiado. Y eso del relleno que me comentabas mas arriba en que consiste? Podría solucionarmelo y validar?

Mikmoro · #8 (**permalink**) 13/06/2008, 03:11

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.

Acelsp · #9 (**permalink**) 13/06/2008, 04:36

Me parece rarisimo que tampoco me funcione. Puede ser por usar firefox 2.0?

Mikmoro · #10 (**permalink**) 13/06/2008, 04:53

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.

Acelsp · #11 (**permalink**) 13/06/2008, 07:12

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;
}

Mikmoro · #12 (**permalink**) 13/06/2008, 08:18

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.

Acelsp · #13 (**permalink**) 13/06/2008, 09:43

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;
}

Mikmoro · #14 (**permalink**) 13/06/2008, 09:49

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.

Acelsp · #15 (**permalink**) 13/06/2008, 10:19

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?

Mikmoro · #16 (**permalink**) 13/06/2008, 10:34

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

Mikel.