Home/ Questions/Q 4111286
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:02:48+00:00

I’m coding a simple bands that goes on at the bottom of the browser

  • 0

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.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0