Help - Search - Members - Calendar
Full Version: opacity?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
xxkasperxx
i have been using this css code :

CODE

.text{
     /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;
    padding:.5%;
}

.text {
    position:relative;
    background:#000000 none repeat scroll 0 0;
    border:3px solid #222222;
    color:#FFFFFF;
    width:79%;
    height:220%;
    margin-left:8.8%;
    margin-top:7%;
}


it works fine in everything except IE... can anyone help? i just need the box i created with css to have the opacity down a little, so you can see the background
Christian J
I suggest using conditional comments to single out each IE version. As it is, some versions may support more than one property, but perhaps in different ways.

There may also be a different between block and inline elements.
xxkasperxx
how would i go about doing that?
Frederiek
See http://www.quirksmode.org/css/condcom.html
pandy
For opacity to work in IE the element must have "layout" (don't ask, it's microsoftish mumbo jumbo). Don't know if that's still true for IE8, but it is for earlier versions.
http://www.satzansatz.de/cssd/onhavinglayout.html
http://msdn.microsoft.com/en-us/library/ms533776.aspx

'position: relative' doesn't do the trick. But 'position: fixed' does, which I don't think is mentioned among the hasLayout triggers on the pages above. IIRC they only list 'absolute'.
Christian J
QUOTE(pandy @ Aug 26 2011, 01:24 PM) *

'position: relative' doesn't do the trick. But 'position: fixed' does, which I don't think is mentioned among the hasLayout triggers on the pages above. IIRC they only list 'absolute'.

Width or height should work too, but that doesn't apply to inline elements.
pandy
I think they are listed. 'position: fixed' isn't.
Christian J
QUOTE(pandy @ Aug 26 2011, 04:32 PM) *

I think they are listed.

And also used by the OP. mellow.gif
pandy
Ah, I didn't see that. blush.gif
Now I get what you are saying, that .text must be an inline element. Right.
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-2014 Invision Power Services, Inc.