Hi all,

i'm having a problem with the clearfix. I got the code from PIE. But when i apply it i'm getting a padding at the bottom of the box(Firefox/Opera only, in IE it's ok :*)). Here is an example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
*{
  padding:0;
  margin:0
}
a img{
  border:0;
}
body{
  background:blue;
}
#wrapper
{
  width:800px;
  background:red
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>
</head>
<body>
  <div id="outerContent" class="clearfix">
    <div id="wrapper">
      <br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text
    </div>
  </div>
</body>
</html>
When i remove the class="clearfix" from the outerContent div the space at the bottom disappear. Can you suggest something. I'm missing something but i can't find what

thanks in advance