overlapping issues

Hey, Im having a few issues with overlapping...

Question 1

I have this search bar:

<div id="topOptions" align="center" style="z-index:3; position:absolute; top:102px; left:166px; width:671px;">

<table border ="0" width="100%" bgcolor="white" style="z-index:0;">
<tr>
<td rowspan="2">&nbsp;</td>
<td width = "700" align="center">
<form>
<input type="text" id="txt1" />
<input type="button" style="background-color:07328E; color:white;" onClick="javascript:gotoo();" value="Go!"/>
</form>
</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>

Which is overlapping this:

<center>
<span id="spa"><iframe name="viewer" id="viewer" src="webname" width="65%" height="75%" style="position: absolute; left:173; top:150; right:180; bottom:0 z-index: 1;";></iframe></span>
</center>

I actually want to swap the two around, so the 'viewer' overlaps the search bar....

Question 2

I have a flash file embedded which is overlapping a javascript menu...I need it to work in Firefox. Is there a way of fixing this?

Any help here would be really appreciated

Rob