Posted by Steve Pugh on 05/20/06 13:36

"colin.steadman@gmail.com" <colin.steadman@gmail.com> wrote:

>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%3A%2F%2Fwww.colinsteadman.com%2Fkarate%2Ftest.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%3A%2F%2Fwww.colinsteadman.com%2Fkarate%2Ftestframe.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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

[Back to original message]