asked on

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

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GrandSchtroumpf

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>

patbin

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

seanpowell

Hi winbiz,

zyloch's code is the way to go here:
https://www.experts-exchange.com/questions/21422828/How-do-I-create-a-space-between-two-consecutive-iframe-pages.html#13992672

margin:0px 0px 0px 50px;

patbin,
The span and   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

COBOLdinosaur

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&

patbin

sorry seanpowell , i had not seen the above comment posted by zyloch i had just given my solution

seanpowell

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

seanpowell

In case that didn't make sense...

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

Sean

COBOLdinosaur

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

Cd&

COBOLdinosaur

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&

winbiz

ASKER

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