Help - Search - Members - Calendar
Full Version: CSS Validation: Opacity
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Barons
Whats the correct code to use for see though boxes?

Right now I'm using

CODE
filter:alpha(opacity=80);   <<For IE
  opacity:0.8;                  << For Fire Fox


It appears to look and work great but its not valid.

QUOTE
Sorry! We found the following errors (4)
URI : TextArea
39 #wrap Parse Error opacity=50)
40 #wrap Property opacity doesn't exist in CSS level 2.1 but exists in : 0.8 0.8
71 .boxs Parse Error opacity=50)
72 .boxs Property opacity doesn't exist in CSS level 2.1 but exists in : 0.8 0.8


Thanks for all your help and advice.
pandy
Browser extensions never validate, unless they get incorporated in a future spec. That won't happen with this one. Validiation isn't a purpose of its own. You know why you get the error and that it doesn't harm anything. It's up to you if you want to use filter alpha or not.

One way to keep it a little cleaner, or seemingly so anyway, is to use conditional comments to serve a style sheet only to IE and put all IE specific stuff there.
amit porwal
opacity is a CSS3 specification. It doesn't validate to the 2.1 level that the validator is probably running at.

My advice: don't worry about it. CSS validation doesn't matter to the browsers or anything else. If your browser sees a selector that it doesn't recognize, it just ignores it, which is part of the specs.

The more standard browsers all recognize opacity because of how useful it is, not because CSS3 has been standardized (it hasn't).
Barons
Thanks for all the advice.

QUOTE(pandy @ Nov 7 2010, 11:36 PM) *

One way to keep it a little cleaner, or seemingly so anyway, is to use conditional comments to serve a style sheet only to IE and put all IE specific stuff there.


That sounds like it would be very helpful. Right now I'm having trouble getting my css positioned the same in IE and FF. I think I may be able to use this method to get around that as well.
Barons
How would i code a tag so that my background color is transparent but the images within that div are solid?

I've tried coding the image tags with 100 opacity and 130 to make up for the difference the background is taking away (its at 70) but it doesn't appear to have an effect.


pandy
No, it's all or nothing.

I can think of two ways. If the images aren't contained in the block you make transparent, you can position them on top of the transparent background. The other way around should work too.
CODE

#trans  { width: 500px; height: 500px;
          background: url(http://htmlhelp.com/icon/wdglogo.gif); opacity: 0.5 }
                  
#opaque img   { position: relative; top: -250px; left: 150px }


HTML
<div id="trans"></div>
<div id="opaque"><img src="http://htmlhelp.com/icon/wdglogo.gif"></div>


Or you could use an old-school trick. Only works if the background is a solid color though. Could work for a gradient too, but would be a lot harder to create. Make a smallish GIF, say 16 by 16 pixel. Then you color every second pixel with your background color and make the others transparent, like a chess board. The eye will be tricked and it will look like it's semi-transparent.
Frederiek
Do you mean like this: CSS Opacity That Doesn’t Affect Child Elements ? Or search for that article title in Google, giving more results.

Ps: Here's a nice one too: http://www.cssplay.co.uk/opacity/png.html .
pandy
Don't see anything different there except the use of a PNG. unsure.gif
Barons
I think I need to add in another div before this will work. Trying to apply it to an img tag doesn't seem to be working. I'm going to need to play around with this for a bit. I think it my work out better if i have another div tag then i should be able to fix the text as well.

CODE
#wrap {
  width: 900px;
  height:135px;
  margin-top:130px;
  margin-left:auto;
  margin-right:auto;
  background-color:#000;
  filter:alpha(opacity=70);
  filter: “alpha(opacity=70)”;
  opacity:0.70;
  }
#header {
  margin-left:auto;
  margin-right:auto;
  color:#FFF;
  }
#header li {
  float: left;
  }
#header h1 {
  font-size:35px;
  padding-top:30px;
  margin-left:137px;
  margin-right:137px;
}
#header img {
    margin-top:8px;
    margin-left:50px;
    margin-right:50px;
    }
#img.ontop {
position: relative;
top: 4.7em;
}


CODE
<div id="wrap">

   <ul id="header">
      <li><img src="image/corpicon.png" alt="Corp Logo" name="left" width="86" height="86" align="left" class="ontop" id="left" /></li>
      <li><h1>WAR ARMADA</h1></li>
      <li><img src="image/corpicon.png" alt="Corp Logo" name="right" width="86" height="86" align="right" class="ontop" id="right" /></li>
  </ul>

    <ul id="nav">
      <li><a href="http://www.wararmada.com">About</a></li>
      <li><a href="http://www.wararmada.com/forums">Forums</a></li>
      <li><a href="http://www.wararmada.com/killboards">Killboards</a></li>
      <li><a href="http://www.wararmada.com/videos">Videos</a></li>
      <li><a href="http://www.wararmada.com/screenshots">Screenshots</a></li>
    </ul>
  
</div>
Darin McGrew
Depending on what you're trying to do with transparency, the following may work too:
http://meyerweb.com/eric/css/edge/complexspiral/demo.html
pandy
Yup. Any positioning works.
Barons
I think i've got the general idea but now it seems like everything i thought i knew about aligning horizontally no longer applies.

my margin auto codes stopped working and the example I'm using it prefers left:"some"px; to move the boxes. Will i still be able to center my site for all screen res sizes doing this or should i be using another approach to align center horizontally? I was in the process of moving everything center but the left code doesn't do anything to my nav bar.


I'm testing it at

www(dot)wararmada(dot)com/untitled.html

Thanks for all the help and advice!
Barons
Yeah!!!! I love google!


I found this and it works great! I'm still having trouble with the nav bar though....

http://www.zachgraeve.com/2006/10/01/cente...e-position-div/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.