...

View Full Version : hmm, undefined white space below?



jorrelemargi
11-03-2006, 02:54 PM
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

kaitco
11-03-2006, 06:38 PM
I imagine this is where the problem lies (from this stylesheet (http://www.uzegt.net/themes/uzegt/style.css)):



#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 (http://bonrouge.com/br.php?page=faq#footeratbottom).

jorrelemargi
11-03-2006, 07:01 PM
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!

kaitco
11-03-2006, 07:22 PM
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?

_Aerospace_Eng_
11-03-2006, 07:38 PM
Why don't you just use an image? Your layout is a fixed width anyways.

jorrelemargi
11-03-2006, 10:31 PM
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..

_Aerospace_Eng_
11-03-2006, 11:21 PM
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 (http://www.alistapart.com/articles/fauxcolums/)
3 columns fixed min-height 100% (http://bonrouge.com/3c-hf-fixed.php)

* {
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;}

jorrelemargi
11-04-2006, 01:50 PM
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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum