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"> Начало </a><span style="font-size:18px; color: #26322F; text-shadow: 1px 1px 2px #ccc;" >•</span><a href="/" class="mainNav"> Книги </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.