?
Solved

Iframe within a table spacing

Posted on 2013-01-14
7
Medium Priority
?
285 Views
Last Modified: 2013-01-14
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

0
Comment
Question by:Dalexan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38775591
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
 

Author Comment

by:Dalexan
ID: 38775604
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38775764
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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

Author Comment

by:Dalexan
ID: 38775833
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38775971
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
 

Author Comment

by:Dalexan
ID: 38776031
Yes, thats my issue I need it much smaller, jammed up very close to each other. Any idea's?
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 38776061
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

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question