...

View Full Version : How do I get 100% height columns in both IE and FF?



Paithar
09-27-2006, 09:57 PM
Ok, I've got a layout I'm trying out. The problem is that I want my footer to appear at the very bottom of the screen, thereby giving my two columns 100% height. It's not happening in IE7, FF1.5.0.7, nor is it happening in Opera 9.

Here's a link to the webpage...http://www.oasisgamingusa.com/testlayout/index.php

Here's my css file...

/* Stylesheet for Oasis Gaming USA website */
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #ffffff;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, sans-serif;
}
html>body {
font-size: 9pt; /*Resets font size for non-IE browsers*/
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
clear : both;
display : block;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#menu li {
float: left;
position: relative;
width: 10em;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li>ul { /* resets top and left for non IE browsers */
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu a, #menu a:active, #menu a:visited {
width: 9.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 90%;
min-height: 100%;
background-color: #ffffff;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 168px;
}
#logo {
margin: 0;
padding: 0;
width: 159px;
height: 102px;
position: absolute;
top: 5px;
left: 80px;
display: block;
background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
z-index: 100;
}
#menu {
margin: 90px 0 0 0;
padding: 5px;
width: 1000px;
height: 15px;
background-color: #15483a;
position: absolute;
z-index: 90;
}
#content {
margin: 0;
padding: 0;
width: 70%;
min-height: 100%;
float: left;
border: 1px solid red;
}
#right {
margin: 0;
padding: 0;
width: 25%;
min-height: 100%;
float: right;
border: 1px solid blue;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
color: #d2bc2d;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}



Any help would be greatly appreciated. I know that IE doesn't recognize min and max values but for some reason firefox doesn't seem to be recognizing them either for me at the moment.

Thank you

_Aerospace_Eng_
09-27-2006, 10:31 PM
Try this

html, body {
margin: 0;
padding: 0;
width: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #ffffff;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, sans-serif;
height:100%;
}
html>body {
font-size: 9pt; /*Resets font size for non-IE browsers*/
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
clear : both;
display : block;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float:right;
}
#menu li {
float: left;
position: relative;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li>ul { /* resets top and left for non IE browsers */
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu a, #menu a:active, #menu a:visited {
width: 9em;
padding : 0 0 0 .5em;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
text-align:center;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 90%;
min-height: 100%;
background-color: #ff0;
position:relative;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 168px;
}
#logo {
margin: 0;
padding: 0;
width: 159px;
height: 102px;
float:left;
margin-top: 5px;
margin-left:40px;
display: inline;
background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
z-index: 100;
}
#menu {
margin: 90px 0 0 0;
padding: 5px 0;
height: 15px;
background-color: #15483a;
position: absolute;
z-index: 90;
width:100%;
left:0;
}
#content {
margin: 0;
padding: 0;
width: 70%;
min-height: 100%;
float: left;
border: 1px solid red;
}
#right {
margin: 0;
padding: 0;
width: 25%;
float: right;
border: 1px solid blue;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
color: #d2bc2d;
position:absolute;
bottom:0;
left:0;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}

You won't be able to get the columns to go 100% height. You'll have to use the faux columns approach. http://www.alistapart.com/articles/fauxcolumns

Paithar
09-28-2006, 05:30 PM
Thank you _Aerospace_Eng_, that looks a lot better except for one tiny detail. For some reason the logo is appearing beneath the menu bar. I thought that if it had a higher z-index it would appear on top but maybe the display: inline; is messing it up. What do you think? If I can figure that part out then I'm good.

Thank you for your help on this. I'm still trying to learn CSS as you can probably tell.

_Aerospace_Eng_
09-28-2006, 05:35 PM
You want the logo to appear over the nav? Update the changes please.

Paithar
09-28-2006, 06:43 PM
Sorry about that. I was testing on my personal machine. I've updated the original testlayout website with the new changes that you suggested I make.

Have any ideas why the logo isn't appearing on top of the menu bar?

Thanks

_Aerospace_Eng_
09-28-2006, 10:20 PM
Add this to your logo CSS

position:relative;

Paithar
09-29-2006, 03:45 PM
Thanks! That did the trick. I appreciate all the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum