height not 100%

[mlegg]

This is a new template I am working on and temp. located at http://eppingland.com/
That is the only real page, all the other menus are linking to a copy of the home page.

CSS is at http://eppingland.com/BruStyles.css


body {
margin: auto;
background : url("images/beer-bg.jpg");
background-repeat : repeat;
max-width : 960px;
height:100%;
}
#mainPicture {
height : 200px;
width : 960px;
background : url("images/Bruburger-logo.jpg") no-repeat;
padding-top: 0;
margin: 0;
}

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#E79600;
background-repeat:repeat;
border-color:#cccccc #111111 #111111 #cccccc;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu {
width:766px;
padding-left:190px;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:196.35px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#E79600;
border-width:1px;
border-color:#C21C02;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 5px 2px 10px;
_padding-left:0;
font:16px Georgia;
color: #C21C02;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#C21C02;
border-color:#E79600;
border-style:solid;
font:16px Georgia;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#C21C02;
border-color:#E79600;
border-style:solid;
font:16px Georgia;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #666 !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arr_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:12px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}


div.one {
padding: 10px;
height:100%;
}

.contentBox {
color:#C21C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
clear:both;
height:100%;
}

.innerBox {
color:#C21C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
background-color : #ffffff;
background-image : url("images/content_back.png");
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
height:100%;
}
.innerBox a:link {
color : #FF0000;
text-decoration:underline;
}
.innerBox a:visited {
color: #FF0000;
text-decoration : underline;
}

.innerBox a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

.innerBox a:active {
color : #FF0033;
background-color: #FFFFFF;
text-decoration: underline;
}

.columns
{
width:100%;
}
.left
{
float:left;
width:620px;

}
.right
{
margin-left:340px;
}
.clear
{
clear:both;
}
.columns-b
{
width:100%;
}
.left-b
{
float:left;
width:500px;

}
.right-b
{
margin-left:450px;
}
.clear
{
clear:both;
}
#h1 {
text-shadow:black 0.5em 0.5em 0.5em;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
display: block;
}
#h2 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFFFFF;
display: block;
}
#h3 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
display: block;
padding: 6px;
}
#h4 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #FFFFFF;
display: block;
padding: 6px;
}


#footer {
background : url("images/footer.gif") no-repeat;
height:35px;
text-align : center;
font-size : 16px;
font-family : sans-serif;
color : maroon;
padding-top: 5px;
}
#footer a:link {
color : #7a0026;
text-decoration:underline;
}

#footer a:visited {
color: #7a0026;
text-decoration : underline;
}

#footer a:hover {
color: #FFFFFF;
background-color: #8B0000;
text-decoration: underline;
}

#footer a:active {
color : #7a0026;
background-color: #FFFFFF;
text-decoration: underline;
}


Do you want me to post the HTML?

[jscheuer1]

The height of what isn't 100% of what?

[ajfmrf]

I made an adjustment to this code in the css file


.contentBox {
color:#C21C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
clear:both;
height:100%;
}

to this


.contentBox {
color:#C21C02;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
clear:both;
height:400px;
}

Is this what you are looking for?

http://www.web-user.info/temp/epland.html

[mlegg]

oh, I'm sorry for not explaining better, I meant the where the pages' text content is

yes I was looking to make the entire page height be full height, whatever the screen height of the viewer may be, so thought that height:100% would be proper

[jscheuer1]

What you really might want then is to leave that at 100% and set the html element's height to 100%.

[mlegg]

I added this to the CSS file


html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

now the page is just a bit to long/high, although I will leave this for now because I am unsure of how much content my buddy has for each page

thanks

[jscheuer1]

html width is natively 100%, by declaring it though it may distort the other dimension. I'd drop that part.

[mlegg]

OK thanks