#5 ✓resolved


Reported by zerok | August 13th, 2008 @ 12:50 PM

Reported by nicholas...@zxgen.net, Feb 19, 2008

What steps will reproduce the problem?

  1. Open in IE7, Safari3.0.4, Opera9.23, FireFox2.0.12 http://files.bjorkoy.com/bluepri...
  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.

Comment 1 by olavfb, Feb 20, 2008

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. :)

Comment 2 by nicholas...@zxgen.net, Feb 20, 2008

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...

Comment 3 by olavfb, Feb 20, 2008

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. :)

Comment 4 by nicholas...@zxgen.net, Feb 20, 2008

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

Comment 5 by olavfb, Feb 20, 2008

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....

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? :)

Comment 6 by c...@artbycas.com, Mar 21, 2008

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/showthre...

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.

Comment 7 by ccgonzales, Jun 04, 2008

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

I found the solution at: http://www.nclud.com/sketchbook/...

Comment 8 by igazit, Jul 16, 2008

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.

Comment 9 by igazit, Jul 17, 2008

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

Danger, danger:


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/showthre... http://www.nclud.com/sketchbook/... http://www.quirksmode.org/css/cl...

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:


But if it is correct, great. :)

Original ticket on Google Code

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Blueprint CSS framework