CSS Collapsing IFrames

[nottawayblue]

I'm trying to make a collapsable iframe - appears when the <a class="inlaid"> LINK is clicked, closes when the user clicks outside the div. I have this working almost beautifully: the iframe and other text appear when the link is clicked but close when user clicks w/in the iframe (but not anywhere else in the div). Any suggestions on how to prevent the collapse when the iframe is clicked?

CSS:

.dashboard {
	background: 888;
	width:100%;
	margin:0 auto;
	padding:5px;
	border:1px solid #008; 
	min-height: 10px;
	text-align: left;
}

a.inlaid {
	color:#FFF;
	text-decoration:none;
	outline-style:none;
}

a.inlaid em {
	display:none;
}

a.inlaid:active, a.inlaid:focus {}

a.inlaid:active span, a.inlaid:focus span {
	display:block;
	background: #888888;
	color: #FFF;
	
}

a.inlaid:active em, a.inlaid:focus em {
	display:block; 
	cursor:default;
	height: 410px;
	width: 100%;
}

HTML Body:

<div class="dashboard">
<p>
<a class="inlaid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false">
<span>Red/Yellow/Green Weather Dashboard</span>
<em>
<IFRAME SRC="other.html" height="400" width="100%"></IFRAME>
</em>
</a>
</p>
   
</div> <!-- end of dashboard -->
<br>
Bottom Text

Thanks!!!!

[Death Slaught]

I don't think your problem is with your HTML or CSS. Please ask in our JavaScript forum.

(\_/)
(' . ')
(")(") , Death