Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post

    How do I get 100% height columns in both IE and FF?

    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...
    Code:
    /* 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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You want the logo to appear over the nav? Update the changes please.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your logo CSS
    Code:
    position:relative;
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks! That did the trick. I appreciate all the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •