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): http://www.backstageweb.net/spca2/index.html.

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:

http://www.ferretarmy.com/files/jQue...geOverlay.html - 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;
    }
any help much appreciated!

John