image overlay styling problem

Hi,

I originally thought this was a .js problem, but I think it is a styling problem. Please see URL (in either Firefox or IE, late versions): [url]http://www.backstageweb.net/spca2/index.html[/url].

The .js image layover on the 3-block main events (5th anniversary, spay/neuter, 5K) directly below the navbar renders perfectly in FF and IE, but does not render or function correctly at all in Safari, Chrome, or Opera. I may be wrong, but it seems to me if this was a .js problem, it wouldn’t work in any browser (let alone IE). The script came from here:

[url]http://www.ferretarmy.com/files/jQuery/ImageOverlay/ImageOverlay.html[/url] – which works in all browsers.

and here is the .css in question:

[CODE]#featured {
width:1060px;
height:260px;
background-color:#d8d6d6;
overflow:hidden;
border:3px solid #c3de90;
}

#mainevent1 {
float:left;
margin:10px 0 10px 10px;
}

#mainevent2 {
float:left;
margin:10px 0 10px 10px;
}

#mainevent3 {
float:left;
margin:10px 0 10px 10px;
}

a img {
border:none;
outline:none;
}

.ic_container {
vertical-align:baseline;
margin:10px;
position:relative;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-box-shadow: 0 1px 3px #888;
-webkit-box-shadow: 0 1px 3px #888;*/
}

.ic_caption {
position:absolute;
opacity:0.85;
overflow:hidden;
margin:0px;
padding:0px;
left:0px;
right:0px;
cursor:pointer;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}

.ic_caption h3 {
font-family:Arial, Helvetica, sans-serif;
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
color:#e5f5b4;
}

.me {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#fff;
text-indent: 0;
margin: 10px;
font-size: .8em;
}[/CODE]

any help much appreciated!

John

Also in #CSS _↴