Log in

View Full Version : 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 :rolleyes: )

<!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 :confused:

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:


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


<!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 :rolleyes: 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 :p

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

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 (http://home.comcast.net/~jscheuer1/side/iframe_astral_h.htm) 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:


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

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


.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.
astralrose
05-11-2006, 04:47 PM
I am using IE 6.0 :) When I checked using your link the frame was at the bottom still :confused:

Is there a new IE again???:rolleyes: Anyhow I would still need it to work in IE 6.0.....maybe my computer is bust *lol* (my stock reply for everything)


Ill need placement advice on the last bit of code ;)
jscheuer1
05-11-2006, 07:00 PM
Geez, this is so stupid (on my part). I recently got a new computer, nice wide screen. Anyways, at any viewport under 1226px inner width in IE6, it does break down. I've figure out why and fixed that plus included the addition I mentioned before (I've also uploaded it, don't forget to refresh if it still acts badly):


<!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;
}

#floatframe iframe {
margin:0;
}

.stretch {
clear:both;
}

</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 class="stretch"></div>
</div>


</body>
</html>
astralrose
05-11-2006, 07:57 PM
Yesss! *does a little dance* Cheers John you superstar! :) Its working fabby! Thanks for the time you have spent on this, it is very much appreciated