• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1947
  • Last Modified:

How do I create a space between two consecutive iframe pages.

Hello out there,

I have code that puts two iframe pages next to each other both of which are contained in a tab page. Can someone tell me how to put a space (the size of which I can allocate) between the two iframe pages, please.

My code is like so:

<div class="tabBox" style="clear:both; position: absolute; left: 1px; top: 63px; width: 776px; height: 343px; background-color: #9070c0;">
  <div class="tabArea">
    <a class="tab" href="PersonForm.php" target="tabIframe2">Mortgage</a>
    <a class="tab" href="MainStatus.php" target="tabIframe2">Status</a>
    <a class="tab" href="MainSend.php" target="tabIframe2">Send</a>
    <a class="tab" href="MainReceived.php" target="tabIframe2">Received</a>
    <a class="tab" href="MainActions.php" target="tabIframe2">Actions</a>
    <a class="tab" href="MainRegistry.php" target="tabIframe2">Registry</a>
    <a class="tab" href="MainDelegate.php" target="tabIframe2">Delegate</a>
    <a class="tab" href="MainInvoice.php" target="tabIframe2">Invoice</a>
    <a class="tab" href="MainStageManagement.php" target="tabIframe2">Stage Management</a>
  </div>
  <div class="tabMain">
        <div><iframe name="tabIframe2" src="PersonForm.php" style="height: 338px; width: 373px; background-color: #9070c0;"><iframe name="tabIframe2" src="PersonForm.php" style="height: 338px; width: 373px; background-color: #9070c0;"></iframe></div>
  </div>
</div>


I realize this is likely a simple question...

Thanks in advance for your usual collective excellent asssistance.

wb
0
winbiz
Asked:
winbiz
  • 3
  • 3
  • 2
  • +3
1 Solution
 
ZylochCommented:
Hi winbiz,

In the second iframe, add this to style:

margin:0px 0px 0px 50px;

where 50 is replaced by what you want.

Likewise, you can try putting &nbsp; between the iframes.

Regards,
Zyloch
0
 
GrandSchtroumpfCommented:
margins don't work on iframes for some reason...
i think the best way to do it is to use a span and set a padding on the span:

    <div>
      <span style="padding-right:50px;"><iframe name="tabIframe1" src="about:blank" style="height: 300px; width: 373px;"></iframe></span><iframe name="tabIframe2" src="about:blank" style="height: 300px; width: 373px;"></iframe>
    </div>
0
 
patbinCommented:

<html>
<head>
  <style type="text/css">
  body {background: #C7C5C5; color: #000000;
  font-size: 50px; font-weight: bold;}
  </style>
</head>
<body>
<div class="tabBox" style="CLEAR: both; LEFT: 1px; WIDTH: 776px; POSITION: absolute; TOP: 63px; HEIGHT: 343px; BACKGROUND-COLOR: #9070c0">
  <div class="tabArea">
    <A class=tab href="PersonForm.php" target=tabIframe2>Mortgage</a>
    <A class=tab href="MainStatus.php" target=tabIframe2>Status</a>
    <A class=tab href="MainSend.php" target=tabIframe2>Send</a>
    <A class=tab href="MainReceived.php" target=tabIframe2>Received</a>
    <A class=tab href="MainActions.php" target=tabIframe2>Actions</a>
    <A class=tab href="MainRegistry.php" target=tabIframe2>Registry</a>
    <A class=tab href="MainDelegate.php" target=tabIframe2>Delegate</a>
    <A class=tab href="MainInvoice.php" target=tabIframe2>Invoice</a>
    <A class=tab href="MainStageManagement.php" target=tabIframe2>Stage Management</a>
  </div>
  <div class="tabMain">
 <div>
<span style="padding-down:150px;"><iframe name="tabIframe1" src="about:blank" style="height: 300px; width: 373px;"></iframe></span>
&nbsp
<iframe name="tabIframe2" src="about:blank" style="height: 300px; width: 373px;"></iframe>
</div>

</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
seanpowellCommented:
Hi winbiz,

zyloch's code is the way to go here:
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21422828.html#13992672

margin:0px 0px 0px 50px;

patbin,
The span and &nbsp; have already been suggested - please only post if you have something new to add to the thread.
(Also, there is no such attribute as padding-down.)

Sean
0
 
COBOLdinosaurCommented:
This gets interesting from a standards compliant standpoint. Margin is valid for current standrds and putting the iframe in a container with padding is also valid.

What I don't see posted is the backward compatible method of using marginwidth attribute of the iframe tag.  That is compliant ot XHTML1, and all the HTML standards back to the introduction of the iframe tag.  backward compatibility gives consistent rendering for all IE browsers fro IE 3 through to IE 6.  There is no issue for forward compatibility s iframe has been dropped from both the worthless XHTML1.1 and the first real advance in standards with XHTML2.

My preference is of course to use margin, but if the page is using HTML transitional or lower compliance then better cross-browser support probably come with the older marginwidth.

Cd&
0
 
patbinCommented:
sorry seanpowell , i had not seen the above comment posted by zyloch i had just given my solution
0
 
seanpowellCommented:
>>the backward compatible method of using marginwidth attribute of the iframe tag

It's a good point - just one that I seldom use. It's like the old hspace and vspace tags. Getting a space of 50 between the frames means autmatically getting a space of 25 on each side of them. The limitations of those tags always frustrated me and hence why I prefer the css margin element.

Sean
0
 
seanpowellCommented:
In case that didn't make sense...

http://www.pdgmedia.com/ee/iframe.gif

Sean
0
 
COBOLdinosaurCommented:
I doubt I would use anything but CSS margin, but the PAQ is more complete if we include all the valid options.

Cd&
0
 
COBOLdinosaurCommented:
I think it would be a good Idea if we build exploration threads in HTML similar to what we have in CSS.  When XHTML2 finally hits the streets there are going to be a lot of "best practice" and compliance issues impact HTML, and improving our reference base ahead of the coming storm makes sense to me.

Cd&
0
 
winbizAuthor Commented:
Thank you everyong for this comprehensive discussion.

I kept trying the solution to no avail, until I set the the second iframe to position: relative, then it worked nicely.

Many thanks once again.

Regards,

wb
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 3
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now