Hi
I'm just finishing up a stylesheet.
I've noticed a small problem
The footer and boxes (innerbox and outerbox in sheet below) resize slightly when the content is more than a screen long.
Is there a way to fix that?
Thanks in advance for any help.
here's my stylesheet
/* global properties */
html, body {
background: #2c539e;
font-size: 100%;
margin:0;
padding:0;
border:0;
width:100%;
min-width:950px;
font-family: "Helvetica Neue",
Arial,
Helvetica,
sans-serif;
}
/* navigation menu HEADER */
#navhead {
height:70px;
float:left;
width:100%;
background: #d0ff51;
border-top: 5px solid #fff900;
overflow:hidden;
position:relative;
font-size: 1.4em;
}
#navhead ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navhead ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#navhead ul li a {
display:block;
margin:0px 10px 0px 1px;
padding:10px 10px;
color: #2c539e;
text-decoration:none;
line-height:1.3em;
height:50px;
font-size: 1em;
-moz-border-radius: 15px;
border-radius: 15px;
}
#navhead ul li a:hover {
color:#000;
height: 70px;
}
#navhead ul li a.active,
#navhead ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
height: 70px;
}
/* active tab header*/
body#home a#home,
body#login a#login,
body#register a#register,
body#members a#members,
body#articles a#articles,
body#search2 a#search2,
body#download a#download
{
background-color: #2c539e;
color: #fff;
height:60px;
padding-left: 5px;
padding-right: 5px;
padding-top: 25px;
font-size: 1.6em;
}
/* active tab footer */
body#privacy a#privacy,
body#about a#about,
body#contact a#contact,
body#password a#password,
body#questions a#questions,
body#download a#download
{
background-color: #9abdde;
color: #fff;
height:60px;
}
/* navigation menu FOOTER */
#navfoot {
height:70px;
float:left;
width:100%;
background: #2c539e;
border-top: 5px solid #fff900;
overflow:hidden;
position:relative;
font-size: 1.4em;
}
#navfoot ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navfoot ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#navfoot ul li a {
display:block;
margin:0px 10px 0px 1px;
padding:20px 10px;
color: #fff;
text-decoration:none;
line-height:1.3em;
height:50px;
font-size: 1em;
}
#navfoot ul li a:hover {
color:#000;
height: 70px;
padding-left: 7px;
padding-right: 7px;
}
#navfoot ul li a.active,
#navfoot ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
height: 70px;
}
/* keep header and footer at top and bottom */
.wrap {
position:relative;
margin:0 auto;
width:100%;
}
#header, #footer {
width:100%;
float:left;
}
#header {
position: fixed;
z-index: 99998;
top: 0;
left: 0;
}
#footer {
position: fixed;
z-index:999999;
bottom: 0;
left: 0;
}
/* content container */
#container {
margin-top: 110px;
margin-bottom: 110px;
}
/* boxes */
#outerbox{
position: relative;
width: 930px;
left: 50%;
margin-left: -475px;
margin-right:auto;
background-color: #9abdde;
padding-top: 20px;
padding-bottom: 20px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-top: 10px;
}
.innerbox{
float: center;
width: 880px;
background-color: #F0F2F7;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin: 10px auto;
font-size: 1.1em;
-moz-border-radius: 15px;
border-radius: 15px;
}
.formbox {
float: center;
width: 930px;
background-color: #F0F2F7;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin: 10px auto;
font-size: 1.1em;
-moz-border-radius: 15px;
border-radius: 15px;
}
#form {
font-size: 1.2em;
font-weight: none;
}
#form .label {
float: left;
width: 250px;
margin-right: 10px;
text-align: right;
clear: left;
font-size: 1em;
}
input#subscribe{
margin-left: 260px;
height: 50px;
width: 260px;
font-size: 1.3em;
background: url('../images/button.jpg');
border: none;
-moz-border-radius: 15px;
border-radius: 15px;
}
input#first_name, input#last_name, input#email, input#password1, input#password2, input#search {
background-color: #9abdde;
font-size: 1.1em;
width: 350px;
margin-top: -3px;
height: 30px;
border: 1px solid #000000;
}
textarea#textarea{
background-color: #9abdde;
font-size: 1.1em;
width: 350px;
margin-top: -3px;
height: 180px;
border: 1px solid #000000;
}
input#cookie{
font-size: 1em;
margin-top: 3px;
}
textarea#textarea:focus, input#first_name:focus, input#last_name:focus, input#email:focus, input#password1:focus, input#password2:focus, input#search:focus {
background-color: #DCE1F2;
}
/* text outside of boxes */
.large {
padding: 5px 5px 5px 10px;
margin: 20px 5px 5px 10px;
color: #0A99FF;
font-size: 4em;
text-align: center;
}
.medium {
text-align: center;
color: #fff;
font-size: 1.8em;
}
.small {
padding: 5px 5px 5px 10px;
margin: 10px 5px 5px 10px;
color: #fff;
font-size: 1.4em;
text-align: center;
text-decoration: none;
}
.small2 {
padding: 5px 5px 5px 10px;
margin: 10px 5px 5px 10px;
color: #fff;
font-size: 1.4em;
}
/* table format */
.center {
color: #fff;
padding-top: 5px;
margin-left:auto;
margin-right:auto;
font-size: 1em;
}
#text {
text-align:right;
}
#footer2 {
clear:both;
}