By bensnyder on

I am developing a charity site here: www.upperbuckssertoma.org

Using firebug, take a look at the bottom of the page. See the 15px-20px space? I CAN'T GET RIDE OF IT! And believe me people, I am no novice when it comes to CSS! (Check out my stylesheet :-) /sites/all/themes/sertoma/style.css)

I have narrowed the problem down to this. Search for this HTML:

Using Firebug, if you delete the class "clear-block" from the div the space goes away! But then you will see the negative effects of deleting the class.

The presenting problem is.... how the heck do I get ride of the space without removing the clear-block class?

Cheers and rock on Drupal!

⋅ Categories: Drupal 5.x

Comments

tdimg’s picture

tdimg commented

I haven't found the solution yet, but there are some problems with your stylesheet, for starters there is a block-views somewhere where it really shouldn't be, check out around line 1541, then you've got a strange border command for blockquote, around line 1084, you define the size of the border twice, which is according to the w3c validator not correct.

There are a couple of other discrepancies, so you might want to validate your css first.

After some other tweaking of your css, I was also able to delete clear-block and the problem remained. So it's not really related to that. I recognised you've got a lot of floats where you don't really need them, and some of them I basically just removed. Then I added a clear:both to the footer, deleted the clear-block and the problem remained. I'm off now, so can't follow it up any further.

LM23’s picture

LM23 commented

Wow!
Really nice theme!!!

:) maybe this is an "em" setting somewhere in the layout css-area?

I got rid of this i think but cannot remember so sure now :)

Web-Design & Music
http://galaxymachine.de

nevets’s picture

nevets commented

Did you fix the problem, I do not see the extra space at the bottm.

kulfi’s picture

kulfi commented

I see it, in FF2. I started removing css imports, and with the following remaining, the problem disappeared. I think its a conflict between 2 or more stylesheets:

<style media="all" type="text/css">
1@import "/modules/user/user.css";
</style>
<style media="all" type="text/css">
1@import "/sites/all/modules/cck/content.css";
</style>
<style media="all" type="text/css">
1@import "/sites/all/modules/panels/css/panels.css";
</style>
<style media="all" type="text/css">
1@import "/sites/all/themes/sertoma/style.css";
</style>
<style media="all" type="text/css">
1@import "/sites/all/themes/sertoma/icons.css";
</style>
<style media="print" type="text/css">
1@import "/sites/all/themes/sertoma/print.css";
</style>
zeta ζ’s picture

zeta ζ commented

I think this is in defaults.css

.clear-block:after {
  clear:both;
  content:".";
  display:block;
  height:0pt;
  visibility:hidden;
}

Change the content to ""

zeta ζ’s picture

zeta ζ commented

Or add #container:after {content:'';} in any .css

A limitation of firebug is the way it handles :after :hover etc.

zeta ζ’s picture

zeta ζ commented

The problem is that <div id="container" class="clear-block"> is the last block that renders anything. This has an :after rule in default.css with a content: ; property. This content causes the gap at the bottom.

You can either remove the content: ; for this block (see previous post), or try putting the footer block after it(which will need further adjustments), instead of inside it .

Note the gap will still appear on short pages displayed on larger screens.

zeta ζ’s picture

zeta ζ commented

Your screen size and toolbar height (Littlefox?) must be the same as mine to give an identical viewport. If you make the window bigger than the screen the space at the bottom returns (though no scrollbar).

ha5bro’s picture

ha5bro commented

I hope someone has a solution to this? It made me crazy about a week ago.

All Hail Drupal.

LM23’s picture

LM23 commented

It is in the style.css i will have a look later and report back if i find something useful for us.

Btw i had a similar situation with the very top header part (Also 20px), i belive this one is from menu links css, but didnt tested it yet).

Cheers

bensnyder’s picture

bensnyder commented

Thank you everyone for your wonderful remarks! I will look into each of your posts when I have more time and get to the bottom of the issue. Then I'll post the solution!

Snyder Technologies

bensnyder’s picture

bensnyder commented

Adding #container:after {content:"";} DOES FIX THE PROBLEM IN FF2, but it doesn't in other browsers so I left the tweak commented out. This way we can continue to debug in firefox to find the cross-browser problem...

Snyder Technologies

MasterSolution’s picture

MasterSolution commented

You can fix it simply by adding:

overflow: hidden;

To your #page-wrapper style.

This works great in Firefox, I have not tested it in other browsers though, but should work fine as well. To me the problems looks like there's an additional padding being left somewhere that creates the gap, but the overflow directive is going to hidden it now.

BTW, nice design!

Martin
Web Solutions

bensnyder’s picture

bensnyder commented

#page-wrapper {overflow: hidden;}

THANK YOU all for your help and comments!

Snyder Technologies