CSS Anomoly! Calling all experts! Can't get ride of 20px margin?
pegleglax - January 17, 2008 - 00:51
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!
I haven't found the solution
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.
Wow!
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
Fixed?
Did you fix the problem, I do not see the extra space at the bottm.
I see it, in FF2. I started
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>
Try this...
I think this is in defaults.css
.clear-block:after {clear:both;
content:".";
display:block;
height:0pt;
visibility:hidden;
}
Or add #container:after
Or add
#container:after {content:'';}in any .cssA limitation of firebug is the way it handles :after :hover etc.
Solution
The problem is that
<div id="container" class="clear-block">is the last block that renders anything. This has an:afterrule in default.css with acontent: ;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.
Screen size
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).
Grrr.
I hope someone has a solution to this? It made me crazy about a week ago.
All Hail Drupal.
It is in the style.css i
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
Thank you everyone!
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!
FF2 Fixed.... But other browsers?
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...
You can fix it simply by
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
SOLUTION
#page-wrapper {overflow: hidden;}
THANK YOU all for your help and comments!