Gap at the bottom of page with Internet Explorer

34 views
Skip to first unread message

chris...@googlemail.com

unread,
Sep 29, 2008, 4:41:57 AM9/29/08
to Blueprint CSS
Hi,
Hi,

Got to say that I love the framework (and I'm not just saying that to
get my question answered;-)). Using the framework has given me a great
introduction to baseline grids and speeded up my development. At the
moment I am doing my first Wordpress theme which I am also using the
framework for. I have written a form extension (in dodgy code as I'm a
relative novice) as I found the forms didn't line up in the grid.

Anyway as per the subject; I have a footer but it doesn't sit flush to
the bottom of the browser window in IE (7 as currently 6 doesn't work
very well at all). It works in FF and browsers with the Web Kit
rendering engine. There was a larger gap but I altered the following
the in the screen.css:
.clearfix:after, .container:after {content:".";display:block;height:
0;clear:both;visibility:hidden;}

to

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

As you can see I removed content: "." from the container class.

The URL is betagrid.co.uk

Chris

davor

unread,
Sep 29, 2008, 8:53:21 AM9/29/08
to bluepr...@googlegroups.com
You can try putting overflow:auto or overflow:hidden (for safari and
IE) for .container, but youll still have a gap if last element inside
.container has .clearfix applied. (i used overflow on him too.)

But im no expert at this.

christopher hunt

unread,
Sep 29, 2008, 10:28:26 AM9/29/08
to bluepr...@googlegroups.com
I tried the following code:
.clearfix:after, .container:after {overflow:hidden;

content:".";display:block;height:0;clear:both;visibility:hidden;}

and also applying overflow:hidden on .container

is this what you did?

Chris

2008/9/29 davor <r.da...@gmail.com>:

davor

unread,
Oct 1, 2008, 7:55:19 AM10/1/08
to bluepr...@googlegroups.com
On Mon, Sep 29, 2008 at 4:28 PM, christopher hunt
<chris...@googlemail.com> wrote:
>
> I tried the following code:
> .clearfix:after, .container:after {overflow:hidden;
> content:".";display:block;height:0;clear:both;visibility:hidden;}
>
> and also applying overflow:hidden on .container
>
> is this what you did?
>
> Chris

.clearfix, .container {overflow:auto;}

I think i just did this, you also have to remove :after pseudo class.
But mind you, this is tricky, as you need to be careful not to get
scrollbars on divs (if your content is larger then container, and
safari always uses scrollbars when overflow is set to auto IIRC)

christopher hunt

unread,
Nov 22, 2008, 11:13:35 PM11/22/08
to bluepr...@googlegroups.com
After coming back to the site that had this issue I realised that
.container was in the wrong place. Bit of a school boy error but I
suppose these things happen when you use something new for the first
time. It was after my header (the first span-24).

~Chris

2008/10/1 davor <r.da...@gmail.com>:

Christian Montoya

unread,
Nov 23, 2008, 9:46:43 AM11/23/08
to bluepr...@googlegroups.com
On Sat, Nov 22, 2008 at 11:13 PM, christopher hunt
<chris...@googlemail.com> wrote:
>
> After coming back to the site that had this issue I realised that
> .container was in the wrong place. Bit of a school boy error but I
> suppose these things happen when you use something new for the first
> time. It was after my header (the first span-24).

Don't worry, these things still happen to the best of us!

--
--
Christian Montoya
christianmontoya.net

woowho

unread,
Nov 25, 2008, 7:20:48 AM11/25/08
to Blueprint CSS
Not sure if this is quite what you're looking for but it has worked
great for me:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


On Sep 29, 3:41 am, "chrishun...@googlemail.com"
Reply all
Reply to author
Forward
0 new messages