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 {
        float:left;
        width:125px;
        height:40px;
        line-height: 40px;
        vertical-align: middle;
        font-size:11px;
        color:#ffffff;
        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;

        outline:none;

        filter:filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
        /* 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 {
    width:100%;
    height:7px;
    border-top:1px solid #02233C;
    background-color:#013761;
    position: fixed;
    top: 62px;
}

The HTML:

<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>
        </div>
</div>

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...

http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

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 to set readonly property of textbox from css

    How can I make several divs on the left overlap one div on the right?

    how to conditionally transform div to and from a state on multiple presses of same button

    How do you find the dimensions of a “display: none” element?

    How to add “pause” button in this jquery slider?

    How to add html code into html?

    How to fix this css error in IE7 and lower?

    How to stick to bottom on layout by using CSS?

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    how to give blur effect for css overflow visible content

    How to change font size of the first option tag in a dropdown menu (select)?

    How to wrap content around an image with CSS?

    How to fit label “css width”

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    how to give dynamic height in css

    How to use external css for a background image with gedit

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    How to implement the button css like Spotify play button in the table row

    how to set up responsive columns with pure CSS?

    How to fix width of DIV that contains floated elements?

    How can i include only custom css and js files in rails application

    CSS how to center ::after pseudo elem

    Css how to replace block after click button

    How to set a:visited and a:hover programmatically in ASP.NET

    How to make whole table cell clickable but vertical align text inside it - CSS

    How to use images in CSS that is used from Jade files rendered via Node.js

    JavaScript: How to get a dynamically created element's width?

    how to select all list items except for the first and last using CSS only?