UseBB Community

I'm trying to get my forums to always display at 100%. Really just a personal preferance and it will overall tie into my final design. The problem is it will display perfectly at 100% in IE6 and I know I need to define a min-height for IE7 and FireFox, but I really don't have the slight clue how I should go about doing this. Any help would be greatly Appreciated.

Quote

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
min-height: 100%; /* IE7 FIX */
font-size: 8pt;
font-family: verdana, sans-serif;
text-align: center;
background-image: url(gfx/body_bg.png);
background-color: #CCC;
cursor: default;
color: #000;
}
#pagebox-bg {
height: 100%;
min-height: 100%; /* IE7 FIX */
width: 800px;
background-color: #FFF;
margin: 0 auto 0 auto;
}

The other issue is im trying to get all the content with in the container #pagebox-bg to respond "correctly" to width: 100%; however when I specify this my footer that contains the Powered By extends past the right side shadow.

Quote

#bottom {
clear: both;
float: left;
width: 720px;
padding: 3px 9px 3px 9px;
background-image: url(gfx/topmenu_bg.png);
background-repeat: repeat-x;
background-color: #E8E8E8;
border: 1px solid #369;
font-style: normal;
text-align: right;
color: #333;
}

I've also added

Quote

<!--[if IE 7]>
<style type="text/css">
#pagebox-bg {min-height:100%;height:auto;}
#shadow-left {min-height:100%;height:auto;}
#shadow-right {min-height:100%;height:auto;}
</style>
<![endif]-->

to my global.tpl.php file

and removed the min-height referance in the styles.css file.

Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.

body {
margin:0;
padding:0;
height:100%;
}

I am also trying to get the height 100% to work on the default theme. but to know luck.

body, html {height: 100%; margin:0; padding:0;}
#div {height: 100%}

..in your original post works here in firefox.

This little trick will work on most browsers (ff ie5+ ie7)

body {
  min-height: 100%;
 height: auto !important;
height: 100%;
}