IE7 Easy Clearing - Thought a few of you could use this

[LinstefooMedia]

So, as a few of us designers might have noticed while adding IE7 into the picture, it doesn't completely support easy clearing properly (i.e. .clearfix). After much irritation I finally solved the issue and thought that I'd post for a few of you who might have experienced some of the same pains I did. So here's the usual suspect:

[color=green][b].clearfix:after[/b]
{
[i]content: ".";[/i]
[i]height: 0;[/i]
[i]display: block;[/i]
[i]clear: both;[/i]
[i]visibility: hidden;[/i]
}
[/color]

 

So, this works normally in IE6 and FF as well as other GEKO based browsers. Well we get to IE7 and we have a small issue. IE7 seems to hate clearfix or to be more accurate, doesn't support it as it is. So if you have a faux-ground which is cleared to push the floating elements down, and you test in IE7 you'll notice that while the floating elements seem to be pushed down with they're content, your faux-ground is no where to be found  ??? So here is the solution to this troublesome issue, which, made me loose some sleep.

[color=green][b].clearfix:after[/b]
{
[i]content: ".";[/i]
[i]height: 0;[/i]
[i]display: block;[/i]
[i]clear: both;[/i]
[i]visibility: hidden;[/i]
}
[b].clearfix[/b]
{
[i] display: inline-block;[/i]
}
[/color]

 

Now for those who don't know what display:inline-block does, here is a quick description:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

 

Hope this helps some people and sorry if I posted in the wrong area, I just couldn't find any place to place this :|