Opacity CSS help

Dev Shed Forums Sponsor:
February 7th, 2013, 01:29 PM
okie2
Registered User
Join Date: Feb 2013
Posts: 1
Time spent in forums: 20 m 12 sec
Reputation Power: 0
Opacity CSS help
Hi,

I have a DIV that uses opacity (transbox), inside that DIV is another DIV that includes a slideshow script (showcasebox).
My issue is how do I get the DIV with the slideshow not to display the opacity of the preceeding DIV?
It still has transparency in FF 18.0.2 and Chrome but in IE 8 it looks fine.
I tried using a style in the preceeding DIV like opacity 1.0 etc to show no transparency but that didn't work.
Here is the full page code and a link to a live 'test' page.

live 'test page'

Full code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>THE NON-PROFIT CENTER - Home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.cdsaok.org/movie/swf/flowplayer-3.2.4.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script src="jquery.showcase.2.0.js" type="text/javascript"></script>
    <script type="text/javascript">   
        $(function() {             
            $("#showCase").showcase({ 
				images: [{ url: "http://www.cdsaok.org/images/inside1a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside2a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside3a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside4a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside5a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside6a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside1a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside2a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside3a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside4a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside5a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside6a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside1a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside2a.jpg", description:"", link:"", target: "_blank" },
                                         { url: "http://www.cdsaok.org/images/inside3a.jpg", description: "", link: "", target: "_blank" }], 		        width: "500px",
		height: "280px",
                animation: { type: "fade", interval: 4500, stopOnHover: true },   
     navigator: {  
        position: "top-right", autoHide: true, orientation: "horizontal", showMiniature:true,
        css: { padding:"0px", margin: "0px 0px 1px 1px" }, 
        showNumber: false, 
        item: {  
            css: { height:"25px", "line-height":"25px", width:"25px", "-moz-border-radius": "0px", "-webkit-border-radius": "0px",  
                   backgroundColor: "#dadada", borderColor:"#dadada", margin: "0px", "text-align": "center", "vertical-align": "middle", "font-face":"Helvetica", "font-size":"12px" }, 
            cssHover: { backgroundColor: "#dadada", borderColor: "#dadada" }, 
            cssSelected: { backgroundColor: "#dadada", borderColor: "#dadada" } 
        } 
    },   
                titleBar: { enabled: false }   
   });   
});
</script>
<style type="text/css">
#hovercell td:hover
  { 
  position: relative;
  z-index: 599;
  cursor: default;
  background:#1D1D34;
  margin: 0 0 0 0;
  visibility:visible;
  }
</style>
<style type="text/css">
div.background
  {
  width:960px;
  height:550px;
  background:url(bg.gif) no-repeat;
  overflow: hidden;
  margin:0 auto;
  }
 .styleHDx {
  color : #FFFFFF;
  font-size : 1.3em;
  font-weight : bold;
  font-family:Arial;      
}
 .boldface {
  font-weight: bold;
}
.inlinemails {
  font-size:10.0pt;
  color:#FFFFFF;
  font-family:Arial;
  text-decoration:none;
  outline:none;
}
div.showcasebox
{
  width:520px;
  height:280px;
  margin-left:260px;
  background-color:#999999;
  text-align:center;
  padding-top:20px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:20px;
  -moz-border-radius:10px;
  border-radius:10px;
}
div.transbox {width:860px;
  height:450px;
  margin:50px 50px;
  background-color:#666666;
  opacity:.85;
  filter:alpha(opacity=85); /* For IE8 and earlier */
  /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; */
  /*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); */
  /*-moz-opacity:.85; */ /* ff lt 1.5, netscape */
  -moz-border-radius:10px;
  border-radius:10px;
  text-align:center;
}
div.leftbox p
  {
  text-align:center;
  padding-left:20px;
  padding-right:5px;
  color:#FFFFFF;
  font-family:Arial;
  font-size:10.0pt;
  }
</style>
</head>
<body>
<div style="width:960px; height:15px; margin:0 auto; background-position: 50% 50%; background-color:#666666;">&nbsp;</div>
<div style="width:960px; margin:0 auto; text-align:center;"><a href="index.html" target="_self" style="outline:none;"><img src="TNPC.png" alt="NPC Logo" border="0" /></a></div>
<div style="width:960px; margin:0 auto;" id="hovercell"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999"><tr align="center" valign="middle" bgcolor="#999999"><td width="25%" align="center" valign="middle" bgcolor="#999999"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="http://www.cdsaok.org" tabindex="1" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">CDSA Services</a></span></td><td width="25%" height="35" align="center" valign="middle" bgcolor="#999999"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="nonprofits.html" tabindex="2" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">Co-locating Non-Profits</a></span></td><td width="25%" align="center" valign="middle" bgcolor="#999999"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="community.html" tabindex="3" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">Community Data</a></span></td><td width="25%" align="center" valign="middle" bgcolor="#999999"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="calendar.html" tabindex="4" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">Calendar</a></span></td></tr></table></div>
<div class="background">
  <div class="transbox"><div style="display:inline-block; margin-top:65px;"><div class="leftbox" style="width:200px; height:320px; float:left"><p>The Non-Profit Center offers affordable rental space with access to a wide range of ammenities including, meeting room/s, banquet room and board room.<br />Consider the newly renovated Non-Profit Center as your new home.<br /><br />For more information on rental space or function room rental, please contact us at <a href="mailto:test@test.org" style="text-decoration:none; outline:none; color:#FFFFFF;">test@test.org</a> or 580-242-6131 during normal business hours.</p></div>
    <div class="showcasebox">
      <div id="showCase" style="margin:auto;"></div>
    </div>
  </div>
</div></div>
<div style="width:960px; margin:0 auto;" id="hovercell"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#999999"><tr align="center" valign="middle" bgcolor="#999999">
  <td width="25%" align="right" valign="middle" bgcolor="#999999" style="padding-right:100px"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="about.html" tabindex="5" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">About THE NON-PROFIT CENTER</a></span></td>
  <td width="25%" height="35" align="left" valign="middle" bgcolor="#999999" style="padding-left:100px"><span style="font-size:12.0pt; color:#FFFFFF; font-family:Arial;"><a href="contact.html" tabindex="6" target="_self" style="text-decoration:none; color:#FFFFFF; outline:none;">Contact THE NON-PROFIT CENTER</a></span></td>
</tr></table></div>
<div style="width:960px; height:15px; margin:0 auto; background-position: 50% 50%; background-color:#666666; text-align:center; padding-top:2px;"><span style="font-size:8.0pt; color:#FFFFFF; font-family:Arial;">114 S. Independence St. Enid, OK&nbsp;&nbsp;|&nbsp;&nbsp;580-242-6131&nbsp;&nbsp;|&nbsp;&nbsp;<a href="mailto:test@test.org" style="text-decoration:none; color:#FFFFFF; outline:none;">test@test.org</a></span></div>
</body>
</html>
thanks
Developer Shed Advertisers and Affiliates
