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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Finland
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unable to define bottom margin

    Here is a link to a test page that I'm working on (most of the links don't work and the site graphics are far from finished, but I'm trying to get the basic layout down first). What I want to do is have the container part (which contains the side bars and the center content) to fill up a bigger part of the page height-wise even when there is no content to fill that space. I don't like having that much empty space below it, but I also don't want to make it a fixed height and make the page unnecessarily high for people with smaller screen resolutions. So, I want a bottom margin that's either a fixed amount of pixels or a % of the page height, or the container to be a certain % of the page's height. When the page was first viewed in Quirks mode, setting a height in % for the container used to work, but now that it's in Standards compliance mode, suddenly it stopped working. I've tried setting a bottom or a bottom margin value in % or pixels, but there is no change. I've also tried including the footnote in the container and then setting the container's bottom margin, but still no change. Any ideas on how to make it work again?

    (There is also stuff in the CSS that is not used on this specific page, but elsewhere on the site.)

    Here's the CSS:

    body
    {
    background-color: #9BB4BB;
    background-image: url("graphics/bg19.gif");
    }
    div#title
    {
    background-color: #D3CEC1;
    background-image: url("");
    font-family: verdana, "times new roman", serif;
    font-size: 100%;
    color: #000000;
    text-align: center;
    border-top: 2px solid #413333;
    border-left: 2px solid #413333;
    border-right: 2px solid #413333;
    padding-top: 10px;
    height: 100px;
    margin-left: 10%;
    margin-right: 10%;
    }
    div#container
    {
    background-color: #FFFFFF;
    border-top: 1px solid #413333;
    border-left: 2px solid #413333;
    border-right: 2px solid #413333;
    border-bottom: 1px solid #413333;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 100px;
    top: 0px;
    bottom: 0px;
    position: relative;
    }
    div#download
    {
    font-family: verdana, "times new roman", serif;
    font-size: 80%;
    text-align: center;
    color: #000000;
    margin-left: 120px;
    margin-right: 120px;
    top: 20px;
    padding: 10px;
    position: relative;
    z-index: 8;
    line-height: 120%;
    }
    div#menu
    {
    background-color: #D3CEC1;
    font-family: verdana, "times new roman", serif;
    font-weight: bold;
    font-size: 90%;
    color: #000000;
    text-align: left;
    border-right: 2px solid #413333;
    width: 120px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    padding-left: 5px;
    padding-bottom: 5px;
    position: absolute;
    line-height: 200%;
    }
    div#affiliates
    {
    background-color: #D3CEC1;
    font-family: verdana, "times new roman", serif;
    font-weight: bold;
    font-size: 90%;
    color: #000000;
    text-align: right;
    border-left: 2px solid #413333;
    width: 120px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding-right: 15px;
    position: absolute;
    line-height: 200%;
    }
    div#text
    {
    font-family: verdana, "times new roman", serif;
    font-size: 90%;
    text-align: left;
    color: #000000;
    margin-left: 120px;
    margin-right: 120px;
    top: 20px;
    padding: 10px;
    position: relative;
    z-index: 8;
    line-height: 120%;
    }
    div#links
    {
    font-family: georgia, "times new roman", serif;
    font-size: 90%;
    color: #000000;
    text-align: center;
    margin-left: 120px;
    margin-right: 120px;
    top: 20px;
    padding: 10px;
    position: relative;
    z-index: 8;
    }
    div#footnote
    {
    background-image: url("graphics/translucent.png");
    text-align: center;
    font-family: verdana, "times new roman", serif;
    font-size: 10px;
    color: #000000;
    border: 1px solid #000000;
    height: 40px;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 5px;
    overflow: hidden;
    }
    a
    {
    font-family: verdana, "times new roman", serif;
    color: #000000;
    font-size: 100%;
    font-weight: normal;
    }
    a.download
    {
    font-size: 90%;
    }
    a.text
    {
    font-size: 90%;
    }
    a.menu
    {
    font-size: 100%;
    }
    a.page-menu
    {
    font-size: 100%;
    font-weight: bold;
    }
    a.current
    {
    font-weight: bold;
    }
    a:visited
    {
    color: #606060;
    }
    a:hover
    {
    color: #9BB4BB;
    }
    img.title
    {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.fsf-banner
    {
    width: 120px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    position: absolute;
    }
    img.main-preview
    {
    text-align: center;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    margin-left: auto;
    margin-right: auto;
    }
    img.cep
    {
    margin:0px 0px 0px 0px;
    border-style: none;
    }
    img.link-banner
    {
    padding: 2px;
    border-style: none;
    }
    .bold
    {
    font-weight: bold;
    }
    p.bold
    {
    font-family: verdana, "times new roman", serif;
    font-weight: bold;
    font-size: 90%;
    }
    p.normal
    {
    font-family: verdana, "times new roman", serif;
    font-weight: normal;
    font-size: 90%;
    }
    Last edited by IgnorantBliss; 06-08-2007 at 04:30 PM.
    In order to make an apple pie from scratch, you must first create the universe. -Carl Sagan

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If I get what you mean then you need to add a min-height to the container in FF, which will mean that the container div will not get smaller than that set height, but will stretch if it needs to.

    Now because IE does not recognise min-height, you need a conditional statement in the header of your page to allow for IE to recognise it....

    <!--[if IE]>
    #container {
    height: 600px; /* change to your value */
    }
    <![endif]-->
    Last edited by ahallicks; 06-08-2007 at 04:34 PM.
    "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

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Finland
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So there is no way to have the container stay "flexible" and only be as high as it needs to be on a smaller resolution, but still get bigger on bigger resolutions when there is more space to fill? Say, sometimes the container would only need to be 400 pixels high to show the actual content properly, but if I set the minimum height to that, it will not expand if there is no content to expand it. I'd rather have the empty space in the bottom be filled with more of the container than just the background (I'm viewing the page at a 1600x1200 resolution and half the height of the page is just background), but I don't want to set the minimum height to something like 1000 pixels because then for people viewing the page on smaller resolution there is unnecessary stretching of the page.
    In order to make an apple pie from scratch, you must first create the universe. -Carl Sagan

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by IgnorantBliss View Post
    When the page was first viewed in Quirks mode, setting a height in % for the container used to work, but now that it's in Standards compliance mode, suddenly it stopped working. I've tried setting a bottom or a bottom margin value in % or pixels, but there is no change.
    CSS 2.1 Working Draft, Section 10.5 states that for an element in the normal flow, a percentage height only applies if its containing block has an explicitly set height. That is why it isn't working in standards mode. A similar statement holds for the margin and padding properties.

    In style sheets you often see this kind of stuff:
    Code:
    html, body {
      height: 100%;
    }
    That is to ensure that a percentage will be working for a container nested within the body element.

    With this knowledge I think you will be able to get your page to render the way you want.
    Quote Originally Posted by ahallicks View Post
    Now because IE does not recognise min-height, you need a conditional statement in the header of your page to allow for IE to recognise it....
    Yeah, but keep in mind that IE7 does support min-height. You should only feed IE 6 and below with that set of styles.

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Finland
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, that was a nicely simple solution and worked perfectly .
    In order to make an apple pie from scratch, you must first create the universe. -Carl Sagan


  •  

    Posting Permissions

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