Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Iframe within a table spacing

Posted on 2013-01-14
7
Medium Priority
?
287 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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 blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

636 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