Web Analytics Made Easy -
StatCounter CSS and transarency, inheriting etc... - CodingForum

Announcement

Collapse
No announcement yet.

CSS and transarency, inheriting etc...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS and transarency, inheriting etc...

    So I got transparency to work in FF and IE by using these two css lines:

    Code:
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    This lets the transparency work in FF and in IE. But neither of those two lines validate in the W3C CSS validator.

    The other problem is, when I set trans on my DIV, all the text and objects in that div inherit the trans. Which I don't want. Even if I create another DIV IN that div, and set trans back to normal, it is still trans, in FF.
    In IE, I can get my text back to normal just by setting some text attribute like aligning it or padding it or something. But in FF I can't get the text in this DIV to be black. Instead it it's taking on the 50% trans.

    So then, how can I take my opacity back to normal within a block that was set @ 50%?

    Here is the content and p block as I have it in css:
    Code:
    #content {
    width:770px;
    height:100%;
    margin:auto;
    background-color:#BFBAB2;
    filter:alpha(opacity=60);
    -moz-opacity:.35;
    border:1px solid black;
    }
    
    #content p {
    margin:0;
    padding:10px;
    text-align:justify;
    }
    I've tried putting a new set of -moz- and filter IN the p declaration, didn't work.

    So how can I get around this, and cancel the trans for all the rest of my blocks IN that block?

    Thanks a bunch, and this site I'm working on will almost be done!

  • #2
    It's not possible. Transparency is always inherited by child elements. The values are always relative (percent) and if a child element has 100% and the parent has 50% opacity then the child will still have 50% because 100% of 1/2 is still 1/2. Can you follow me so far?

    The reason why it's not validating is because, well, it's not a valid W3C standard. The filter property is an IE proprietary property and -moz-opacity is Mozilla proprietary and won't work in any other browser then IE and Mozilla/Netscape browsers, respectively.
    The correct CSS property is just opacity which does also work in the latest Opera release and I think even in Safari. It ain't an official W3C standard yet but it will be with the official release of the CSS3 specifications. However, for older Netscape browsers and IE you'll still need the proprietary rules.

    Now, a solution for your problem might be to use a semi transparent png background image instead of setting opacity directly. However, it will be easier for us to help you if you told us what you are actually trying to achieve (incl. providing your entire code and/or a link to your site).
    Stop solving problems you don’t yet have!

    Comment


    • #3
      The reason I'm setting trans on the DIV is because the background is a texture. So the texture will show through. If it was a solid color, I wouldn't use trans.

      So then if it's relative, maybe I could set the opacity to 150%

      Basically the transparent DIV is my entire content block. Inside that goes all my text, images etc... But if everything I put in that div becomes trans, hmm, can't do that.

      Could I make two divs, one trans, and the other not, but NOT put them inside each other, and use absolute positioning or something?

      The site changes a lot because I'm still working on it, so I can't say this will be current (as of this problem), when it is viewed. But you can see the progress at:
      http://www.zacksdomain.com/websites/vhm

      The source is easy to see, it's all html. And the style sheet is style.css.

      Thanks.

      Comment


      • #4
        OK, if it's really just that gray background in the middle then use a 1x1 pixel semi-transparent png image as background image for the content section. It'll work in all browsers (with a workaround even in IE) and you don't need to set any opacity in your CSS.
        Stop solving problems you don’t yet have!

        Comment


        • #5
          Originally posted by VIPStephan View Post
          OK, if it's really just that gray background in the middle then use a 1x1 pixel semi-transparent png image as background image for the content section. It'll work in all browsers (with a workaround even in IE) and you don't need to set any opacity in your CSS.
          what is the workaround - I thought I had it with some *'s but it still doesn't work right in ie - I wanted a trans bg on my left-nav and it works quite lovely in ff but everything is faded in ie - you can see it here

          and this is my css:

          Code:
          body {
          	background-color: #ffffe8;
          	font-family: "Trebuchet MS";
          	font-size: 12px;
          	color: #000000;
          	text-align: center;
          }
          #content-wrap {
          	width: 90%;
          	margin-top: 10px;
          	margin-right: auto;
          	margin-bottom: 10px;
          	margin-left: auto;
          	text-align: left;
          	background-color: #FFFFFF;
          	border: thin solid #89B3BF;
          }
          #left-nav-column {
          	width: 150px;
          	float: left;
          	background-image: url(../images/bg-image.jpg);
          	background-repeat: no-repeat;
          	background-position: center top;
          	min-height:768px;
          	margin: 0px;
          	padding: 0px;
          	border-right-width: 1px;
          	border-right-style: solid;
          	border-right-color: #89B3BF;
          }
          * #left-nav-column {
          	margin: 0px;
          	padding: 0px;
          	height: 768px;
          	background-image: url(../images/bg-image.jpg);
          	background-repeat: no-repeat;
          }
          #left-nav ul {
          	margin: 0px;
          	padding: 0px;
          	list-style-type: none;
          	width: 150px;
          	background-image: url(../images/menu-bg.png);
          }
          * #left-nav ul {
          	background-image: url(../images/menu-bg.png);
          	filter: Alpha(Opacity=25);
          }
          #left-nav li {
          	list-style-type: none;
          	font-size: 14px;
          	text-indent: 10pt;
          	padding: 10px;
          	display: block;
          	width: 130px;
          }
          * #left-nav li {
          	filter: Alpha(Opacity=100);
          }
          #left-nav li a:link, a:visited {
          	list-display-type:none;
          	text-decoration:none;
          	color:#000000;
          	list-style-type: none;
          	text-indent: 10pt;
          	display: block;
          	width: 100%;
          }
          * #left-nav li a:link, a:visited {
          		filter: Alpha(Opacity=100);
          }
          #left-nav li a:hover,a:active {
          	display:block;
          	list-style-type: none;
          	text-indent: 10pt;
          	color: #FFFFFF;
          	background-color: #006699;
          	margin: 0px;
          	text-decoration: none;
          	width: 100%;
          }
          * #left-nav li a:hover, a:active{
          	filter: Alpha(Opacity=100);
          }
          #main-content {
          	background-color: #FFFFFF;
          	position: relative;
          	float: left;
          	text-align: left;
          	padding: 2%;
          	width: 71%;
          }
          #footer {
          	background-color: #89B3BF;
          	color: #FFFFFF;
          	padding: 10px;
          	border-top-width: 1px;
          	border-top-style: solid;
          	border-top-color: #89B3BF;
          }
          .clearfix {
          	clear: both;
          }

          Comment


          • #6
            To make a png semi transparent in IE6 you need this special (though invalid) CSS rule applied to the element with the background:
            Code:
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image.png');
            I always put that into a conditional comment so it doesn't affect the validity of the regular stylesheet.
            Stop solving problems you don’t yet have!

            Comment


            • #7
              The transparent png image sounds just brilliant.
              I gave it a shot. Opened up Photoshop, created the px image of my bg color and saved as a 2 color png (to save space).
              I am able to make this image my background. So far so good.
              But when I pop that filter: statement in the DIV CSS block, the WHOLE content div dissapears entirely, and everything in it.

              Could I maybe see some working code of this technique in action?

              Basically I just tried this:
              Code:
              #content {
              width:770px;
              height:100%;
              margin:auto;
              background-color:#BFBAB2;
              background-image:url('images/contentbg.png');
              background-repeat:repeat;
              filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbg.png');
              border:1px solid black;
              line-height:1.5em;
              text-align:justify;
              }
              Any thoughts?

              Comment


              • #8
                Hm, maybe the additional value I left out is required? A search on the internet gives you numerous results so you should always do that first before asking.
                http://www.pcmag.com/article2/0,1759,1645331,00.asp
                http://koivi.com/ie-png-transparency/
                Stop solving problems you don’t yet have!

                Comment


                • #9
                  Ok I finally got it working using the php thingy and a png. The png needs to be PNG-8 or PNG-24, and not the 2 color simple one I created first.
                  Also the code needs to be inline and not in a sepparate CSS file.

                  Now, Firefox actually does the transparent PNG with no extra code at all! Just set the tiled png as the background and FF did it's thing. But IE still had the solid color. No, I take that back. In IE, if you hit F5 to refresh the page, you can see the transparent for a split second and it turns solid. So that PHP script fixed that.

                  I finally have what I want, a tiled background, with a transparent content box over it, and content that isn't ALSO trans.

                  Here is the site, almost done:
                  http://www.visionaryhospitality.com

                  Thanks for the help!

                  Comment


                  • #10
                    It doesn't have to be inline. An image path specified for filterrogidXImageTransform.Microsoft.AlphaImageLoader(); is relative to the location of the X/HTML document instead of the location of the stylesheet.
                    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
                    Java != JavaScript && JScript != JavaScript
                    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

                    Comment


                    • #11
                      I think it's the PHP script thing that said it can't be an external CSS, because it is searching the active code which doesn't loop through external files or something like that.
                      So for the PHP script to work, unless I read it wrong, they want the background styles inline.

                      Now if only MS would update IE to be, um, standardized, we wouldn't be dealing with this!

                      Comment


                      • #12
                        They fixed the problems with PNGs in IE7. We'll still need to code for IE6 for many years to come though.

                        Layout Complete Announced at MIX06
                        Standards and CSS in IE7
                        What’s New for CSS in Beta 2 Preview?
                        Details on [the] CSS changes for IE7
                        Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
                        Java != JavaScript && JScript != JavaScript
                        Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

                        Comment


                        • #13
                          Originally posted by Kravvitz View Post
                          They fixed the problems with PNGs in IE7. We'll still need to code for IE6 for many years to come though.

                          Layout Complete Announced at MIX06
                          Standards and CSS in IE7
                          What’s New for CSS in Beta 2 Preview?
                          Details on [the] CSS changes for IE7
                          What? No link to the IE7 section at /*PIE*/ ?
                          Don't forget to read the new article regarding the star-html hack if you use it (hint: top of the page that I linked to).
                          PHP Code:
                          $hello file_get_contents('hello.txt'); echo $hello
                          hello

                          Comment


                          • #14
                            That article is outdated. John hasn't updated it yet to mention that height and min-height work when IE7 is in Standards Mode.
                            Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
                            Java != JavaScript && JScript != JavaScript
                            Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

                            Comment

                            Working...
                            X