SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height 100% - different display in IE / Firefox/ Opera

    I have a problems with how the different browsers display my page. IE6 is displaying it how i want with the background colour of white showing all the while i have content and then adding the padding/margin sizes on top.

    However in Firefox and Opera the white background only seems to show for a very small section of the page.

    All of my content is held in a container div as follows:


    #container {
    width:955px;
    align: center;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    margin-top:20px;

    }

    Then I have another div nesting in this which displays my right hand content:


    #right_content {
    border-left: 1px solid #00000000;
    margin-left: 2px ;
    margin-right:2px ;
    background: #ffffff;
    height: 100%;

    }

    And finally i have another div nested inside that which contains my gallery


    .gallery{

    float: left;
    margin-bottom: 2em;


    }
    dl.gallery
    {
    border: 1px solid #fff;
    background-color: #B2DBFB;
    width: 252px;
    max-height: 25em;
    text-align: center;
    padding: 10px;
    align: left;
    margin-right: 1em;
    margin-left: 1em;
    margin-bottom: 4em;
    }

    Can anyone tell me where i'm going wrong? The only way I seem to be able to get Firefox and Opera to display my white background to the bottom of the document is by specifying a pixel height i.e.:

    height: 1200px;

    which obviously i do not want to do, as each page on my website will have a different height size dependent on the amount of contained contained in it.

    With many thanks for any light on this matter - i've been tearing my hair out on this one for a couple fo days!!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    IE6 is displaying it incorrectly

    height: 100%; means you want the element to be 100% and that's final.
    IE6 treats it as min-height and will expand to fit more content.
    You need to feed all browsers min-height: 100%; then deliver IE6< height: 100%;

    If you haven't seen the FAQ there's a wealth of good info in there:
    height: 100%;

    --
    If you need specific help with your page, you'll need to supply the HTML as well - The css can't do much without it. Though I believe you need to set body and html to height: 100% also to make it work. It's all in the FAQ, and the author knows his 100% high model inside-out
    --

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still doesn't like the height in FF & Opera

    Hi I really appreciate your input on this one. Unfortunately after altering the CSS so that the body height is 100% and the height for the right_content is min-height: 100% is still does not display the white background all the way down.

    I am attaching the CSS file (V4) and the html file (holdingpageUPLOAD2) - maybe i'm doing somethign wrong in the html?

    Thanks again.

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    attachments as mentioned

    Apologies they didn't get uploaded first time.

    I have highlighted in red the majority of the divs that are being used in the V4 css for this holdingpageUPLOAD2. Hope that helps.

    Thanks.
    Attached Files Attached Files

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you specify a percentage height, it is a percentage of the parent height if that parent has a height specified. As #container does not have a height assigned, the 100&#37; height of #right_content is meaningless.

    What do you want it to be 100% of ?


Bookmarks

Posting Permissions

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