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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmm, undefined white space below?

    Hi all,

    I've been breaking my head lately on a strange layout issue... I uploaded my page to
    http://www.uzegt.net/ so you can see what I mean

    -> The problem can be looked at when you click in the right top corner on "*beep*ing hell", under "recent comments"...

    you will see that my page layout stretches all the way to the bottom, waaaaaaay too long...

    can somebody tell me what the problem is here?

    thanks in advance, if you need any more code or anything, let me know

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    I imagine this is where the problem lies (from this stylesheet):


    Code:
    #content_right {
    
    padding:10px;
    padding-bottom: 20010px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
    vertical-align:top;
    float:left;
    background-color:#D9FF8D;
    width: 320px; float: right;
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    
    #navigation_left {
    padding-bottom: 20010px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
    vertical-align:top;
    float:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    width: 140px; float: left;
    background-color: #EEEEEE;
    }
    
    
    
    #footer-wrapper {
      float: left;
      position: relative;
      width: 100%;
      padding-bottom: 10010px;
      margin-bottom: -10000px;
      background: #fff;         /* Same as body 
                                   background */
    
    }
    Instead of five-digit paddings and margins try the method described here.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    before trying the technique you described, I removed this 5 digit padding and margin from my stylesheet, but it's still the same...

    shouldn't this give at least SOME difference?

    thanks for the answer above!

  • #4
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Well, technically speaking there would only be a net change of 10px with just removing the five-digit padding and margin. Can you post what you have changed?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why don't you just use an image? Your layout is a fixed width anyways.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Why don't you just use an image? Your layout is a fixed width anyways.
    I could use an image as a footer yes, but I don't think the footer is causing this enormous whitespace to be added below my comments page... I removed the footer, and it was still there..

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I wasn't saying to use it for the footer. I mean for the equal columns effect.

    Try this for style.css, that gets the footer to the bottom. Now you need to add a bottom padding to the content so text doesn't go behind the footer. You also need to make a 3 colored background image to fake the columns. Some articles to read
    Faux Columns
    3 columns fixed min-height 100%
    Code:
    * {
    margin: 0; padding: 0;;
    font-size:11px;
    }
    
    
    A {
    color:#000000;
    font-weight:bold;
    }
    
    A:link {
    text-decoration: none
    }
    
    A:visited {
    text-decoration: none
    }
    
    A:active {
    text-decoration: none
    }
    
    A:hover {
    background: #AF2260; 
    font-weight:bold; 
    color: white;
    }
    
    legend A:hover{
    color:#FF6699;
    }
    
    
    
    
    html, body {
    background: #E7E7E7 url(images/body-bg.png) repeat-y top center;
    font-size:11px;
    text-align:center;
    margin:0;
    padding:0;
    font-size: 11px;
    height:100%;
    }
    
    
    #container {
    background-color:#F2F8E6;
    text-align:left;
    width: 990px;
    margin: 0 auto;
    position:relative;
    min-height:100%;
    }
    * html #container {
    height:100%;
    }
    #top_corners
    {
    width: 990px;
    height: 7px;
    background-color:#000000;
    }
    
    #header {
    background: url(images/tile3.gif) no-repeat top;
    height: 148px; 
    width: 990px;
    display: table-cell;
    vertical-align:middle;
    
    }
    
    #headertext {
    
    padding: 10px 10px 5px 5px;
    display: table-cell;
    vertical-align:middle;
    width: 380px;
    text-align:left;
    }
    
    #headertext h1{
    font: 1.2em Georgia, "Times New Roman", serif; letter-spacing: 1px;
    color:#000000;
    visibility:visible;
    }
    
    #intro{
    font: 1.2em Georgia, "Times New Roman", serif; letter-spacing: 1px;
    color:#000000;
    visibility:visible;
    }
    
    #header_blackbar {
    margin-top:1px;
    margin-bottom:1px;
    width: 990px;
    height: 20px;
    background-color:#9FDD19;
    font-size: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    }
    
    
    #breadcrumb {
    margin-top:2px;
    vertical-align:middle;
    color:#FFFFFF;
    width:800;
    text-align:left;
    float:left;
    }
    
    
    #breadcrumb a:link {
         color: #ffffff;
         background-color: transparent;
         text-decoration: none;
         }
    
    #breadcrumb a:visited {
         color: #ffffff;
         background-color: transparent;
         text-decoration: none;
         }
    
    #breadcrumb a:hover {
         color: #ffffff;
         background-color: #000;
         text-decoration: underline;
         }
    
    #breadcrumb a:active {
         color: #f000000;
         background-color: transparent;
         text-decoration: none;
         }
    
    #breadcrumb .lost_navigatie
    {
    margin-left: 5px;
    float:left;
    text-align:left;
    vertical-align:bottom;
    
    }
    
    
    #timestamp {
    width:190;
    text-align:right;
    float:right;
    }
    
    
    #content_middle {
    
    clear:none;
    vertical-align:top;
    float:left;
    padding: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    width: 485px; float: left;
    }
    
    
    #content_right {
    /*background:url(images/bloodspatter_rightmenu.jpg) no-repeat top left;*/
    padding:10px;
    vertical-align:top;
    float:left;
    background-color:#D9FF8D;
    width: 320px; float: right;
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    
    #redactie
    {
    width:300px;
    }
    
    
    
    
    
    
    #navigation_left {
    vertical-align:top;
    float:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    width: 140px; float: left;
    background-color: #E6F0D2;
    }
    
    #footer {
      font-family:Verdana, Arial, Helvetica, sans-serif;
      text-align:center;
      height:15px;
      width:980px;
      clear:both;
      background-color: #AF2260;
      padding: 5px 5px 5px 5px;
      font-size: 10px;
      color:#EAEAEA;
      position:absolute;
      bottom:0;
      left:0;
    }
    
    #footer A:link{
    color:EAEAEA;
    font-weight:bold;
    }
    
    #footer A:hover{
    color:#FFFFFF;
    text-decoration:underline;
    font-weight:bold;
    }
    
    #footer A:visited{
    color:EAEAEA;
    font-weight:bold;
    }
    
    #footer A:active{
    color:EAEAEA;
    font-weight:bold;
    }
    
    
    
    
    
    #categories {
    width: 140px;
    float:left;
    padding:0px;
    margin: 0 0 0 0;
    text-align:left;
    vertical-align:top;
    }
    
    #categories a:link {
         color: #ffffff;
         background-color: transparent;
         text-decoration: none;
         }
    
    #categories a:visited {
         color: #ffffff;
         background-color: transparent;
         text-decoration: none;
         }
    
    #categories a:hover {
         color: #ffffff;
         background-color: #EEEEEE;
         text-decoration: underline;
         }
    
    #categories a:active {
         color: #f000000;
         background-color: #EEEEEE;
         text-decoration: none;
         }
    
    
    /* INSERT FROM CMS CSS */
    tr.odd td, tr.even td {
      padding: 0.3em;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 0.5em;
    }
    
    h1 {
    /*  font-size: 1.3em;*/
    font-size: 20px;
    }
    
    
    
    h2 {
    /*  font-size: 1.2em;*/
    font-size: 18px;
    }
    
    h3, h4, h5, h6 {
    /*  font-size: 1.1em;*/
      font-size: 18px;
    }
    p {
      margin-top: 0.5em;
      margin-bottom: 0.9em;
    }
    
    
    textarea 
    {
    font-size:12px;
    }
    
    fieldset {
      border: 1px solid #ccc;
    }
    pre {
      background-color: #eee;
      padding: 0.75em 1.5em;
      font-size: 10px;
      border: 1px solid #ddd;
    }
    .form-item label {
      font-size: 10px;
      color: #222;
    }
    
    .item-list .title {
      font-size: 10px;
      color: #222;
    }
    .links {
      margin-bottom: 0em;
    }
    .comment .links {
      margin-bottom: 0em;
    }
    #menu {
      padding: 0.5em 0.5em 0 0.5em;
      text-align: right;
      vertical-align: middle;
      font-size: 10px;
    }
    #primary {
    /*  font-size: 0.8em;*/
    font-size: 10px;
      padding: 0em 0.8em 0.5em 0;
      color: #fff;
    }
    #primary a {
      font-weight: bold;
      color: #fff;
    }
    #secondary {
      padding: 0 1em 0.5em 0;
      font-size: 10px;
    /*  font-size: 0.8em;*/
      color: #9cf;
    }
    #secondary a {
      font-weight: bold;
      color: #9cf;
    }
    #search .form-text, #search .form-submit {
      border: 1px solid #369;
      font-size: 10px;
    /*  font-size: 1.1em;*/
      height: 1.5em;
      vertical-align: middle;
    }
    #search .form-text {
    font-size:10px;
      width: 8em;
      padding: 0 0.5em 0 0.5em;
    }
    #mission {
      background-color: #369;
      padding: 1.5em 2em;
      color: #fff;
    }
    #mission a, #mission a:visited {
      color: #9cf;
      font-weight: bold;
    }
    .site-name {
      margin: 0.6em 0em 0em 0em;
      padding: 0em;
      font-size: 10px;
    /*  font-size: 2em;*/
    }
    .site-name a:link, .site-name a:visited {
      color: #fff;
    }
    .site-name a:hover {
      color: #369;
      text-decoration: none;
    }
    .site-slogan {
      font-size: 1em;
      color: #eee;
      display: block;
      margin: 0em 0em 0em 0em;
      font-style: italic;
      font-weight: bold;
    }
    #mission, .node .content, .comment .content {
      line-height: 1.9;
      padding: 0.2em;
     
    }
    
    
    .content img {
    margin:0.6em 1em 1em 0.6em; 
    border-style:solid;
    border-width:thin;
    /*float:right;*/
    }
    
    #help {
    /*  font-size: 0.9em;*/
      font-size: 10px;
      margin-bottom: 1em;
    }
    .messages {
      background-color: #eee;
      border: 1px solid #ccc;
      padding: 0.3em;
      margin-bottom: 1em;
    }
    .error {
      border-color: red;
    }
    #sidebar-left, #sidebar-right {
    /*  background-color: #ddd;*/
    /*  width: 12em;*/
      /* padding in px not ex because IE messes up 100% width tables otherwise */
      padding: 10px;
      vertical-align: top;
      font-size: 8px;
      
    }
    
    
    
    
    /*
    ** Common declarations for child classes of node, comment, block, box, etc.
    ** If you want any of them styled differently for a specific parent, add
    ** additional rules /with only the differing properties!/ to .parent .class.
    ** See .comment .title for an example.
    */
    .title {
    /*  font-size: 24px;*/
      font-family: helvetica, arial, sans-serif;
      line-height: 30px;
      letter-spacing: -1px;
      padding: 0;
      margin: 0;
      color: #393;
      text-decoration: none;
      font-weight: bold;
      margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
    }
    
    .title a{
      font-weight: bold;
    /*  text-decoration:underline;*/
      font-size: 22px;; /*article TITLE*/
      color: #339933;
      margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
    }
    
    
    .title a:hover, active{
      background-color:#F2F8E6;
      font-weight: bold;
      text-decoration:underline;
      font-size: 22px; /*article TITLE*/
      color: #039300;
      margin: 0 auto 0 auto;  /* decrease default margins for h<x>.title */
    }
    
    
    .submitted {
      color: #999;
      font-size: 0.9em; /*submitted by ... text*/
    
    }
    .links {
      color: #999;
    }
    .links a {
      font-weight: bold;
    }
    .block, .box {
      padding: 0 0 1.5em 0;
    /*  font-size:10px;*/
    }
    .block {
      border-bottom: 1px solid #bbb;
      padding-bottom: 0.75em;
      margin-bottom: 1.5em;
    }
    .block .title {
      margin-bottom: .25em;
    }
    .box .title {
    /*  font-size: 1.1em;*/
    font-size:10px;
    }
    .node {
      margin: .5em 0 2em 0;
    }
    .sticky {
      padding: .5em;
      background-color: #eee;
      border: solid 1px #ddd;
    }
    .node .content, .comment .content {
      font-size:12px;
      margin: .5em 0 .5em 0;
    }
    .node .taxonomy {
      color: #999;
    /*  font-size: 0.8em;*/
    font-size: inherit;
      padding: 1.5em;
    }
    .node .picture {
      border: 1px solid #ddd;
      float: right;
      margin: 0.5em;
    }
    .comment {
      border: 1px solid #abc;
      padding: .5em;
      margin-bottom: 1em;
    }
    .comment .title a {
      font-size: 1.1em;
      font-weight: normal;
    }
    .comment .new {
      text-align: right;
      font-weight: bold;
      font-size: 0.8em;
      float: right;
      color: red;
    }
    .comment .picture {
      border: 1px solid #abc;
      float: right;
      margin: 0.5em;
    }
    
    /*
    ** Module specific styles
    */
    #aggregator .feed-source {
      background-color: #eee;
      border: 1px solid #ccc;
      padding: 1em;
      margin: 1em 0 1em 0;
    }
    #aggregator .news-item .categories, #aggregator .source, #aggregator .age {
      color: #999;
      font-style: italic;
      font-size: 0.9em;
    }
    #aggregator .title {
      margin-bottom: 0.5em;
      font-size: 1em;
    }
    #aggregator h3 {
      margin-top: 1em;
    }
    #forum table {
      width: 100%;
    }
    #forum td {
      padding: 0.5em 0.5em 0.5em 0.5em;
    }
    #forum td.forum, #forum td.posts {
      background-color: #eee;
    }
    #forum td.topics, #forum td.last-reply {
      background-color: #ddd;
    }
    #forum td.container {
      background-color: #ccc;
    }
    #forum td.container a {
      color: #555;
    }
    #forum td.statistics, #forum td.settings, #forum td.pager {
      height: 1.5em;
      border: 1px solid #bbb;
    }
    #forum td .name {
      color: #96c;
    }
    #forum td .links {
      padding-top: 0.7em;
      font-size: 0.9em;
    }
    #profile .profile {
      clear: both;
      border: 1px solid #abc;
      padding: .5em;
      margin: 1em 0em 1em 0em;
    }
    #profile .profile .name {
      padding-bottom: 0.5em;
    }
    .block-forum h3 {
      margin-bottom: .5em;
    }
    .calendar a {
      text-decoration: none;
    }
    .calendar td, .calendar th {
      padding: 0.4em 0;
      border-color: #888;
    }
    .calendar .day-today {
      background-color: #69c;
    }
    .calendar .day-today a {
      color: #fff;
    }
    .calendar .day-selected {
      background-color: #369;
      color: #fff;
    }
    .calendar .header-week {
      background-color: #ccc;
    }
    .calendar .day-blank {
      background-color: #ccc;
    }
    .calendar .row-week td a:hover {
      background-color: #fff; color: #000;
    }
    
    
    
    
    
    
    /* These are standard sIFR styles... do not modify */
    .sIFR-flash {visibility:visible !important;margin:0;}
    .sIFR-replaced {visibility:visible !important;}
    span.sIFR-alternate {position:absolute;left:0;top:0;width:0;height:0;display:block;overflow:hidden;}
    /* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
    .sIFR-hasFlash h1 {visibility:hidden;font-size:23px;line-height:24px;letter-spacing:0.03em;}
    .sIFR-hasFlash h2 {visibility:hidden;font-size:22px;line-height:23px;text-transform:uppercase;letter-spacing:-0.2em;}
    .sIFR-hasFlash h3 {visibility:hidden;font-size:18px;line-height:16px;letter-spacing:0.04em;}
    .sIFR-hasFlash h5 {visibility:hidden;font-size:21px;line-height:23px;letter-spacing:0.02em;}
    .sIFR-hasFlash h6 {visibility:hidden;font-size:18px;line-height:18px;}
    Last edited by _Aerospace_Eng_; 11-03-2006 at 10:33 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Oct 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the stylesheet, I tested it, but then my left and right columns don't have the 100% height anymore...

    I know I can fix this using a background image, but that was the thing I did BEFORE I changed my stylesheet to 5 digit padding

    reason: when I resize my windows, also the background images from the border is shifting to the left... and that was not a nice sight. worked in IE though, but was moving in Firefox...


  •  

    Posting Permissions

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