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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool [CSS] 100% Height issue in FF/IE

    So, it seems one fix for firefox creates a problem in IE and the fix for that problem, creates a problem in Firefox.. I know there is a middle ground here somewhere!

    My problem right now:
    I am using

    body,html{ height: 100%}

    #content{ min-height: 100%}

    The goal I want is for my website block to always span 100% of the viewport, even if there isnt enough text to fill up the screen.

    What I am getting: IE works fine. Mozilla will fill up 100% of the viewport but will not fill more than that if the content fills more than 100%. What I am left with is this:

    http://sholnay.com/clientsteamboat/test.php

    click test2 and then scroll down, you should see what I am talking about.

    If you need more info about the setup/code I am using and dont want to right click view source, let me know or message me on AIM: sholnay.

    THANK YOU for anyones help and patience!

    -Shaun

    Sidenote: If I fix the problem with firefox - it usually means I cant get IE to span the whole viewport height, it will only span the content size.

  • #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
    I think your issue is you not knowing that min-height doesn't work in IE6 but it does treat normal height like min-height.

    Code:
    #bodyshadow{
    	position: relative;  
    	width: 800px;
    	min-height: 100%;
    	padding: 0px;
    	margin: 0 auto;
    	text-align: left;
    	background: #fff url("images/mainbg.gif") repeat-y;
    }
    * html #bodyshadow {
    height:100%;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I think your issue is you not knowing that min-height doesn't work in IE6 but it does treat normal height like min-height.

    Code:
    #bodyshadow{
    	position: relative;  
    	width: 800px;
    	min-height: 100%;
    	padding: 0px;
    	margin: 0 auto;
    	text-align: left;
    	background: #fff url("images/mainbg.gif") repeat-y;
    }
    * html #bodyshadow {
    height:100%;
    }
    ok - now Ive got it.

    Thank you so much!
    Last edited by sholnay; 10-24-2006 at 12:03 AM.


  •  

    Posting Permissions

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