• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 207
  • Last Modified:

Transparent text button IE problem

Hello experts. I am having a problem with how IE is displaying a transparent button with text.
While every other up to date browser diplays my button properly IE is displaying it like this

Below is my CSS class of the button.

What am I missing here?
.buttonreplays
{
 	font-family: Verdana, Arial, sans-serif;
  font-weight: normal;
  font-size: 12;
	text-align:right;
	color: #FFFFFF;	
	border:0px;
	cursor:pointer;
	background-color: rgba(0, 0, 0, 0.0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000, endColorstr=#ff000000); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000000, endColorstr=#ff000000)";		
}

Open in new window

0
panos2009
Asked:
panos2009
  • 4
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
check this cross browser background transparency code

.alpha60
                  {
                        /* Fallback for web browsers that doesn't support RGBa */
                        background: rgb(0, 0, 0) transparent;
                        /* RGBa with 0.6 opacity */
                        background: rgba(0, 0, 0, 0.6);
                        /* For IE 5.5 - 7*/
                        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
                        /* For IE 8*/
                        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
                  }
0
 
panos2009Author Commented:
That's exactly what I am using if you read my code. It's working fine when it comes to divs and tables but it's not working with <asp:Button>.
0
 
Gurvinder Pal SinghCommented:
can you please attach the image rather than link to it, since it is not opening in my machine
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
panos2009Author Commented:
Here are the two images.
Others.jpg
IE.jpg
0
 
Gurvinder Pal SinghCommented:
check this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		.buttonreplays
		{
			font-family: Verdana, Arial, sans-serif;
		  font-weight: normal;
		  font-size: 12;
			text-align:right;
			color: #000;	
			border:0px;
			cursor:pointer;
		}
		.alpha60
                  {
                        /* Fallback for web browsers that doesn't support RGBa */
                        background: rgb(0, 0, 0) transparent;
                        /* RGBa with 0.6 opacity */
                        background: rgba(0, 0, 0, 0.0);
                        /* For IE 5.5 - 7*/
                        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
                        /* For IE 8*/
                        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
                  }
	</style>
</HEAD>

<BODY>
	<input type="button" class="buttonreplays alpha60" value="value">
</BODY>
</HTML>

Open in new window

0
 
panos2009Author Commented:
It's not working either, I am getting a gray background instead of black :(
0
 
panos2009Author Commented:
I accidentaly found the solution!

I removed all the transparency properties and set the background property to a non existing image and it works in all browsers!
0
 
Amandeep Singh BhullarCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now