SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict phpster's Avatar
    Join Date
    Feb 2005
    Location
    Toronto, Canada
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie 7 and opacity problem

    Hi All,

    The below css works great in FF, but the opacity setting in IE7 does not seem to work...there was a post here previously about this and checking the hasLayout property. Its set to true for this element (its a div)...

    Anyone have any ideas or hacks to get this sucker working in ie7?


    #cover {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: Black;
    filter:alpha(opacity=70);
    opacity:.70;
    z-index: -3;

    }
    TIA
    phpster

    I wish my computer would do what I want it to.
    Not what I tell it to do...

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Seems to work in IE 7 only , since it has a height it has haslayout , a set height usually gets you in trouble with FF OP

    z index negative FF don't likes that

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    html,body{height:100&#37;;}
    
    *{padding:0;margin:0;}
    
    #cover {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: Black;
    filter:alpha(opacity=30); -moz-opacity:.30;opacity:.30; -khtml-opacity:.30; 
    z-index: 3;
    color:#ffffff;
    }
    </style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div id="cover"><p>12345</p></div>
    
    </body>
    </html>

  3. #3
    SitePoint Addict phpster's Avatar
    Join Date
    Feb 2005
    Location
    Toronto, Canada
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works correctly in FF and in OP...its only the opacity in IE that is messed up
    phpster

    I wish my computer would do what I want it to.
    Not what I tell it to do...

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all I ever use.

    opacity: .75; -moz-opacity; 0.75;
    filter: alpha(opacity=75);

    I believe filter: alpha is specific to ie, so I just put both in there.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gecko browsers don't need the -moz-opacity property anymore since they properly implement opacity.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    My example works, Your code WORKS ONLY IN IE ? so maybe show your full code , and get it going


Bookmarks

Posting Permissions

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