[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Iframe within a table spacing

Posted on 2013-01-14
7
Medium Priority
?
289 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 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

830 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