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

    strange problem with "html, body" height 100% technique

    Ok so this one is really frustrating, especially since I've used the html, body {min-height:100%;} code before, numerous times, and never had a problem. Now, for the life of me, I can't figure out where I've gone wrong on my latest project.

    I have a 3 collumn layout with footer and header, pretty simple stuff. Now, I enclosed the collumns, footer and header in a container so I could apply a drop shadow. Still, simple. I then applied the drop shadow, and applied the html, body 100% technique. Since the drop shadow adds 15px on all sides, the bottom was, for all intensive purposes, margined. So I came up with the following code to "clip" the excess;

    #clipping {
    /*height:100%;*/
    min-height:100%;
    margin:0;
    padding:0;
    overflow-y:hidden;
    }

    where #clipping surrounds my drop-shadowed container. It's worked for me before, and removing it does not resolve my problem (which, dont worry, I'm getting to).


    My problem is this; with the above code (with height commented out) my pages with content longer than the viewport behave perfectly. The bottom of the footer is flush with the bottom when scrolled down. However, on pages with content shorter than the viewport, the container just contracts to where it looks like I didnt even try to get it close to the bottom.

    Now, when I remove my comment from the height declaration, my pages with shorter content become perfect, but the standard problem with height:100% and longer content shows up; I can't scroll.

    So here's my code. I've posted what I think is relevant, hence ... in my css indicates purely style stuff, ie the navbar and text styling and so forth. let me know if i should post the whole stylesheet.

    the site is in testing at www.valleyagins.com/newSite/index.html so you can see what im talking about. for instance, the Home page has longer content, and the Contact page has shorter content.



    CSS


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


    html, body {
    height:100%;
    }

    body {
    list-style-type:none;
    text-decoration:none;
    background-color:#476C95;
    background-attachment: fixed;
    background-image: url(images/backgroundGradient.png);
    background-repeat: repeat-x;
    height:100%;
    margin:0;
    padding:0;
    font-family: Verdana, Geneva, sans-serif;
    }



    #clipping {
    /*height:100%;*/
    min-height:100%;
    margin:0;
    padding:0;
    overflow-y:hidden;
    }

    #body {
    margin: 0px auto;
    width: 800px;
    background-color:#fff;
    -moz-box-shadow: 0px 0px 30px #7e97b4;
    -webkit-box-shadow: 0px 0px 30px #7e97b4;
    box-shadow: 0px 0px 30px #7e97b4;
    min-height:100%;
    }

    #banner {
    width: 800px;
    height:200px;
    }

    #navBar {
    width:100%;
    height:35px;
    background-color:#ffebce;
    }


    ......


    ......


    #colLeft {
    float:left;
    width:150px;
    }


    #mainContent {
    width:400px;
    float:left;
    padding:0px 50px 0px 50px;
    min-height:100%;
    }

    #colRight {
    float: left;
    width:150px;
    }

    .clearfloats {
    clear:both;
    }

    #footer {
    width:100%;
    height:75px;

    }

    .......



    slimmed down HTML Structure

    <body>


    <div id="clipping">
    <div id="body">

    <div id="banner"> <a href.....><img..... /></a></div><!--banner-->

    <div id="navBar">

    ......

    .......



    </div><!--navBar-->



    <div id="colLeft">

    ...
    ....

    </div> <!--colLeft-->
    <div id="mainContent"><!-- InstanceBeginEditable name="EditRegion3" -->
    <div id="fill">


    ......
    .......
    .....


    </div>
    <!-- InstanceEndEditable --></div>
    <!--mainContent-->

    <div id="colRight">
    </div><!--colRight-->


    <div class="clearfloats"><!-- --></div>
    <div id="footer">


    </div><!--footer-->

    </div><!--body-->

    </div><!--clipping-->


    </body>
    <!-- InstanceEnd --></html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Why do you need that extra <div id="clipping"> there? Isn't that inner <div id="body"> with min-height: 100%; enough in your case?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    the #clipping div is there to clip the box shadow that is on the #body div. when I applied the drop shadow with a radius of 15px, it acted as a 15px margin in instances where the 100% height was working correctly. so the #clipping div clips the shadow from the top and bottom.

    i have not found an easier way of applying a box shadow to only two sides of an element using only css. if you have a better method i would love to try it.

    also, i tried removing the box shadow and the clipping div. didnt affect my problem.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    so the #clipping div clips the shadow from the top and bottom.
    also, i tried removing the box shadow and the clipping div. didnt affect my problem.
    I don't understand that. Could you please make a version without that "clipping div" and describe the issue?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok. I made a second upload of the site without the clipping div. I uploaded it to a sub folder so you can see the difference it makes.

    Site A: Whole Site with Clipping Div

    Site B: Whole Site without Clipping Div

    They can be differentiated by whether or not they include the "no_clipping" subdirectory in the url. Site B is in this directory, and DOES NOT have my "clipping div."



    Ok. Here are instructions to see my problem.


    1) On Site A, you should be at the Home page by defualt. Scroll down to the bottom. You will see that the #body div (my main container) is flush with the bottom.

    2) Still on Site A, navigate to the Contact Us page. Notice that since the content is shorter than the viewport, the div is not flush with the bottom. This is the main problem I am trying to solve; the difference between the pages with longer and shorter content.

    3) For those who believe the clipping div may be the problem, it has been removed on Site B. Follow the steps 1+2 on Site B, and notice that on neither page does the #body div make contact with the bottom. This is due to the box-shadow; it acts as a margin, pushing the div away by 15px. This is what the "clipping div" fixes.


    Because removing the clipping div does not affect the shorter pages, I am inclined to believe that it is not the source of my problem.

    Also, instead of posting my code here, because it is so long, it would probably be easier for you to view the source code from the site itself and navigate to the style sheet that way. If I'm making an incorrect assumption, please let me know.


    Thanks,
    Carl
    Last edited by carlrwyble; 02-25-2011 at 11:08 AM.

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Why do you need that extra <div id="clipping"> there? Isn't that inner <div id="body"> with min-height: 100%; enough in your case?

    And no, it doesnt seem to be enough (although youre right, it should be) which is what is really confusing me.

    You can see the exact same code in action (without the clipping div) at the second link in my reply above.

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One more thing; in my attempts to not be one of those people who simply posts their code, says what they want and ask you to do it for them without any real description of the problem, I might end up being quite verbose. I'm sorry if I type too much but I just want to make my problem as easy to understand as possible.

  • #8
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just noticed something even more annoying: the pages that are longer seem to shift left a couple pixels for no reason. You can see the jump by using the left navigation to switch between Personal/Crop/Farm and Ag (the longer pages) and Business/Life+Health/Bonds/Specialty (the shorter pages).


    All of these pages use exactly the same code. The only difference is the content inside the editable region.

    This just keeps getting weirder...

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd make a single full height div (with min-height for FF and height for IE6) and apply an 840px wide (and 1px height) background image (with shadows at either ends) and set repeat-y to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello carlrwyble,
    Have you solved your issue #2 then? When I remove content from http://www.valleyagins.com/newSite/n...ing/index.html I am left with a full height white page with a shadow.


    I just noticed something even more annoying: the pages that are longer seem to shift left a couple pixels for no reason.
    The longer pages shift over the width of the scrollbar that is not present on the shorter pages. The usual solution is to force the scrollbar to be present even on pages that don't require it.
    Add overflow-y: scroll; to the CSS for body to force the scrollbar.
    Demo here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    carlrwyble (02-25-2011)

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Also, instead of posting my code here, because it is so long, it would probably be easier for you to view the source code from the site itself and navigate to the style sheet that way. If I'm making an incorrect assumption, please let me know.
    You're right, we can easily get your code and CSS from the links you provide. In fact it's easier because then we can see your images and we don't have to re-assemble the code you post to reproduce your issue locally.

    Posting code works to, when posting code in the forum though, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    carlrwyble (02-25-2011)

  • #12
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    k, so i removed both the drop shadow and the clipping, and for some reason its working now. im befuddled because it appears the box-shadow was causing the problem on my browser.... anyways, it seems that the only sane solution is to remove both and just use the damned background image technique.

    thanks to everyone who chipped in. and thanks excavator for the scroll tip. i had to use both the overflow and the 100.1% things, was i supposed to only need one or the other? cause i tried them separately and it seems they only work together.

    if there are any people reading who have such powers, in CSS3.1 or whatever, please make box-shadow able to remove blur from specific sides.
    Last edited by carlrwyble; 02-25-2011 at 10:49 PM.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by carlrwyble View Post
    i had to use both the overflow and the 100.1% things, was i supposed to only need one or the other? cause i tried them separately and it seems they only work together.
    Just the one, overflow-y: scroll;, should work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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