Extra Margin/Padding bottom of page

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Open in IE7, Safari3.0.4, Opera9.23, FireFox2.0.12
http://files.bjorkoy.com/blueprint/tests/sample.html
2. scroll to the bottom
3. notice how in Safari,Opera,FireFox there is more space down the bottom,
but in IE7 there is no extra spacing

What is the expected output? What do you see instead?
-

What version of the product are you using? On what operating system?
-

Please provide any additional information below.

Inspecting with Firebug I can't find explanation for the extra spacing at
the bottom of the document. As far as I can tell IE7 is actually displaying
it correct as I couldn't find any rules to say put extra space at the bottom.

In my own CSS files I never get extra spacing unless I specify it. I'd
actually like IE7 to follow the other browsers as the spacing is good. But
why doesn't it happen all ready since it is in the other browsers.

Original issue reported on code.google.com by nicholas...@gtempaccount.com on 20 Feb 2008 at 2:26

[GoogleCodeExporter]

No, IE is wrong. The body element has this css:

body { margin:1.5em 0 }

So as far as I know, there should be a bottom margin. Will investigate. :)

Original comment by ola...@gmail.com on 20 Feb 2008 at 8:31

[GoogleCodeExporter]

Yeah - that's true it does..

I brought this all up in the first place because in my CSS I've added this

body { margin: 0; }

But it doesn't do anything, I still have a margin at the bottom of the page.

Live site that I'm currently working on is http://www.carfinancechief.com.au

I just removed the margin rule and explicitly said {margin: 0} but it has had no
effect either.

Don't pay any attention to my dodgy grid thing - I couldn't figure out a way to 
get
230px & 300px widths to fit on the same grid with out going down to 5px. I used 
ruby
to get me all the rules...

Original comment by nicholas...@gtempaccount.com on 20 Feb 2008 at 9:12

[GoogleCodeExporter]

You could check if any of the last elements in your HTML has any margins or 
paddings which could cause this. 

I'll check if this really is a BP issue when I'm in front of IE again. :)

Original comment by ola...@gmail.com on 20 Feb 2008 at 9:18

[GoogleCodeExporter]

Ok - narrowed it down to the container class.

As soon as I get rid of that class from the div there is no margin at the 
bottom anymore.

I've downloaded BP 0.7 and modified the sample.html & screen.css files attached.

Get rid of the container class value for the first div and there is no bottom 
margin
- put it back there is a margin.

All I modified was ensuring the last element didn't have a margin and making 
sure
body had a margin of zero.

I'm using firebug and its not helping me to see where this margin comes from...

Hope this helps you figure out if its BP or IE

Original comment by nicholas...@gtempaccount.com on 20 Feb 2008 at 9:42

Attachments:

• sample.html
• screen.css

[GoogleCodeExporter]

OK, this is a problem with the clearfix, which ensures that the container 
extends to the height of the columns 
inside it. 

Here's the CSS in question:

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

(See http://www.positioniseverything.net/easyclearing.html)

Apparently, this CSS has a side effect that adds an extra line of space after 
the container when it's the last 
element on the page. There's surprisingly no space between two adjacent 
containers.

Suggestions on how to fix this, anyone? :)

Original comment by ola...@gmail.com on 20 Feb 2008 at 4:03

[GoogleCodeExporter]

I had this issue recently and found this forum post, which led me to the same
conclusion (that .clearfix is the culprit) -
http://codingforums.com/showthread.php?t=128940

There is a fix explaination on the forum, but I just ended up commenting out the
.clearfix from grid.css, (since I wasn't using it on the site I was working on
anyways) and that did the trick.

Original comment by c...@artbycas.com on 21 Mar 2008 at 4:50

[GoogleCodeExporter]

Within the .clearfix:after class, removing the period from content:"." property
seemed to work.

I found the solution at:
http://www.nclud.com/sketchbook/mind-the-gap-clearfix-is-clearly-broken

Original comment by ccgonza...@gmail.com on 4 Jun 2008 at 6:38

[GoogleCodeExporter]

Is there a "sanctioned workaround" for this issue by now? I'd rather not hack 
around
blueprint on this. If there's an approach that's sane and logical I would love 
to
learn of it.

Original comment by iga...@gmail.com on 16 Jul 2008 at 3:02

[GoogleCodeExporter]

Ok, having studied this issue for a while, I've cobbled a patch together.

Danger, danger:

THIS PATCH MAY BE HORRIBLY STUPID. I HAVE NO IDEA WHAT I'M DOING.

I'm not a super-experience CSS hacker so somebody with more knowledge should 
make
sure that this patch looks reasonable.

These were the most useful references on the subject:

http://codingforums.com/showthread.php?t=128940
http://www.nclud.com/sketchbook/mind-the-gap-clearfix-is-clearly-broken
http://www.quirksmode.org/css/clearing.html

The patch basically does away with the clearfix hack and uses the 
overflow:hidden
trick outlined in quirksmode instead. I found that it solved my issue nicely 
(FF3,
Safari, IE7). Have not tested with other browsers.

So, caveat:

THIS PATCH MAY BE HORRIBLY STUPID. I HAVE NO IDEA WHAT I'M DOING.

But if it is correct, great. :)

Original comment by iga...@gmail.com on 17 Jul 2008 at 11:28

Attachments:

• clearfix.patch

[GoogleCodeExporter]

This ticket is now also available on the new LighthouseApp tracker:
http://blueprintcss.lighthouseapp.com/projects/15318-blueprint-css/tickets/5-ext
ra-margin-padding-bottom-of-page

Original comment by horst.gu...@gmail.com on 13 Aug 2008 at 5:51

[GoogleCodeExporter]

Copied to
http://blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padd
ing-bottom-of-page#ticket-5-1
For details please check the mailinglist's archive

Original comment by horst.gu...@gmail.com on 13 Aug 2008 at 9:34