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

x
?
Solved

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

Posted on 2005-05-12
11
Medium Priority
?
1,622 Views
Last Modified: 2012-06-27
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
Comment
Question by:winbiz
  • 3
  • 3
  • 2
  • +3
11 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 1000 total points
ID: 13992672
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13993313
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
 
LVL 2

Expert Comment

by:patbin
ID: 13994519

<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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 31

Expert Comment

by:seanpowell
ID: 13994929
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13995269
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
 
LVL 2

Expert Comment

by:patbin
ID: 13996238
sorry seanpowell , i had not seen the above comment posted by zyloch i had just given my solution
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 13996793
>>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
 
LVL 31

Expert Comment

by:seanpowell
ID: 13996885
In case that didn't make sense...

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

Sean
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13997075
I doubt I would use anything but CSS margin, but the PAQ is more complete if we include all the valid options.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13997125
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
 

Author Comment

by:winbiz
ID: 14000079
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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

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