0

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;

}
1
Contributor
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Bazzaah
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.