CODEWITHSUNDEEP
cssinternet-explorer
flapane
flapane

Reputation: 543

CSS transparent background not working in IE7-8

I'm slowly deleting a few small png files I used for transparent divs, and replacing them with CSS code.

This CSS code works on FF and IE9-10, and it helps in styling a textbox (it also changes the background when you click on it and adds a red 1px border):

#searchbars input {
    width: 130px;
    border: 1px solid #FFF;
    padding: 4px 2px 2px 10px;
    font-size: .9em;
    font-family: Helvetica, Arial, sans-serif;
    height: 16px;

    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.28 opacity */
    background: rgba(22, 22, 22, 0.28);
    color: #FFF;
}

#searchbars input:active,
#searchbars input:focus {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(22, 22, 22) transparent; /* #161616 /
    /* RGBa with 0.75 opacity */
    background: rgba(22, 22, 22, 0.75); 
    border: 1px solid #ff8277;
}

Here's the conditional stylesheet for IE7:

    /* For IE 5.5 - 7*/
    #searchbars input {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616);
}

#searchbars input:active, #searchbars input:focus {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616);
}

IE8 conditional sheet:

    /* For IE 8*/
   #searchbars input {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)";
}

#searchbars input:active, #searchbars input:focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)";
}

I used IE10 developer tool, and tried to render the page using IE7-8-9 engines.

IE9/10/Firefox -> everything works as expected

IE8 -> Default background and the background change when you click on the textbox (input:focus) are not the ones expected. It seems that opacity is not being applied even though the alpha hex values are correct.

IE7 -> Default background works. Background change when you click on the textbox (input:focus) doesn't work. Also, the textbox border doesn't turn red when you click on it (see border: 1px solid #ff8277; property from the original sheet)

Here's a demo page: http://www.flapane.com/calcio.php

The search box is in the upper right corner, right of the social sharing buttons.

Any hints?

Thanks in advance

Upvotes: 0

Views: 2797

Answers (1)

Nils Kaspersson
Nils Kaspersson

Reputation: 9464

What's happening here is that the regular background declarations interfere with the filters.

To fix it, add background: none to your inputs in LTE IE8 only, either through a second stylesheet or in the same document but by appending \9 to the declaration.

background: none\9; targets IE8 and below, just like the wildcard hack (*background: none;) which targets IE7 and below, or the underscore hack (_background: none;) which targets IE6 and below. You should however only need to use the first.

Upvotes: 1

Related Questions