Databases
StackOverflow2013
Postsdbo
POProblem with image and transparent filter for IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem with image and transparent filter for IE
    text
    copied!<p>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 with 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.</p> <p>Is this a known issue? Is there any workaround?</p> <p>Here's my IE css:</p> <pre><code>/* 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 &amp; 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; } </code></pre> <p>Here is the simple HTML:</p> <pre><code>&lt;div id="bottompub"&gt; &lt;div class="insidebottompub"&gt; &lt;a href="http://www.mysite.com"&gt;&lt;img class="pubimage" src="myimageof75px.png"/&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thanks!</p> <p><em>Edit to not use negative margin</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload