Forums

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

Home Forums CSS div overflow

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #39219
    EJMD
    Participant

    I’ve been experiencing some issues with overflowing data kept inside a div. I’ve been playing around with some re-design of a website I maintain, and when this page is viewed on a computer other than mine own the tabled menu list in the left navigation panel overflows onto the main content of the page. I also have this issue with the blog archives tree menu (which comes from this code), where on browsers other than Firefox the blog titles of the menu run over the div.

    I’ve tried playing around with the overflow attribute as well as the word-wrap attribute, but nothing seems to stop these from overflowing and staying within their supposed bounds.

    I’m relatively new at this and so any help would be appreciated. I’m sure I’m missing some knowledge (and obviously expertise) here.

    The pertinent code, from the style sheet, are as follows.


    #wrapper {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -12px;
    position: relative;
    }

    #banner {
    width: 93%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -13px;
    padding-top: 20px;
    padding-left: 85px;
    background: #848484;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 55px;
    -webkit-border-bottom-right-radius: 55px;
    -moz-border-radius-topright: 55px;
    -moz-border-radius-bottomright: 55px;
    -moz-border-radius-topleft: 100px;
    -khtml-border-radius-topleft: 100px;
    -khtml-border-radius-topright: 55px;
    -khtml-border-radius-bottomright: 55px;
    border-radius: 0 0 65px 65px;
    }
    #leftNav {
    width: 15%;
    padding: 12px;
    margin-left: -99%;
    background: #848484;
    -webkit-border-bottom-left-radius: 55px;
    -moz-border-radius-bottomleft: 55px;
    -khtml-border-radius-bottomleft: 55px;
    border-radius: 0 0 55px 55px;
    float: left;
    z-index: 15px;
    }
    #content {
    padding: 10px;
    background: #A3A3A3;
    -webkit-border-top-right-radius: 45px;
    -webkit-border-bottom-right-radius: 45px;
    -webkit-border-bottom-left-radius: 45px;
    -moz-border-radius-topright: 45px;
    -moz-border-radius-bottomright: 45px;
    -moz-border-radius-bottomleft: 45px;
    -khtml-border-radius-topright: 45px;
    -khtml-border-radius-bottomright: 45px;
    -khtml-border-radius-bottomleft: 45px;
    border-radius: 0 0 45px 45px;
    margin-left: 18%;
    padding-right: 2%;
    width: 62%;
    float: left;
    z-index: 10px;
    }
    #rightNav {
    width: 12%;
    margin-right: 2%;
    padding: 8px;
    background: #A3A3A3;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 0 0 45px 0;
    padding-left: 2%;
    float: left;
    z-index: 20px;

    }
    #legal {
    clear: both;
    text-align: center;
    }
    #end {
    background: #848484;
    margin-left: 18%;
    margin-right: 17%;
    -webkit-border-top-left-radius: 45px;
    -webkit-border-top-right-radius: 45px;
    -moz-border-radius-topleft: 45px;
    -moz-border-radius-topright: 45px;
    -khtml-border-radius-topleft: 45px;
    -khtml-border-radius-topright: 45px;
    border-radius: 45px 45px 0 0;
    font: 10px Tahoma;
    color: #F7F7F7;
    text-align: center;
    }

    Any and all critique will be helpful, but the main thing I’m after is how to keep the data within its div parameters.

    Thanks.

    #107370
    EJMD
    Participant

    I solved the issue with the left menu overflowing by adding

    style='table-layout:fixed'

    to the table information.

    However, the blog archives is not a table so unfortunately wasn’t such a quick fix – it’s still not working in Safari.

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