MrFish Posted September 6, 2009 Share Posted September 6, 2009 My opacity filter used to work for all browsers but it stopped somehow.THE CODE WITH OPACITY IS 4 LINES FROM THE ENDCode: <html><head><title>Chameleon Soundscape ~beta</title><style type="text/css"> a{ text-decoration: underline; color: #FBA200; cu rsor: pointer; } a:link{ text-decoration: underline; color: #FBA200; } a:hover{ text-decoration: none; color: #FBA200; } a:visited{ text-decoration: underline; color: #FBA200; } a:active{ text-decoration: underline; color: #FBA200; } .right_header{ padding: 10px; margin: 15px 5px 0px 5px; text-align: left; font-size: 20px; color: #555; border-bottom: 1px solid #555; font-family: Tahoma; } .invisible{ visibility: hidden; } .visible{ visibility: visible; }</style><script type="text/javascript"> function close_signup(){ document.getElementById("blackout").style.visibility="hidden"; document.getElementById("signup_message").style.visibility="hidden"; } function open_signup(){ document.getElementById("blackout").style.visibility="visible"; document.getElementById("signup_message").style.visibility="visible"; }</script></head><body style="margin: 0px; background-color: #29287F; font-family: Verdana; font-size: 12px;"> <div id="ghost" style="float: left; width: 100%; height: 100%;"> <!-- The "ghost" div is a just-in-case div --> <div id="wrapper" style="float: left; width: 100%; height: 100%;"> <!-- Holding all of our content. Also good for having an overlaying background. --> <div id="wrapper_middle" style="width: 800px; height: 100%; margin: 0px auto;"> <!-- Positioning our middle content --> <div id="wrapper_content" style="width: 100%; margin: 100px 0px 0px 0px; float: left;"> <!-- Used to position the content's y-axis --> <div id="content_top" style="width: 100%; height: 170px; float: right;"> <!-- Elements that come off the visible contentbox vertically --> <div id="news_feed_graphic" style="float: right; width: 220px; background-image: url('images/newsfeed.gif'); height: 170px;"> <!-- Graphic news feed item --> </div> </div> <div id="content_middle" style="width: 800px; float: left; height:100%; "> <!-- Main content goes here --> <div id="content_left" style="float: left; width: 600px; height:100%;"> <div id="content_menu" style="width: 600px; height: 100px; background-image: url('images/mp3player.gif')"> <!-- Menu Buttons and MP3 --> </div> <div id="content_news" style="width: 580px; padding: 10px; height: 100%; background-color: #ddd;"> <!-- Your personal news feed --> [News Feed Place Holder] </div> </div> <div id="content_right" style="float: left; width: 199px; height: 100%; border-left: 1px solid #bbb;"> <div id="right_round" style="background-image: url('images/topright.gif'); height: 10px; width: 199px;"> <!-- Giving the right a rounded top --> </div> <div id="right_wrapper" style="background-color: #ddd;"> <div id="content_login"> <!-- users can login here --> <div class="right_header" id="login_header" style="margin-top: 0px;"> Login or Signup </div> <div id="login_box" style="padding: 5px; text-align: center;"> <? include('includes/loginbox.php'); ?> </div> </div> <div id="content_shoutbox"> <!-- shoutbox here --> <div id="shoutbox_header" class="right_header"> ShoutBox </div> <div id="shoutbox_box" style="padding: 5px; text-align: center;"> [ShoutBox Place Holder] </div> </div> </div> </div> </div> </div> </div> <div id="wrapper_footer" style="background-color: #bbb; width: 100%; float: left;"> <div id="subwrapper_footer" style="width:800px; margin: 0px auto;"> <div id="footer_copyright" style="width: 380px; float: left; padding: 10px;"> <!-- Preventing theft of all band name, graphics, code, and music. Probably other things too --> [CopyRight Place Holder] </div> <div id="footer_playtimes" style="width: 380px; float: left; padding: 10px;"> <!-- Showing users a quick reference of the playing time and location of your band --> [Show Feed Place Holder] </div> </div> </div> </div> </div> <div id="signup_message" style="visibility: hidden; width: 100%; height: 100%; z-index: 3; position: absolute; top: 0px: left: 0px;"> <div id="signup" style="border: 2px solid #bbb; background-color: #fff; width: 400px; margin: 0 auto; margin-top: 10%;"> <div id="signup_topbar" style="width: 390px; height: 20px; background-color: #bbb; float: right; padding: 5px;"> <div style="font-size: 20px; font-family: Tahoma; color: #555; margin-left: 20px; float: left;">Signup</div><div style="background-image: url('images/x.gif'); border: 0px; cursor: pointer; width: 20px; height: 20px; float: right;" onClick="close_signup();"></div> </div> <div id="message" style="width: 360px; padding: 20px; margin-top: 30px;"> <? include('includes/signupforms.php'); ?> </div> </div> </div> <div id="blackout" style="visibility: hidden; background-color: #000; width: 100%; height: 100%; z-index: 2; position: absolute; top: 0px; left: 0px; filter:alpha(opacity=60); opacity:60; -moz-opacity:0.6; -webkit-opacity:0.6; -khtml-opacity:0.6; -op-opacity:0.6; -ie-opacity:0.6;"> </div></body></html> You can see it here- http://chameleonsoundscape.com/index.phpJust click Free Signup! (The X will close it, obviously).I ran the w3c css validation but it will get errors for opacity regardless. Link to comment Share on other sites More sharing options...
Ingolme Posted September 6, 2009 Share Posted September 6, 2009 This is wrong: opacity:60 You have to write it as opacity: 0.6; Link to comment Share on other sites More sharing options...
MrFish Posted September 6, 2009 Author Share Posted September 6, 2009 This is wrong:opacity:60 You have to write it as opacity: 0.6; Hehe, you're fast. I don't ever remember setting opacity to 60 instead of 0.6.Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.