Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scrollbars not appearing – absolute positioning

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #30241
    Turts
    Member

    Hi all.

    I’m trying to create a site with a full-page background, with a div (contained within a wrapper) that sticks to the bottom of the window. This bit I’ve achieved fine, but when you resize the window (smaller) no scrollbars appear (even though I’ve set them to auto in the container div.

    I’ve looked at it in Firefox via the WebDeveloper plugin and even though it is contained, it seems to be showing that it’s not. I’ve attached the CSS here (apologies if it’s something of a mess – print designer by trade).

    * {
    margin: 0;
    padding: 0;
    font-size: 90%;
    }

    body
    {
    background: #000;
    width: 100%;
    height: 100%;
    }

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    margin: 0;
    padding: 0;
    }


    /*
    Basic Divs */

    #wrapper {
    display: block;
    width:960px;
    margin:0px auto;
    height: 100%;
    overflow: auto;
    }

    #header {
    display: block;
    width:960px;
    margin:0px auto;
    margin-top: 5px;
    z-index: 600;
    }

    #headerwrapper {
    display: block;
    background: #000;
    height: 46px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 1000;
    border-top: 1px solid #666;
    border-bottom: 1px solid #333;
    }

    #sidebar {
    float: right;
    }

    #footer {
    float: left;
    }

    #main
    {
    padding: 30px 0 0 0;
    bottom: 0;
    position: absolute;
    }

    #main_right
    {
    padding: 30px 0 0 0;
    position: absolute;
    margin-left: 540px;
    bottom: 0;
    }

    #content
    {
    width: 420px;
    background: #fff;
    position: absolute;
    bottom: 0;
    padding: 10px 20px 75px 20px;
    border-top: 5px solid #000;
    z-index: 50;
    }

    #ratings
    {
    width: 30px;
    height: 93px;
    position: relative;
    left: 460px;
    top: 0px;
    background: #000;
    -moz-opacity: 0.50;
    opacity:0.5;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    z-index: 60;
    }

    #ratingicons
    {
    width: 30px;
    height: 100px;
    position: relative;
    left: 460px;
    top: -91px;
    z-index: 70;
    }

    #ratingicons img
    {
    padding: 3px;
    -moz-opacity: 1;
    opacity:1;
    }



    /*
    Background controls */

    #scanlines
    {
    background-image: url('grid.png');
    position: absolute;
    top: 0;
    left: 0;
    z-index: -500;
    width: 100%;
    height: 100%;
    }


    /*
    Global Settings */

    #content p
    {
    font-family: Georgia;
    font-size: 12px;
    line-height: 1.6em;
    margin: 0 0 15px 0;
    }

    #content h1
    {
    font-size: 30px;
    letter-spacing: -2px;
    margin: 5px 0 -10px 0;
    }

    #header a
    {
    text-decoration: none;
    color: #fff;
    }

    #header a:hover
    {
    color: #777;
    }


    /*
    Welcome Settings */

    #welcomecontent p
    {
    font-family: Georgia;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    margin: 0 0 15px 0;
    }

    #welcomecontent h1
    {
    font-size: 35px;
    color: #ec008c;
    color: #fff;
    letter-spacing: -2px;
    text-shadow: 2px 2px 2px #000;
    margin: 0 0 -10px 0;
    }

    #welcomecontent
    {
    width: 460px;
    position: relative;
    left: 10%;
    top: -200px;
    z-index: 200;
    }


    /*
    Navigation */

    #logo
    {
    width: 160px;
    float: left;
    }

    .nav{
    height:50px;
    padding-left:13px;
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    display: block;
    }

    .nav a{
    display:block;
    float:left;
    line-height:18px;
    outline:medium none;
    text-decoration:none;
    min-height: 35px;
    padding:2px 35px 0 0;
    }

    .nav li
    {
    display: inline;
    }

    .nav li a strong {
    display:block;
    font-size:14px;
    font-weight:normal;
    }

    .nav li a span {
    display:block;
    font-size:12px;
    line-height:14px;
    font-weight: normal;
    }



    /*
    Thumbs controls */

    .thumbs img
    {
    border: 5px solid #ccdde7;
    width: 410px;
    height: 120px;
    margin: 0 0 10px 0;
    }


    /*
    Portfolio controls */

    #portfolio_content
    {
    width: 960px;
    position: absolute;
    bottom: 0;
    padding: 10px 8px 95px 17px;
    z-index: 50;
    background: #fff;

    }

    #portfolio_content h1
    {
    font-size: 30px;
    letter-spacing: -2px;
    margin: 5px 0 -10px 0;
    }

    #portfolio_content img
    {
    margin: 15px 11px 0 0;
    -webkit-box-shadow: 3px 3px 5px #666;
    -moz-box-shadow: 3px 3px 5px #666;
    float: left;
    z-index: 740;
    }

    .polaroid_titles
    {
    position: relative;
    left: -180px;
    top: 205px;
    z-index: 800;
    float: left;
    margin-right: -150px;
    font-size: 18px;
    }

    .polaroid_titles a
    {
    text-decoration: none;
    color: #c0bcac;
    }
    #79741
    virtual
    Participant

    Post a link to your site if possible, it’s easier for everyone to use Firebug or some other web tool to figure out the problem.

    #79730
    Turts
    Member

    Sorry – http://www.edendesignandcreation.com/testing/newsite.

    Problem is particularly prevalent on iPads/iPhones.

    Cheers

    #79731
    Turts
    Member

    I’m pretty certain it’s because the relevant DIV is position:absolute and bottom: 0 but I don’t know how to force it to recognise the height for scroll bars…

    #79705
    jamygolden
    Member

    I had a look at the site and I can’t see what you are referring to. Also you said:
    Problem is particularly prevalent on iPads/iPhones.
    I don’t see iPads/iPhones anywhere

    #79678
    Turts
    Member

    Jamzy_za: If your screen resolution is quite low, and the text areas go ‘below the fold’ so to speak, you can’t scroll the page.

    When I say about iPhones and iPads, I mean that’s where the problem also occurs, not pictures of them ;)

    #79661
    jamygolden
    Member

    Lol ok. Well I do get a scrollbar on the page you linked me to, however I did notice the problem on another page.

    I’m pretty sure you are going to have to redevelop the CSS. I don’t apply ‘position: absolute’ to any ‘important’ elements, such as #sidebar, #main-content, #footer, #header, etc as their parent’s don’t see their height or width. I would use floats instead.

    #79663
    Turts
    Member

    The problem is actually on every page other than that one, http://www.edendesignandcreation.com/testing/newsite/client-work/ is a better example.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.