PDA

View Full Version : Scrollbar and footer issues when site is resized!



chazillah
May 2nd, 2010, 09:59 PM
Hi,

The site is
http://www.spacehindu.com/archive.php

My friend and I have been desperately trying to get the footer to cooperate. It seems to do so right now, but whenever the browser is resized, THREE scrollbars appear and everything is messed up.

No idea what's happening...seems like the divs within divs are causing ...issues?


Here's our CSS:

* {
margin: 0;
}
html, body {
height: 100%;
padding:0;
overflow:auto;
background-color:#000;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 13px;
padding: 0;
margin: 0;

letter-spacing: 0.5px;

}



.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
/*overflow:auto;*/
overflow:auto;
}



h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase;
display: inline;
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px;
letterspacing: 5px;
color: #758a95;
font-weight: lighter;
}
h3{
display: inline;
text-transform: lowercase;
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase;
font-size: 13px; letterspacing: 8px;
color: #758a95;
}



a:link, a:visited {
font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff;
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
width:400px;
height:95%;
float:left;
background-color:#000;
min-height:600px;
}
.navImg{
position:relative;
top:30%;
}
.content{
margin-left:400px;
height:95%;
background-color:#000;


}
.archive{
position:relative;
left:50px;
top:10%;
width: 50%;



}
.footer, .push {
height: 30px; /* .push must be the same height as .footer */
background: #12151f;
font-family: calibri, arial;
font-size: 12px;
color: #8f97a4;
text-align: center;
clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px;
letter-spacing: 0.5px;
}
.textarea {
background: #374254;
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius: 10px;

}
.submit {background: #374254;
border: solid 0;
color: #cedbea;
}

frankle
May 3rd, 2010, 06:19 AM
Try removing overflow:auto; from html, body as well as from wrapper.

Hope this work.

Regards

chazillah
May 3rd, 2010, 09:24 PM
Thanks, that did work, but now the content overlaps and the footer isn't sticking to the bottom:

http://www.spacehindu.com/archive.php

We really would like it so that the footer stays and it doesn't overlap each other.

chazillah
May 3rd, 2010, 09:28 PM
Nevermind, my friend got rid of the relative positioning and it helped..the footer is still being strange when it resizes though.
Thanks for your help.