Iframe within a table spacing

I have 3 iframe's that are within a table, I want the spacing to be together as close as possible  aligned vertically. Here's the html that contains the iframes within a table.
The html appears to be displayed double spaced when viewed in a browser.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Replication Status</title>
  </head>

  <body link="" vlink="" alink="" bgcolor="#DDDDDD" text="#000000" background="" onload="startTime()">
    <table>
      <tr>
        <td nowrap>
          <iframe height="40" width="390" src="/html/testing/x7.html" frameborder="0" id="frm7" name="frm7" seamless="seamless"></iframe>
          <iframe height="40" width="390" src="/html/testing/x8.html" frameborder="0" id="frm8" name="frm8" seamless="seamless"></iframe>
          <iframe height="40" width="390" src="/html/testing/x9.html" frameborder="0" id="frm9" name="frm9" seamless="seamless"></iframe>
        </td>
      </tr>
    </table>
    <hr>
    <script language="javascript" type="text/javascript">
      function reloadIFrame()
      {
        document.getElementById("frm7").contentDocument.location.reload(true);
        document.getElementById("frm8").contentDocument.location.reload(true);
        document.getElementById("frm9").contentDocument.location.reload(true);
      }
      window.setInterval("reloadIFrame();",3000);
    </script>

Open in new window

and here's what the x7.html looks like, x8 & x9 look the same as x7.
  </body>
</html>


251  <font size="1">
             Slave_IO_Running: Yes
            Slave_SQL_Running: Yes
        Seconds_Behind_Master: 0
</font>

Open in new window

DalexanAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Not at this point.  I'm not sure you can get what you want with an iframe.  If you use AJAX to fetch the updated content, then you can put it as plain text in the cells or a 'div'.  That avoids any default margins or spacing with an <iframe>.
0
 
Dave BaldwinFixer of ProblemsCommented:
If you're going to used abbreviated HTML instead of a complete page, you should probably not use the </body> and </html> tags.

251  <font size="1">
             Slave_IO_Running: Yes
            Slave_SQL_Running: Yes
        Seconds_Behind_Master: 0
</font>

Open in new window

0
 
DalexanAuthor Commented:
Oops, on the x7.html the </body> and </html> tags should not be there. I posted that incorrectly those should go with the main html.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Dave BaldwinFixer of ProblemsCommented:
Do you have the XHTML DOCTYPE at the top of the page also?  All browsers need that to interpret your page correctly and consistently and IE needs it to be the very first thing on the page.  Using your code from above, the 'iframes' are lined up horizontally, not vertically.  You must have some other things on that page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Replication Status</title>
  </head>

  <body link="" vlink="" alink="" bgcolor="#DDDDDD" text="#000000" background="" onload="startTime()">
    <table>
      <tr>
        <td nowrap>
          <iframe height="40" width="390" src="x7.html" frameborder="0" id="frm7" name="frm7" seamless="seamless"></iframe>
          <iframe height="40" width="390" src="x8.html" frameborder="0" id="frm8" name="frm8" seamless="seamless"></iframe>
          <iframe height="40" width="390" src="x9.html" frameborder="0" id="frm9" name="frm9" seamless="seamless"></iframe>
        </td>
      </tr>
    </table>
    <hr>
    <script language="javascript" type="text/javascript">
      function reloadIFrame()
      {
        document.getElementById("frm7").contentDocument.location.reload(true);
        document.getElementById("frm8").contentDocument.location.reload(true);
        document.getElementById("frm9").contentDocument.location.reload(true);
      }
      window.setInterval("reloadIFrame();",3000);
    </script>
</body>
</html>

Open in new window

0
 
DalexanAuthor Commented:
Yes XHTML DOCTYPE is at the top as well.
I tried making some changes by putting in styles but that didnt work as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Replication Status</title>
  </head>

  <body link="" vlink="" alink="" bgcolor="#DDDDDD" text="#000000" background="" onload="startTime()">
    <table>
      <tr>
        <td style="font-size:8pt;" nowrap>
          <iframe width="390" src="/html/testing/x7.html" frameborder="0" id="frm7" name="frm7" seamless="seamless"></iframe>
        </td>
      </tr>
      <tr>
        <td style="font-size:8pt;" nowrap>
          <iframe width="390" src="/html/testing/x8.html" frameborder="0" id="frm8" name="frm8" seamless="seamless"></iframe>
        </td>
      </tr>
      <tr>
        <td style="font-size:8pt;" nowrap>
          <iframe width="390" src="/html/testing/x9.html" frameborder="0" id="frm9" name="frm9" seamless="seamless"></iframe>
        </td>
      </tr>
    </table>
    <hr>
    <script language="javascript" type="text/javascript">
      function reloadIFrame()
      {
        document.getElementById("frm7").contentDocument.location.reload(true);
        document.getElementById("frm8").contentDocument.location.reload(true);
        document.getElementById("frm9").contentDocument.location.reload(true);
      }
      window.setInterval("reloadIFrame();",3000);
    </script>

  </body>
</html>

Open in new window


Attached is a screenshot of what I see
replicationstatus.doc
0
 
Dave BaldwinFixer of ProblemsCommented:
Adding a 'height' to the <iframe>s and specifying the padding and spacing on the table cells reduced it as much I could.  <iframe>s seem to have a default minimum size that I couldn't overirde.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Replication Status</title>
  </head>

  <body link="" vlink="" alink="" bgcolor="#DDDDDD" text="#000000" background="" onload="startTime()">
    <table border="0" cellpadding="0" cellspacing="0" summary="">
      <tr>
      	<td style="font-size:8pt;" nowrap>
					<iframe width="390" height="40" src="x7.html" frameborder="0" id="frm7" name="frm7" seamless="seamless"></iframe>
				</td>
      </tr>
      <tr>
        <td style="font-size:8pt;" nowrap>
          <iframe width="390" height="40" src="x8.html" frameborder="0" id="frm8" name="frm8" seamless="seamless"></iframe>
        </td>
      </tr>
      <tr>
        <td style="font-size:8pt;" nowrap>
          <iframe width="390" height="40" src="x9.html" frameborder="0" id="frm9" name="frm9" seamless="seamless"></iframe>
        </td>
      </tr>
    </table>
    <hr>
    <script language="javascript" type="text/javascript">
      function reloadIFrame()
      {
        document.getElementById("frm7").contentDocument.location.reload(true);
        document.getElementById("frm8").contentDocument.location.reload(true);
        document.getElementById("frm9").contentDocument.location.reload(true);
      }
      window.setInterval("reloadIFrame();",3000);
    </script>

  </body>
</html>

Open in new window

0
 
DalexanAuthor Commented:
Yes, thats my issue I need it much smaller, jammed up very close to each other. Any idea's?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.