 <p>I'm not sure this is what your asking but you can't show anything on top of an iframe I don't think, definitely not cross browser. But I doubt you need to.</p> <p>Now first off, your HTML seems improper because you open a <code>&lt;div class="ddoverlap"&gt;</code>, then a <code>&lt;table&gt;</code>, then <em>another</em> <code>&lt;table&gt;</code> which contains the links. You close that <strong>2nd</strong> <code>&lt;table&gt;</code> and then try to close the <code>&lt;div&gt;</code> while your still inside of the <strong>1st</strong> <code>&lt;table&gt;</code>:</p> <pre><code>&lt;div class="ddoverlap"&gt; &lt;!-- 1st table --&gt; &lt;table align="center" cellpadding="0" class="CAATDashboardTable" cellspacing="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" style="width: 100%"&gt; &lt;tr&gt; &lt;td style="height: 65px; width: 100%;"&gt; &lt;!--BELOW TABLE CONTAINS THE TOP BORDER LINKS--&gt; &lt;table style="width: 100%" align="center"&gt;&lt;tr&gt; &lt;!-- 2nd table! --&gt; &lt;!-- (content omitted to uncover document structure) --&gt; &lt;/td&gt;&lt;/tr&gt; &lt;!-- (also this &lt;/td&gt; is double) --&gt; &lt;/table&gt; &lt;!-- closing 2nd table --&gt; &lt;!-- Not closing 1st table --&gt; &lt;/div&gt; </code></pre> <p>So advice to you would be to recheck your HTML first of all. Then you have a couple of options. The simplest is to continue using a <code>&lt;table&gt;</code> for mark-up. This is considered a bad habit nowadays, but so is using <code>&lt;iframe&gt;</code> and you're probably stuck with that.</p> <p>When using <code>&lt;table&gt;</code> for mark-up, make it 1 big table that stretches across the available screenspace and put the <code>&lt;iframe&gt;</code> inside. This way the <code>&lt;iframe&gt;</code> will simply stretch to the size of the <code>&lt;td&gt;</code> it's inside. So a rough doc structure would be:</p> <pre><code>&lt;table style="width:100%;height:100%;"&gt; &lt;tr&gt; &lt;!-- the &lt;td&gt;s with the links, I've counted, both top and bottom are 10 --&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="10" style="width:100%;height:100%"&gt; &lt;iframe name="target1" width="100%" height="100%" src="#" frameborder="0"&gt;&lt;/iframe&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;!-- the &lt;td&gt;s with the links, again 10 --&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Notice the <code>colspan="10"</code> to have the <code>&lt;td&gt;</code> with the <code>&lt;iframe&gt;</code> stretch the width of the 10 cells in the top and bottom.</p> <p><em>Edit:</em> A non-table way of doing this would be with <code>&lt;div&gt;</code> and <code>CSS</code>. With different numbers of buttons at the top and bottom, it might be something like this:</p> <pre><code>&lt;head&gt; &lt;style type="text/css"&gt; #topbar, #bottombar { position:absolute; width:100%; height:1.2em; } #topbar { top:0; } #bottombar { bottom:0; } iframe { position:absolute; top:1.2em; bottom:1.2em; width:100%; } #topbar a { display:inline-block; width:10%; /* 100/10=10 */ } #bottombar a { display:inline-block; width:9%; /* 100/11~=9 */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="topbar"&gt; &lt;a onclick="blablablayougetthepoint"&gt;Something&lt;/a&gt; &lt;!-- more links, total of 10, notice the onclick is now on the a, no more td --&gt; &lt;/div&gt; &lt;div id="bottombar"&gt; &lt;a onclick="yadayadayada"&gt;Some other thing&lt;/a&gt; &lt;!-- more links, total of 11 --&gt; &lt;/div&gt; &lt;iframe src="etc"&gt;&lt;/iframe&gt; &lt;/body&gt; </code></pre>