How to convert RGBA to filter for older IE browsers

Tags: html,css,internet-explorer,internet-explorer-8

Problem :

I have the following CSS code which sets the background to a color with an opacity:

    #second-menu-navi a {
        line-height: 40px;
        vertical-align: middle;
        text-decoration: none;
        background: rgb(1, 55, 97);
        background: rgba(1, 55, 97, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
        margin:0 3px 0 0 !important;
        /*background-image: none !important;*/
        padding:0 !important;

        -moz-border-radius-bottomleft: 4px; 
        -webkit-border-bottom-left-radius: 4px; 
        -khtml-border-bottom-left-radius: 4px; 
        border-bottom-left-radius: 4px;

        -moz-border-radius-bottomright: 4px; 
        -webkit-border-bottom-right-radius: 4px; 
        -khtml-border-bottom-right-radius: 4px; 
        border-bottom-right-radius: 4px;


        /* For IE 8*/
        -ms-filter: "filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);";
#tab-1:active, #tab-1:hover {
    background-color: #155E9B;
#tab-2:active, #tab-2:hover {
    background-color: #159B77;
#tab-3:active, #tab-3:hover {
    background-color: #1E9B15;
#tab-4:active, #tab-4:hover {
    background-color: #356101;
#tab-5:active, #tab-5:hover {
    background-color: #9B2B15;
#tab-6:active, #tab-6:hover {
    background-color: #9B1574;
#tab-7:active, #tab-7:hover {
    background-color: #70159B;
#break-line-2 {
    border-top:1px solid #02233C;
    position: fixed;
    top: 62px;


<div id="second-menu-navi" class="navi">
            <a href="" id="tab-1">Why Choose Us</a>
            <a href="" id="tab-2">Physicians</a>
            <a href="" id="tab-3">Medical Specialties</a>
            <a href="" id="tab-4">Locations</a>
            <a href="" id="tab-5">Urgent Care</a>
            <a href="" id="tab-6">Radiology</a>
            <a href="" id="tab-7">Lab</a>

It works great in FF/Chrome/IE>=10.

How do I edit the filter codes to ensure it displays the same thing in IE that doesn't support rgba()?

Solution :

A quick Google search gives me this site, which has a simple converter. Input your RGBA code, it outputs the filter for you...

With the converter this: rgba(1, 55, 97, .85)

Becomes this...

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

    CSS Howto..

    How do I hide the li's that don't fit on a single line?

    how to change padding of last element of li in css

    How can I place HTML in a JavaScript string and have it validate?

    How can I apply a custom css rule to small helping arrows that appears on column reordering in Kendo UI grid

    Creating “columns” inside a DIV: how to place them?

    CSS: How to get rid of scroll (except when there's additional content)?

    How to reuse footer with only HTML/CSS?

    CSS - How to set height of absolute div same with neighbor image?

    CSS : How to remove margin between
  • How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How to make a glyphicon work as a submit button?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How do i remove li element margin

    how to give blur effect for css overflow visible content

    How to link css to html in an express project?

    How to give multiple arguments to find element by css selector

    How to figure out what is the right target to put in CSS

    How to hide last divider in list of comments using CSS?

    How do I get user-inputted information from the website directly to my e-mail?

    how to align elements using css in angular typeahead

    How did skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to reduce responsively the height of images in the flexbox layout to fit window height?

    How can I exclude a hover effect with CSS

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    How to show text within icon

    How to enable overflow scrolling within a Semantic Ui Grid?

    How to reverse this CSS spin animation

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    How to set the specific prefix for file-loader in webpack?