Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background color Transparency in IE

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I tried what the w3 site said, and nothing changed. Here's what I had:
    Code:
    		#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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.

    Code:
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You! That worked perfectly! Yeah!

    :-D

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by jfinner1 View Post
    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/...arent-columns/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •