Problem with image and transparent filter for IE

I'm coding a simple bands that goes on at the bottom of the browser on my website. I had everything under control using a semi transparent PNG as my background, but for more flexibility I was asked to do it purely in CSS. So I used an background wi开发者_开发知识库th a RGBa with a fallback to solid color and, using a conditionnal style sheet, the Microsoft filter for IE 8 and earlier. This works fine, my background looks like I want it to be. The problem I have is that this banner contains an image that is taller than it. Since I've added the filter, it now gets crop in IE... If a switch to a solid background, everything works fine.

Is this a known issue? Is there any workaround?

Here's my IE css:

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    text-align: center;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */
    zoom: 1;
    margin:0;
    padding:0;
    overflow:visible; /* Just to make sure no parent change that to hidden */
}

/* This is the image in the banner */
#bottompub .pubimage { 
    position:relative;   
    margin-left:220px;
    height:75px;  
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin-left:auto;
    margin-right: auto;     
}

Here is the simple HTML:

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://www.mysite.com"><img class="pubimage" src="myimageof75px.png"/></a>
    </div>
</div>

Thanks!

Edit to not use negative margin

it's a known issue - click the link marked flaws for some things to try

I tried a bit and can get it to work for IE8, but not 7, here's the code with some notes to show what I tried for IE7 (ignore the colors they were there to help visualise)

CSS:

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    background: transparent;
    background: #cfc;

    zoom: 1;
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */    

}

/* This is the image in the banner */
#bottompub .pubimage { 
    height:75px;
    position: relative;
    top: -25px;
    /*z-index: 1;*/
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin: 0 auto;
    text-align: center;
    background: #0f0;
    position: relative;
    /*z-index: 1;*/
}

.insidebottompub a {
position: relative; /* important*/
/* applying hasLyout here doesn't work for IE7 */
}

#bottompub {
/* no z-index or IE8 breaks */
/*z-index: -1;*/
}

applying position: relative; to the link holding the image seemed to be the main thing but there are other changes

First of all you should try the CSS3 as well as other vendor prefixes for gradient and opacity to be sure it's consistent.

Secondly, try not setting the negative margins for the image and instead setting a hidden overflow for the parent div. That is to say:

#bottompub { overflow:hidden; }

EDIT:
This works on IE9:

/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF);
/* For Internet Explorer 8+ */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF)";

Also, take a look at this for all the vendor prefixes, it's a short and good read:
http://css-tricks.com/css3-gradients/

It is not a fix for the filter problem, but a workaround that works on IE7 and Firefox without needing conditional stylesheet and getting the same effect. I used a separated div for my backgound color and my content. For some reason, I had to put the background after the content, otherwise the transparency was still inherit and the image was cropped. I used the z-index to show elements in the proper order. I kept the main div bottompub mainly to keep thing organized and have a distinct id for all elements in that section.

CSS:

#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    margin:0;
    padding:0;   
}

#bottompub .background {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:#89BAE4; 
    opacity: .80;    
    filter: alpha(opacity="80");
    z-index: 50;
}


#bottompub .insidebottompub {
    position:relative;
    width:1031px;   
    margin-left:auto;
    margin-right: auto; 
    z-index: 100;    
}

#bottompub .pubimage {
    position:relative;
    float:left;
    left:220px;
    top:-25px;
}

HTML

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://mysite.com"><img class="pubimage" src="myimage.png"/></a>
    </div>
    <div  class="background"/>    
</div>