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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

    IE transparent background

    Both this website and this website have DIV transparency working in Firefox.

    The latter also has it in IE.

    Why isn't the first website displaying transparency in IE?

    Both sites use the same CSS/HTML structure.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What version of IE are you using?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    IE8. Weird thing is I had this working before a change in the transparency amount (from 85 to 65, say). Confused.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    What version of IE are you using?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks like your doctypes might be different. I also suggest removing the white space before your doctypes.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Both doctypes are <!DOCTYPE html>

    Quote Originally Posted by _Aerospace_Eng_ View Post
    Looks like your doctypes might be different. I also suggest removing the white space before your doctypes.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Because your class .post_container{} has also an IE only property, filter, which will overwrite any other transparency set:
    Code:
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000, endColorstr=#D9000000);
    So that all the IE versions will follow this rule, not the rgba() background color. I doubt it worked before for any IE, as you said.

    The problem is the IE compatibility with the CSS rgba() values. Anyway, IE8 and less don't support it, so there is no wonder that changing your rgba() values did nothing in IE8.
    See also:
    http://css-tricks.com/rgba-browser-support/

    You should repair your CSS codes and find a solution for IE7 and IE8 as well. Probably that filter:, but make it to be seen only by IE lower than IE9. I see you have used IE conditional comments. Do the same for that.
    Last edited by Kor; 05-11-2012 at 12:35 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks Kor

    That IE only property is also in the css for .post_container for the website which does display transparency in IE.

    The CSS format is identical.

    Quote Originally Posted by Kor View Post
    Because your class .post_container{} has also an IE only property, filter, which will overwrite any other transparency set:
    Code:
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000, endColorstr=#D9000000);
    So that all the IE versions will follow this rule, not the rgba() background color. I doubt it worked before for any IE, as you said.

    The problem is the IE compatibility with the CSS rgba() values. Anyway, IE8 and less don't support it, so there is no wonder that changing your rgba() values did nothing in IE8.
    See also:
    http://css-tricks.com/rgba-browser-support/

    You should repair your CSS codes and find a solution for IE7 and IE8 as well. Probably that filter:, but make it to be seen only by IE lower than IE9. I see you have used IE conditional comments. Do the same for that.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by SRD75 View Post
    Thanks Kor

    That IE only property is also in the css for .post_container for the website which does display transparency in IE.

    The CSS format is identical.
    It is clear that the CSS format is not identical, as long as the transparency looks different.

    Or maybe they should not be identical (after all, there are other colors of transparency), but they are exactly where they should not be.

    Code:
    .post_container {
    	padding: 15px;
    	background: #fff;
    	margin-bottom:15px;
    	margin-left: 0px;
    	border: 1px solid #DDD;
    }
    That makes the transparency to be, in your first site, to be over a white background color. That means something opaque.

    For a reason or another, in your second site that rule is overwritten, so that the transparency has no background color beneath.
    Last edited by Kor; 05-11-2012 at 02:11 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Kor View Post
    Code:
    .post_container {
    	padding: 15px;
    	background: #fff;
    	margin-bottom:15px;
    	margin-left: 0px;
    	border: 1px solid #DDD;
    }
    Not sure where you got that Kor. This is the current CSS for the working site:
    Code:
    .post_container {
    	padding: 15px;
    	margin-bottom:15px;
    	margin-left: 0px;
    	border: 1px solid #DDD;
    	border-radius:8px;
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    	background: rgb(255, 255, 255) transparent;
    	background: rgba(255,255,255,0.85);
    	/* For IE 5.5 - 7*/
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9FFFFF, endColorstr=#D9FFFFFF);
      /* For IE 8*/
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9FFFFFF, endColorstr=#D9FFFFFF)";	
    }

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You have 2 classes .post_container, in two different CSS files. The last loaded one will overwrite the similar properties written in the first one, but it keeps whichever property has no duplicate. Would you check with the FireBug (in Moz) or Developer Tools (in IE), you will see that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    SRD75 (05-14-2012)

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Apologies Kor.

    The site is run on Wordpress, and the theme is a child theme. I overlooked the possibility of background:; not being overridden by the the child theme's CSS.

    Thank you.


  •  

    Tags for this Thread

    Posting Permissions

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