CSS overflow-bug IE7 - trying to show overflow

I have a div with overflowing content. I want the overflowing content to be VISIBLE on all browser. Works nice except for IE7...

I have been trying for a while and was not able to find any info on showing the overflowing content, so开发者_运维知识库 I'm hoping someone can help:

Here is the code:

<div class="ui-btn-inner">
 <p>hlasd asdasd asdasd lkasdas dalksd ahljklnlnad asljdhasdnas dalsdkjas I am invisible... </p>
</div>

and CSS

.ui-btn-inner {  
   border: 3px solid red; 
   padding: 0 !important; 
   position: relative;
   text-align: center;
   }
.ui-btn-inner { 
  height: 22px; 
  margin-bottom: 22px;    
  background-color: transparent; 
  width: 100%; 
  top: 0; 
  left: 0; 
  overflow: visible;                                                     
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);zoom: 1;
  }

And as JSfiddle - JS Fiddle where is my overflow in IE7

Thanks for help!

The problem is being caused by your filter:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);

Unfortunately this is just the way IE7 handles the use of filters and there is no fix for it.

You might consider using a conditional comment to target IE7 only to remove the filter.

The default value for 'overflow' property is 'visible'. I think just removing the 'overflow: visible;' style would help.