IFRAME Destroying Bottom of page

[colin.steadman]

I'm trying to setup a small site with a few pages for a friend who runs
a karate club. To keep things simple the idea is to have a number of
very simple text pages he can open in notepad and update as he wishes.
These simple pages will then be displayed within an IFRAME when a link
button is clicked by changing the IFRAME's SRC attribute with
javascript.

To control layout I'm using a table. However when I add the IFRAME to
the table it completely messes things up below.

This link shows what the site should look like, I've commented out the
IFRAME to do this (require IE until I've found an alternative to
getElementById):
http://www.colinsteadman.com/karate/test.htm

And this is what happens when the IFRAME is turned back on:
http://www.colinsteadman.com/karate/testframe.htm

Could anyone tell me what the IFRAME is doing to mess things up, as I
expected it to simply fill its table cell and nothing else. And after
hours of changing things I cant seem to fix it.

TIA,

Colin

 

[Steve Pugh]

I'm trying to setup a small site with a few pages for a friend who runs
a karate club. To keep things simple the idea is to have a number of
very simple text pages he can open in notepad and update as he wishes.
These simple pages will then be displayed within an IFRAME when a link
button is clicked

At the moment you have them change when the link is moused over.

by changing the IFRAME's SRC attribute with javascript.

And when JavaScript isn't enabled? Why not just make them ordinary
links? Less work for you, less chance of something going wrong, works
for all users.

To control layout I'm using a table.

Oh dear.

However when I add the IFRAME to
the table it completely messes things up below.

This link shows what the site should look like, I've commented out the
IFRAME to do this (require IE until I've found an alternative to
getElementById):

Huh? document.getElementById(id) is the standards compliant
alternative to the IE document.all.id

What antique browser are you using that doesn't support getElementById
(assuming JavaScript is enabled of course)?

The reason why your code might not work in some browsers is that you
say document.getElementById('frame1').src='about.html' but your iframe
doesn't have an id. It's only IE's (and Opera's it seems) generous
error correction that maps the iframe's name attribute to the missing
id.

http://www.colinsteadman.com/karate/test.htm

Six validation errors -
http://validator.w3.org/check?uri=http://www.colinsteadman.com/karate/test.htm

And this is what happens when the IFRAME is turned back on:
http://www.colinsteadman.com/karate/testframe.htm

Ditto -
http://validator.w3.org/check?uri=http://www.colinsteadman.com/karate/testframe.htm

Could anyone tell me what the IFRAME is doing to mess things up, as I
expected it to simply fill its table cell and nothing else. And after
hours of changing things I cant seem to fix it.

Iframe is not an empty element. It needs (a) some content for when the
iframe is not displayed and (b) a closing tag.

<iframe name=frame1 marginwidth=1 marginheight=1 src="home.html"
frameborder=0 width="100%" scrolling=no>

<!-- BODY END ---------------------------------------------->
</td>
</tr>
<tr>
<td height="10%" align=center valign=middle>footer</td>
</tr>
</table>


</body>
</html>

Ignoring the malformed comment this the same as saying

<iframe name=frame1 marginwidth=1 marginheight=1 src="home.html"
frameborder=0 width="100%" scrolling=no>
<!-- here's some content for when the iframe can not be displayed -->
</td>
</tr>
<tr>
<td height="10%" align=center valign=middle>footer</td>
</tr>
</table>
</body>
</html>
<!-- end of fallback content -->
</iframe>
</body>
</html>

Which is exactly what the browsers display.

Steve

 

[colin.steadman]

Hi Steve,

Thanks for taking the time to reply, your comments were very helpful!

As you've probably guessed I'm not a professional web developer. I'm
attempting to setup this site to help out a mate, and hopefully learn
something. I have an understanding of how HTML works, but I lack
knowledge and experience.

I think I'm probably going to take your advice and ditch the javascript
and replace it with proper links. The javascript thing was an
experiment, and I think the idea was basically sound. I was attempting
to use one page to display whatever content was requested. This should
mean that all the pages are guaranteed to look the same as they would
all be using the same layout. If I use discreet pages for each link,
I'll have to change them all if I decide to make a change to any one of
them. Thats more work isn't it?

It appears you dont approve of using a table for layout. I keep
reading the CSS is the proper tool for setting out page layouts. But I
just cant picture how it works. Formatting stuff with CSS makes bags
of sense, but I've yet to see the light on using it for putting things
where I want them. I'm going to have to take some time to go through
it and get my head around it. Tables are just easier to understand and
manipulate.

Cheers,

Colin

 

[Jonathan N. Little]

Hi Steve,

Thanks for taking the time to reply, your comments were very helpful!

As you've probably guessed I'm not a professional web developer. I'm
attempting to setup this site to help out a mate, and hopefully learn
something. I have an understanding of how HTML works, but I lack
knowledge and experience.

I think I'm probably going to take your advice and ditch the javascript
and replace it with proper links. The javascript thing was an
experiment, and I think the idea was basically sound. I was attempting
to use one page to display whatever content was requested. This should
mean that all the pages are guaranteed to look the same as they would
all be using the same layout. If I use discreet pages for each link,
I'll have to change them all if I decide to make a change to any one of
them. Thats more work isn't it?

What would be far superior then the iframe, javascript and all is if you
server supports PHP, and many do. Just do the page in PHP and have it
inset the text file with an include...

news.php:


<html>
<head><title>karate club news</title></head>
<body>
<h1>What's happening at the karate club</h1>
<pre>
<?php
include_once('news.txt');
?>
<p>Rest of page</p>
</body></html>

then all you buddy has to do is edit the 'news.txt', no iframes,
javascript, or html experience on you buddy's part need.