Transparent background not working

HTML & CSS
1

Hi,
I’m working on a site with some transparent backgrounds. Ive managed to get it all working cross browser except the drop down part of the menu isnt right in IE8 (and probably all IE versions).
The code used for this is exactly the same as the main nav so i dont understand why the drop downs are so different. (i want the drop downs to be the same colour as the main menu / nav)

Any ideas? Thanks!

Site: http://online.messagetrain.com/clients/haktari_2013/

Code used:

background-color:rgba(40,60,146,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc283c92, endColorstr=#cc283c92);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc283c92 endColorstr=#cc283c92";
2

IE8 and under do not recognize rgba colors.

3

Hi ronpat,

Thanks for your reply, the transparency is actually working its just that its completely different… I thought that the css code ‘-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc283c92 endColorstr=#cc283c92”;’ was for IE???
The main nave and the drop down both have the exact same code… so not sure why one is so different from the other. I’ve attached a screen grab.

Thanks!

4

Yes, that was not-so-bright of me to overlook the IE filters. Sorry. Will look at the screengrab after it’s approved. Hopefully, a more IE experienced person will beat me to it, though :stuck_out_tongue:

5

Hi,

I believe the problem is that the superfish dropdown utilises the iE opacity filter to show the dropdown which cancels out your gradient filter.

You could try doing this:


#superfish-1 ul {
background-color:rgba(40,60,146,0.7); 
[B]/* For IE 5.5 - 8*/
filter:none!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc283c92, endColorstr=#cc283c92)!important;[/B]
display:none;
padding:17px 16px 10px 32px;
top:48px !important;
width:110px !important;
}

(I removed the -ms version of the filter as the above seems to work without it).

However, those IE filters are always problematical and I prefer to omit them and let IE8 have solid colours or just supply a transparent png for ie8 and under instead.