Iframe help please

**astralrose** · 05-08-2006, 06:37 PM

Hi

Not been here for awhile! *lol*

I am having a bit of Iframe grief, I normally try to avoid them!

I want to have 3 Iframes side by side and while I can position then in IE I am having firefox trouble. I had this awhile back and have now trying again but to no avail.

The coding is pretty crude so far but this is what I have started with (I have been using an online tutorial which I think is a little out of date

)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
iframe
#floatframe {
position:absolute;
left:225px;
top:0px;
width:150px;
height:200px;
z-index:100;}
</style>
</head>

<body>
<div id="floatframe">
<iframe width=20% height=60% src="xxx.htm" align=left frameborder=0 hspace=10%
vspace=0 scrolling=auto name=norman></iframe>
</div>

<div id="floatframe">
<iframe width=50% height=60% src="xxx.htm" align=left frameborder=0 hspace=30%
vspace=0 scrolling=auto name=lovett></iframe>

<div id="floatframe">
<iframe width=20% height=60% src="xxxx.htm" align=right frameborder=0 hspace=10%
vspace=0 scrolling=auto name=lovett></iframe>
</div>

</body>
</html>

Any help or pointers to an up to date tutorial would be muchly received!

Donna

**djr33** · 05-08-2006, 08:04 PM

<title>Untitled Document</title>
Give your page a title!

I *think* this is the issue:
<style type="text/css">
iframe
#floatframe {

I don't think you need "iframe"... replace with:
<style type="text/css">
#floatframe {

And see if that helps you.

**astralrose** · 05-09-2006, 08:20 PM

<title>Untitled Document</title>
Give your page a title!

I have not got that far yet I did say it was a quick mock up

I *think* this is the issue:
<style type="text/css">
iframe
#floatframe {

I don't think you need "iframe"... replace with:
<style type="text/css">
#floatframe {

And see if that helps you.

I have tried that but to no avail

John (jscheuer1) did help me with a problem similar way back when but I forget how he did it and I am unable to find the page

Thanks for the reply anyway

**jscheuer1** · 05-10-2006, 06:45 AM

Hi astralrose! How have you been? I'm fine, thanks. Um, I'm not really sure what you are shooting for but, I'm guessing three iframes in a row that are evenly spaced out with two of them on each side with the other one centered. Try this out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#floatframe {
text-align:center;
width:90%;
height:500px;
margin:0 auto;
}

</style>
</head>

<body>
<div id="floatframe">
<iframe  style="float:left";" width="20%" height="60%" src="about:blank" frameborder="1" hspace="10%"
vspace="0" scrolling="auto" name="norman"></iframe>

<iframe  style="float:right;" width="20%" height="60%" src="about:blank"frameborder="1" hspace="10%"
vspace="0" scrolling="auto" name="lovett"></iframe>


<iframe width="50%" height="60%" src="about:blank" frameborder="1" hspace="30%"
vspace="0" scrolling="auto" name="lovett"></iframe>


</div>


</body>
</html>

Notes: You probably want a unique name for each iframe, instead of having two named "lovett", but I do.

How about making one of them bob?

There is now only one division, it is statically positioned (normal flow of the page). Its dimensions can be adjusted in the style section and are what the iframes' % dimensions of width and height work off of. I added borders and made the src attributes "about:blank" for demo purposes only. The strict DOCTYPE is required to put IE into 'almost standards' mode. But you can also use this one instead:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

If it makes coding the rest of the page easier. The one I used is the best for having things look mostly the same in IE and FF.

Just don't use the one from your post, it is too loose.

**astralrose** · 05-10-2006, 07:44 PM

Hi John, cheers, I am superduper fine thankyou

I did say the coding was crude

its been awhile since I have attempted anything html and my brain has gone to mush. I think I was a bit guilty of cut and paste on the last frame

You are a star and its looks fab in firefox however in IE the center frame is much lower (bottom of page ) than the other frames?

Donna

**jscheuer1** · 05-10-2006, 07:51 PM

That is what happened here when I used your DOCTYPE. Both of the DOCTYPES I recommended worked fine, however they do have links to the standards. Perhaps, if you are offline and do not have these cached, that could be a problem.

**jscheuer1** · 05-10-2006, 07:56 PM

I just checked and going offline and clearing the cache didn't cause a problem here. Are you sure you copied and pasted my example (using a text editor) exactly as is and as the entire page, no more and no less?

**astralrose** · 05-10-2006, 08:08 PM

Yup, yup.....and then re-done it to make sure just now and the middle frame is at the bottom whilst the ones either side are sitting up the top. Fine in firefox though

Cleared cache also very confuzzled now

**astralrose** · 05-10-2006, 08:12 PM

also changed the DOCTYPE to the second one you gave me , nope sorry

**jscheuer1** · 05-10-2006, 09:26 PM

Hmm, demo time perhaps. Also, what version of IE are you using? And, sorry I was rushing out the door when I responded to your last post so forgot to mention I'm

you are superduper fine. Let's see, how's this look in IE for you?

BTW, once we get this sorted out, in FF and other browsers, it would probably help in a more involved layout to use:

HTML Code:

<div class="stretch"></div>

as the last thing in the container division, with its style set in the head as:

Code:

.stretch {
clear:both;
}

But, let's not worry about that just yet. I just don't want you wandering off before I get to it. In FF and others (not IE) it will keep the container set to the height required if the iframes vary in height.

Thread: Iframe help please

Thread Tools

Search Thread

Iframe help please

Bookmarks

Bookmarks

Posting Permissions