...

View Full Version : Background color Transparency in IE



jfinner1
11-17-2009, 05:51 PM
Here's my site: http://jfinner1.co.cc/

It looks great in Firefox, but I can't get the transparency to work in IE. And so far the only fix I've found deals with Java, or something, which I know nothing about. Can anyone help me find a fix that I understand, or explain a fix that exists, or something? Thanks in advance.

Excavator
11-17-2009, 06:20 PM
Hello jfinner1,
This is supposed to work in all modern browsers (which means it does not work in IE6) - http://www.w3schools.com/Css/css_image_transparency.asp and it looks like what you're trying to accomplish.

I'm still playing around with your .75 setting. That doesn't seem to work in any version of IE?

jfinner1
11-17-2009, 06:48 PM
Ok, I tried what the w3 site said, and nothing changed. Here's what I had:


#paragraphs{
background-color: "#fff";
width: 75%;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
padding: 30px;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

I'm currently testing on IE8. Granted, my Windows computer hates me right now, so even using it for testing is a bit... difficult. I don't really care if it works on older browsers, or even any other browsers. The whole thing is just for a school project, and our Prof only checks in FF3 and IE8, so as long as it works in those two, I'm happy.

Excavator
11-17-2009, 07:37 PM
This seems to be working, see highlighted in red below.
If you're testing it locally in IE8, notice at the top the browser is blocking ActiveX controls. You have to allow IE8 to run them and it works. That doesn't happen if you run it off the web instead of locally.



#headertext {
background: url(http://jfinner1.co.cc/images/scrollbg.gif) repeat-x;
margin: 0 23px;
text-align: center;
font-size: 30px;
line-height: 100px;
/*position: absolute;
top: 0px;
width: 100%;
z-index: 1;*/
}
#content{
text-align: center;
padding: 50px 0 0;
z-index: 1;
}
#paragraphs{
width: 75%;
margin: 30px auto;
padding: 30px;
background:#ffffff;
filter:alpha(opacity=60);
opacity: 0.6;
}
#footer{
padding: 20px;
}

jfinner1
11-17-2009, 11:18 PM
Thank You! That worked perfectly! Yeah!

:-D

jfinner1
11-17-2009, 11:26 PM
Opps, check that, almost perfect, lol. Slight issue, now *everything* is semi-transparent, including text and images inside the div. I'm gonna work on fixing it myself, but if you have any suggestions, they would be welcome. Thanks again!

jfinner1
11-18-2009, 06:41 PM
Ok, I've been trying, and I can't figure out how to fix it. I've tried adding a new div inside the existing one with a higher opacity, no change, tried adding opacity to the image alone, no change, and tried a few other random things that I can't remember, lol. So I'm clueless, a feeling I'm getting more and more accustomed to since I started this class. Any ideas? Thanks everyone!

Excavator
11-18-2009, 06:47 PM
Ok, I've been trying, and I can't figure out how to fix it. I've tried adding a new div inside the existing one with a higher opacity, no change, tried adding opacity to the image alone, no change, and tried a few other random things that I can't remember, lol. So I'm clueless, a feeling I'm getting more and more accustomed to since I started this class. Any ideas? Thanks everyone!

It looks like your on the right track when you add a seperate div for the content. Have a look here - http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/

Apostropartheid
11-19-2009, 12:02 AM
Opacity is inherited at 100% and you cannot set a value higher than 1; in other words, child elements cannot have a higher opacity than their parents.

If you want just the background to be semitransparent, you'll need to use either a PNG with alpha transparency as a background image or use the rgba() colour notation. The latter has only very tentative support from browsers at the moment.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum