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 15 of 15
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts

    100% Hieght in non-ie6

    Hi,

    I am trying to have a border on the left and another on the right that run from top to bottom of the browser window regardless of its size. I have achieved this in ie6 by repeating (y) a 1 pixel high image down the left side of the body:

    body{
    background-image: url(../images/body_bg.jpg);
    background-repeat: repeat-y;
    background-position: left;
    }

    and then setting a container div to height:100% and width: 100% and repeating another 1 pixel high image down the right hand side:

    #container{
    background-image: url(../images/container_bg.jpg);
    background-repeat: repeat-y;
    background-position: right;
    width:100%;
    height:100%;
    }

    FF seems to ignore the height rule and only stretches when I put content into the div.

    Any ideas how I can get it to stretch all the way in FF?

    Thanks
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Do you have a link and have you set margins and padding in the parent elements to a height and width of 100% as well?

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply

    The link is: http://hapuk.coreware.co.uk/test/priddle/index.htm

    Here is the entire CSS so far:

    *{
    border:0;
    margin:0;
    padding:0;
    }

    body, html{
    height:100%;
    }

    body{
    background-image: url(../images/body_bg.jpg);
    background-repeat: repeat-y;
    background-position: left;
    background-color:#fafafa;
    }

    #container{
    background-image: url(../images/container_bg.jpg);
    background-repeat: repeat-y;
    background-position: right;
    width:100%;
    height:100%;
    }
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Why do you have two body tags? Take the body out of the first bit and put height: 100% in the ONLY body!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok done.

    Thanks

    Still got the problem though.

    What now?
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #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
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <base href="http://hapuk.coreware.co.uk/test/priddle/css/" />
    <style type="text/css" media="screen">
    /* CSS Document */
    *{
    border:0;
    margin:0;
    padding:0;
    }
    html{
    height:100%;
    font:90%/1.4 "Trebuchet MS", Arial, Helvetica, Verdana, Sans-Serif;
    }
    body {
    background:#FAFAFA url(../images/body_bg.jpg) repeat-y;
    height:100%;
    }
    #container {
    min-height:100%;
    background:url(../images/container_bg.jpg) repeat-y top right;
    min-width:775px;
    }
    #logo {
    background:url(../images/logo.jpg) no-repeat;
    margin-left:34px;
    float:left;
    width:222px;
    height:103px;
    text-indent:-1000px;
    display:inline;
    }
    #nav {
    margin: 0 30px 0 250px;
    background:url(../images/nav_bg.jpg) repeat-x;
    height:113px;
    }
    #nav ul {
    background:url(../images/nav_ul.jpg) no-repeat top right;
    height:83px;
    padding-top:10px;
    padding-bottom:17px;
    list-style:none;
    }
    #nav li {
    font-weight:bold;
    text-align:center;
    display:block;
    float:left;
    height:50px;
    width:100px;
    padding-top:30px;
    border-right:2px solid #334F63;
    }
    #nav li a{      
    text-decoration:none;
    color:#FFF;
    line-height:0.8em;
    font-size:1.2em;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #container {
    height:100%;
    }
    #logo {
    margin-right:-3px;
    }
    #nav {
    margin-left:0;
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="container">
         <div id="logo">Palace Chambers</div>
         <div id="nav">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="index.php">Properties</a></li>
                  <li><a href="index.php">About Us</a></li>
                  <li><a href="index.php">Contact Us</a></li>
              </ul>
         </div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Aerospace Eng

    What did you do?

    Cheers
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #8
    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 tell me. Compare it to your original code and see the differences.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    For someone who constantly berates other users for not posting EXACTLY as they should, you haven't done yourself any favours Aerospace. What if somebody doesn't understand the code or how it works. Simply looking at the changes doesn't explain WHY something has worked, does it now??

    Little bit of a description isn't too much to ask :-)
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    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
    Its also not hard for the OP to compare the code I posted with what they originally had. They likely copy and pasted. If they did infact compare it then they would have seen one little line. min-height. If you were so inclined to an explanation then maybe you could have explained it rather than say what I should or shouldn't do. I think now though is the time to just move on.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Yes sir :-(
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah. That's great thanks. But I can't tell what you did?
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #13
    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 used min-height where as you used just height. That is what I said in my last post as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Mar 2006
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Guys,

    Didn't mean to start a fight! The reason I was having difficulty seeing the difference is because I had made several changes to my original css file by the time the reply was posted.

    Anyway, I have another problem (if you're not sick of looking at this one). This time in ie6 when I make the screen smaller than about 780px wide the blue links bar breaks away from the red logo bit and sits beneath it.

    Check it out: http://hapuk.coreware.co.uk/test/priddle/index.htm

    The CSS is here: http://hapuk.coreware.co.uk/test/priddle/css/main.css

    By the way, how do you post CSS into a special window (like aerospace engineer did)?

    Thanks

    Chris
    Chris Holbrook
    Freelance Designer and Musician
    Freelance Web Designer and Musician: Bristol, UK
    Visit my site: http://www.chrisholbrook.com

  • #15
    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
    IE6 doesn't support min-width. I prefer to use JS to fake it. The way I see it is if the user is using IE then they likely don't know how to disable javascript or they wouldn't be using IE in the first place. Add this after your default stylesheet in your html
    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "750px" : "auto") : "750px") : "auto" );
    }
    </style>
    <![endif]-->
    To post code in code tags read this page

    http://www.codingforums.com/misc.php?do=bbcode
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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