HTMLHelp Forums > opacity?

Full Version: opacity?

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

xxkasperxx

Aug 24 2011, 04:17 PM

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

Aug 25 2011, 10:28 AM

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

Aug 25 2011, 06:59 PM

how would i go about doing that?

Frederiek

Aug 26 2011, 03:42 AM

See http://www.quirksmode.org/css/condcom.html

pandy

Aug 26 2011, 06:24 AM

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

Aug 26 2011, 06:36 AM

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

Aug 26 2011, 09:32 AM

I think they are listed. 'position: fixed' isn't.

Christian J

Aug 27 2011, 04:00 PM

QUOTE(pandy @ Aug 26 2011, 04:32 PM)

I think they are listed.

And also used by the OP.

pandy

Aug 28 2011, 12:56 AM

Ah, I didn't see that.

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.