Solved

Iframe within a table spacing

Posted on 2013-01-14
7
271 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
  • 4
  • 3
7 Comments
 
LVL 83

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 83

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 83

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 83

Accepted Solution

by:
Dave Baldwin earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
I need help embedding an image as HTML in my vb.net application 3 45
Message not shown 5 27
Objects on Same Line 2 16
Bad <form> statement? 9 20
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

930 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now