Foros del Web » Creando para Internet » CSS »

Sticky footer, funciona en chrome pero no en firefox

Estas en el tema de Sticky footer, funciona en chrome pero no en firefox en el foro de CSS en Foros del Web. Buenos dias. Mi problema es el siguiente, tengo una pagina con un footer que se tiene que quedar abajo(estoy usando http://ryanfait.com/sticky-footer/) en google chrome se ...
  #1 (permalink)  
Antiguo 21/04/2010, 06:10
 
Fecha de Ingreso: julio-2006
Mensajes: 2
Antigüedad: 11 años, 5 meses
Puntos: 0
Sticky footer, funciona en chrome pero no en firefox

Buenos dias.

Mi problema es el siguiente, tengo una pagina con un footer que se tiene que quedar abajo(estoy usando http://ryanfait.com/sticky-footer/)

en google chrome se ve exactamente como quiero, pero en firefox y IE, el footer se desplaza hacia arriba cuando no hay suficiente contenido.

Creo que el problema esta en los wrapper left y right que agregue, pero realmente no se como arreglarlo y ya le di vuelta casi una semana, si me dan una mano se los agradezco.

html
Código:
<html> 
 
<head> 
 
 
  <title>Вик Бриз</title> 
<link href="ruso.css" rel="stylesheet" type="text/css"> 
</head> 
 
 
<body> 
 
 
 
 <div id="mainWrapperLeft"> 
<div id="mainWrapperRight"> 
 <div id="wrapper"> 
<p><h1>Вик Бриз<span></h1></span> 
<hr /> 
  <div align="left"><a href="/" class="mainNav">&nbsp;Начало&nbsp;</a><span style="font-size:18px; color: #26322F; text-shadow: 1px 1px 2px #ccc;" >&bull;</span><a href="/" class="mainNav">&nbsp;Книги&nbsp;</a></div> 
  <hr /> 

main content

</p> 
<div class="push"></div> 
 
        </div> 
 
<div class="footer"> 
<hr /> 
<p> 
 contenido del footer </p> 
        </div> 
</div></div>        
 
 
 </body> 
 
 
 
</html>
css
Código:
*{
margin:0;
}

html, body {
border:0;margin:0;padding:0;
min-height: 100%;
/*height: auto;*/
/*height: 100%;*/

font-size: x-small;
font-family: Georgia, Serif;

text-align: center;
color: #333;

background-image: url(img/back.gif);
background-repeat: repeat;
background-attachment: scroll;


}


#wrapper{
/*height: 100%;*/
min-height: 100%;
/*height: auto !important;*/



width: 600px;
background-color: #fff;
margin: 0 0 -40px 0; /* the bottom margin is the negative value of the footer's height */

}

.footer, .push {
height: 40px;
/*width: 600px;*/
text-shadow: 1px 1px 2px #ccc;
color:            #26322F;
/*clear: both;*/
}




#mainWrapperLeft { 
/*position: absolute;*/
/*height: 100%;
/*min-height: 100%;*/
height: auto !important;
*width:600px;

float: left;
padding: 0;
padding-left: 70px;

background-image:url(img/dgrdizq.png);
background-position: left top;
background-repeat: repeat-y;
 }

#mainWrapperRight {
/*position: absolute;*/
/*min-height: 100%;*/
height: auto;
width:600px;
float: right;
padding: 0;
padding-right: 50px;


background-image:url(img/dgrdder.png);
background-position: right top;
background-repeat: repeat-y;


}

a:link    {
  /* Applies to all unvisited links */
  text-shadow: 1px 1px 2px #ccc;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            blue;
  } 
a:visited {
  /* Applies to all visited links */
  text-shadow: 1px 1px 2px #ccc;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #ddd;
  color:            #f0f;
  } 
a:hover   {
  /* Applies to links under the pointer */
  text-shadow: 1px 1px 2px #ccc;
  text-decoration:  underline;
  font-weight:      bold;
  background-color: blue;
  color:            #fff;
  } 
a:active  {
  /* Applies to activated links */
  text-shadow: 1px 1px 2px #ccc;
  text-decoration:  underline;
  font-weight:      bold;
  background-color: black;
  color: white;
  }
 
a.mainNav:link    {
  /* Applies to unvisited links of class mainNav */
  font-size:18px;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #FFFFFF;
  color:            #26322F;
  } 
a.mainNav:visited {
  /* Applies to visited links of class mainNav */
  font-size:18px;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #FFFFFF;
  color:            #26322F;

  } 
a.mainNav:hover   {
  /* Applies to links under the pointer of class mainNav */
  font-size:18px;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #26322F;
  color:            #fff;
  } 
a.mainNav:active  {
  /* Applies to activated links of class mainNav */
  font-size:18px;
  text-decoration:  none;
  font-weight:      bold;
  background-color: #FFFFFF;
  color: ;
  }

hr {height:2px;background: #fff url(img/gradient.png) no-repeat scroll left;border:none;
}

h1{
color:            #26322F;
text-shadow: 1px 1px 2px #ccc;
margin-left: 5px;
margin-bottom: 4px;
text-align:left;
font-size: 36px;
text-decoration:  none;
background-color: #FFFFFF;
font-weight:      bold;
position:relative;
}

h1 span{
	position:absolute;
	display:block;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:url(img/glossy.png) repeat-x;
}
gracias por adelantado.
  #2 (permalink)  
Antiguo 22/04/2010, 14:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Sticky footer, funciona en chrome pero no en firefox

Hola:

Al div footer añádele overflow:auto

Saludos.


Etiquetas: chrome, firefox, footer
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 11:08.