I need help with div colors (css)

Discussion in 'HTML & Website Design' started by emeraldtoucan, Oct 27, 2008.

0
  1. #1
    I'm still pretty new to css (and website building in general for that matter) and I'm trying to create a css layout. However I'm running into a problem. I want the light gray color of the css frames to stretch the whole length of the page except for just 10px at the bottom of the screen.

    Basically I want to be able to do this (except 10px of that green coloration on the bottom)

    http://toucanets.freehosting.net/main2.html

    but not have the text bleed into green space (rather I want the gray to continue, just leaving 10px at the bottom) as with when the css is used on this page for example:

    http://toucanets.freehosting.net/haltest.html


    and here's that css:


    body{
    margin: 0px;
    padding: 0;
    border: 0;
    overflow: auto;
    height: 900px;
    max-height: 100%;
    background:#99FFCC;
    margin-right:10px;


    }

    #header{

    position: relative;
    height: 161px;
    overflow: hidden;
    background:#EFEFF3;
    color:#000000;
    margin-top:10px;
    margin-right:0;
    margin-left:10px;

    }

    #contents {
    position:absolute;
    top:162px;
    left:200px;
    right:75px;
    height:100%;
    margin-top:0;
    margin-right:0;
    margin-left:0;
    margin-bottom:10px;
    background:#EFEFF3;
    color:#000000;
    }




    #rightframe {
    position:absolute;
    height:100%;
    top:162px;
    right:10px;
    margin-top:0;
    margin-right:10px;
    margin-left:0;
    margin-bottom:10px;
    background:#EFEFF3;
    color:#000000;
    }





    #menu{
    top: 120px;
    left: 10px;
    right: 200px;
    background:#EFEFF3;
    color:#000000;
    margin-top:0;
    margin-right:0;
    margin-left:10px;
    margin-bottom:10px;
    height:100%;
    }
     
    emeraldtoucan, Oct 27, 2008 IP
  2. Sean@WMS

    Sean@WMS Peon

    Messages:
    134
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You have IE7 or access to it? Look at your issues there first -- they are much larger issues, and you absolutely cannot disregard IE7. Simmilar issues with IE6 which is also very alive an used.

    Work on that, and then tomorrow I'll have some time to help you with your original question (hint: don't use/hide overflow unless you need to do).
     
    Sean@WMS, Oct 27, 2008 IP
  3. emeraldtoucan

    emeraldtoucan Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yeah the extra scrollbar on IE. But I was hoping to tackle that issue after dealing with the one mentioned here, unless that isn't possible.

    EDIT: Ok I've messed with getting rid of that scroll bar in IE, but I can't manage to do so without screwing up how the page functions in firefox. I've even tried a few codes I found online that supposedly only affect how the page functions in IE, but have found they either do nothing, or also screw up how it works in firefox.

    for example as far as scrollbars go this page looks right in IE, but not firefox.

    toucanets.freehosting.net/haltest2.html


    this is the code I added

    body{
    margin: 0px;
    padding: 0;
    border: 0;
    overflow: auto;
    height: 900px;
    max-height: 100%;
    background:#99FFCC;
    margin-right:10px;


    <!--[if IE]>
    div.code overflow:visible; overflow-x:auto; overflow-y:hidden;
    padding-bottom:15px; <![endif]-->}

    supposedly the parts starting with <!--[if IE]> is supposed to just affect how the page functions in IE, but so not true.


    EDIT:
    ok, looks like I've taken care of the scroll bar problem.

    toucanets.freehosting.net/main3.html
     
    emeraldtoucan, Oct 27, 2008 IP