# Solved: 2 questions: <body onload="()"> not frameset valid? and iframe issue



## madd74 (Nov 9, 2003)

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

    DynarchMenu: an IFRAME demo

  [TABLE]
    [TR]
      [TD]
        [LIST]
          [*]
            _Links
            [LIST]
              [*]
                [URL=http://google.com]google.com[/URL]

              [*]
              [*]
                more
                [LIST]
                  [*][URL=http://yahoo.com]yahoo[/URL]
                  [*]
                  [*][URL=http://www.msn.com/]MSN[/URL]
                  [*][URL=http://www.madd74.com]Cool Web Site[/URL]
                [/LIST]

              [*]
                [URL=http://amazon.com]Amazon[/URL]

              [*]
                Even more menu
                [LIST]
                  [*][URL=http://w3.com]w3[/URL]
                  [*][URL=http://w3schools.com]w3 school[/URL]
                [/LIST]

            [/LIST]

          [*]_File
          [LIST]
            [*]
              _New
              [LIST]
                [*]_Window
                [*]
                [*]_Message
                [*]_Post
                [*]_Contact
                [*]_Internet Call
              [/LIST]

            [*]_Open...
            [*]_Save
            [*]Save _As...
            [*]
            [*]Page set_up
            [*]_Print
            [*]Print Pre_view
            [*]
            [*]
              S_end
              [LIST]
                [*]_Page by Email...
                [*]_Link by Email...
                [*]_Shortcut to Desktop
              [/LIST]

            [*]_Import and Export...
            [*]
            [*]P_roperties
            [*]_Work offline
            [*]_Close
          [/LIST]

        [/LIST]
      [/TD]
    [/TR]
    [TR]
      [TD]

[B][SIZE=15]I would love validation![/SIZE][/B]

          It would make me happy!

[B][SIZE=14]It does not work[/SIZE][/B]

          Very much so, thanks.  Also, when !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd" is used, fullpage-content ends up shrunk.

      [/TD]
      [TD]
        [URL=index.html]index.html[/URL]
      [/TD]
    [/TR]
    [TR]
      [TD]
        [URL=http://www.dynarch.com/products/dhtml-menu/]DynarchMenu[/URL]
      [/TD]
    [/TR]
  [/TABLE]
```
I have two issues with this code. First, is onload only valid in strict? I get the following error on validation:



> Line 44, Column 23: document type does not allow element "BODY" here.
> 
> ✉
> 
> ...


The second thing, my frame gets messed up when I keep the (!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd") at the beginning. If I remove it, then the frame looks perfectly fine (per screen shots).

Looking for some input, thanks!


----------



## tomdkat (May 6, 2006)

Why are you specifying a frameset DOCTYPE? Here is a comment from the DTD of the frameset DOCTYPE:


> This is the HTML 4.01 Frameset DTD, which should be
> used for documents with frames. This DTD is identical
> to the HTML 4.01 Transitional DTD except for the
> content model of the "HTML" element: in frameset
> ...


I don't see any HTML frames in your document so I'm not sure why you're wanting to use a frameset DOCTYPE. You don't need a frameset DOCTYPE to use iframes.

Also, does your JavaScript error go away when you remove the DOCTYPE? You can read this about DOCTYPEs. Try switching to an HTML 4 strict or transitional DOCTYPE and see how things work and validate.

Peace...


----------



## madd74 (Nov 9, 2003)

I thought that transitional did not allow the target, so, I probably misread somewhere, and that would explain the reason it is not working, and why you are kind enough to point this out to me to fix it, the reason I posted my post 

hehehe

seriously, though, thank you for the input. I wanted to do strict, however, in doing so I would have to use a lot more code to make the target for the menu work (something I know can be done, as I have done it on my http://madd74.com/bb/ at one time for my chat I use to have, using javascript).

I was thinking frameset would include iframes, the answer to your question. I will do the code change and see what I get, thanks again!


----------



## tomdkat (May 6, 2006)

madd74 said:


> I wanted to do strict, however, in doing so I would have to use a lot more code to make the target for the menu work (something I know can be done, as I have done it on my http://madd74.com/bb/ at one time for my chat I use to have, using javascript).


I'm not sure I follow. Are you wanting to have a navigation menu load link targets into an iframe or something? We did something like that on this forum, right here.

Also, your DOCTYPE isn't something you choose "willy nilly".  You should decide the kind of HTML document you want or need to create and use a DOCTYPE that reflects that document type so the browser will know how to best render the page. 

Peace...


----------



## madd74 (Nov 9, 2003)

Yeah, I am doing it that way. A preview of what the main one will look like is at http://madd74.com/maddframe.html (note that IE does not show the menu, but firefox does, something I am working to fix, as I am sure I mistagged something)

I like to validate all of my pages now for the exact reason of browsers knowing what it is they are looking at, and while I do most of my coding now in strict, for my main page I decided (for now) to just go a little more loose, so I can use the target. I am proud I took my original code from 133 errors down to 9  My forums at http://madd74.com/bb are coded in strict (which of course, is large in part thanks to the people at phpbb, but I did put in some specializations that also required some tuning to follow the strict DOCTYPE). I am on break and working on the traditional set now...

**** MY FINDINGS ****

Well, this is, strange, as I did


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
```
and I get one error, making me wonder if onload is not supported then:



> Line 131, Column 23: there is no attribute "ONLOAD".
> 
> onload="initFrame(this)"
> 
> ...


The reason I think it strange (and you may not, keep in mind I started really getting into validation about 6 months ago) is that it means the onload is now working for the (body onload=) but is not doing it for the iframe onload. Also, I am getting the same problem with the iframe (the first attachment).


----------



## tomdkat (May 6, 2006)

What if you called initFrame() in the body's onload event handler?

and then remove the onload event from the iframe.

Here is a test case that validates:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>iframe onload test</title>


  <style type="text/css">
#nav {
display: block;
width: 200px;
float: left;
}
#frame {
border-style: ridge;
border-width: 5px;
display: block;
width: 500px;
float: right;
height: 500px;
}
  </style>
  <script type="text/javascript">
function initParent() {
alert("main page has loaded!");
}
function initFrame(frame) {
frame.style.background='blue';
alert("iframe has loaded!");
}
  </script>

</head>


<body onload="initParent(); initFrame(document.getElementById('frame'));">

<div id="nav">Link 1<br>

Link 2</div>

<div id="frame"><iframe src="three-col-table.html" height="500" width="500"></iframe></div>

</body>
</html>
```
Peace...


----------



## madd74 (Nov 9, 2003)

Okay, I think we are getting somewhere  I made the code this:


```

```
and FINALLY the code is valid. I ran the code and my menu is almost working the way I want (the menu is hitting the iframe like it should). However, I am still stuck on the fullpage-content CSS as shown in the attachment I originally put in. Anything associated with the style would not have the ID fullpage-content at a 30% or anything. In fact, the only reference I see is


```

```
The linked CSS file does not have fullpage-content in it anywhere, and when I remove the DOCTYPE then the iframe displays normal.

For testing purposes, I have the following


http://madd74.com/validate-bad.html (is validated, but shows up bad)
http://madd74.com/validate-good.html (does not have DOCTYPE, but shows up the way meant)


----------



## tomdkat (May 6, 2006)

madd74 said:


> Okay, I think we are getting somewhere  I made the code this:
> 
> 
> ```
> ...


Um, what function gets called after init()?

When you remove the DOCTYPE, the page renders in Firefox in "Quirks" mode. With the DOCTYPE in place, it renders in "Standards" mode, which is what I think you want (but that's just my opinion).

First, I noticed you're using a HTML table for the page layout. That being stated, I saw this code:

```
<td id="fullpage-body-td">
        <iframe id="fullpage-content" name="fullpage-content"
                src="http://madd74.com"
                frameBorder="0" marginHeight="20" marginWidth="20"></iframe>
      </td>
```
What if you added a vertical alignment on the table cell:

<td id="fullpage-body-td" *style="vertical-align: top;"*>

That might move the iframe to the op of the cell.

Also, what if you added width and height attributes to the iframe, I'm thinking like this:

http://madd74.com

I haven't tried either of those so I don't know what they will actually do.

Peace...


----------



## madd74 (Nov 9, 2003)

haha, that was a typo, and I fixed it. oddly enough, it makes me wonder what the function is required for, as since it was not calling the function, it still worked (making me wonder if it is for backwards multi browser functionality) so I fixed that function, thanks for the eye.

as for the other issue, I did the style 100% and there was no change at all. I added the style vertical on the td id, and it placed it all the way to the top, but the size is the same (instead of being centered). So, that is extremely strange. Going through the code, I do not see what is causing the size to shrink, preventing it from going full screen.

So your thought is correct, the vertical did move it to the top (and it all still validates as Valid HTML 4.01 Transitional). However, it is still only a few high. What is very strange, is that I changed the frameBorder="0" to ="9", and I see no border. I also removed the margin height and width, and saw no change. This would tell me that something is overriding the iframe id somehow. When I go to style and change

iframe#fullpage-content { width: 100%; height: 100%; border: 0; }

to a border: {anything}

then I get a top and side border, but the size is always the same (looks like 1).

This is really confusing me  I really thank you for all of your replies and assistance!


----------



## tomdkat (May 6, 2006)

madd74 said:


> haha, that was a typo, and I fixed it. oddly enough, it makes me wonder what the function is required for, as since it was not calling the function, it still worked (making me wonder if it is for backwards multi browser functionality) so I fixed that function, thanks for the eye.


What do you mean by "required"? Are you using someone else's HTML or JavaScript as a base?



> as for the other issue, I did the style 100% and there was no change at all. I added the style vertical on the td id, and it placed it all the way to the top, but the size is the same (instead of being centered). So, that is extremely strange. Going through the code, I do not see what is causing the size to shrink, preventing it from going full screen.


It must be the web standards being enforced. You should learn about the iframe tag here. Here is another test case for you to consider:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>iframe onload test</title>

  <style type="text/css">
#nav {
display: block;
width: 200px;
float: left;
}
#frame {
border-style: none;
border-width: 5px;
display: block;
width: 500px;
float: right;
height: 500px;
}
  </style>
  <script type="text/javascript">
function initParent() {
alert("main page has loaded!");
}
function initFrame(frame) {
frame.style.background='blue';
alert("iframe has loaded!");
}
  </script>
</head>

<body onload="initParent(); initFrame(document.getElementById('frame'));">

<table style="text-align: left; width: 100%; height: 500px;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 30%;">Link</td>
      <td style="vertical-align: top;"><iframe src="layout.html" [b]style="width: 100%; height: 500px;"[/b] id="frame"></iframe></td>
    </tr>
  </tbody>
</table>
</body>
</html>
```
Notice the width and height styling on the iframe.



> What is very strange, is that I changed the frameBorder="0" to ="9", and I see no border. I also removed the margin height and width, and saw no change. This would tell me that something is overriding the iframe id somehow.


Naw, that's not strange behavior, you're just using invalid values for the frameborder attribute. 

You will probably have to assign a height to the iframe to get it to display the way you want. You can use JavaScript to dynamically change the height of the iframe, as needed.

Peace....


----------



## MMJ (Oct 15, 2006)

At the end of the javascript code insert:


```
onload = function(){
	initParent();
	initFrame(document.getElementById('frame'));
}
```
Then remove the whole attribute from the body tag.


----------



## tomdkat (May 6, 2006)

Like this:


```
<script type="text/javascript">
function initParent() {
alert("main page has loaded!");
}
function initFrame(frame) {
frame.style.background='blue';
alert("iframe has loaded!");
}

 onload= function() {
         initParent();
         initFrame(document.getElementById('frame'));
}
  </script>
</head>

<body>
```
That will cause initParent() and initFrame() to execute after the page has completed loading? How does that work?

Peace...


----------



## madd74 (Nov 9, 2003)

tomdkat said:


> What do you mean by "required"? Are you using someone else's HTML or JavaScript as a base?


Yeah, as noted in the footer, the menu is curtsy of Dynarch (linkware javascript menu, if you would). They note:



dynarch said:


> Important (v2.8)
> 
> Please see the source of this page and note an "onload" handler for the frame. It calls the "initIframe()" function which further calls DynarchMenu.watchFrame() in order to setup custom event handlers for that frame. Without this trick, the menu won't work correctly (e.g. clicking inside the frame won't close the menus).


So, this is the reason they state the initlframe() is required, so, I guess I do require that after all.



> It must be the web standards being enforced. You should learn about the iframe tag here. Here is another test case for you to consider:
> 
> ```
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> ...


Yeah, the only issue I see, is that height would then be fixed, and I am attempting to make sure that it will resize with the browser window. However, you have given me a few ideas that I will work with, and I will post the results when that goes through.



> Naw, that's not strange behavior, you're just using invalid values for the frameborder attribute.


hahaha, yeah, I just noticed it was a boolean value as opposed to an actual numerical value... my bad 



> You will probably have to assign a height to the iframe to get it to display the way you want. You can use JavaScript to dynamically change the height of the iframe, as needed.


 yeah, as noted, you gave me a few ideas that I am going to play around with and see what I can get it to do, thanks again for the suggestions!

*** EDIT ***

Okay, what I found is this. Changing the iframe style of height from 100% to 500px will stretch it out more the way I want. However, as noted, in doing that, then I no longer have the iframe move with the window size of the person looking at the page. Also, when I changed the height to 10% it looked the exact same as 100% or 200% (meaning using % for the height is not actually changing the height to anything).

The newest update is at http://madd74.com/validate-bad.html


----------



## MMJ (Oct 15, 2006)

tomdkat said:


> Like this:
> 
> 
> ```
> ...


http://developer.mozilla.org/en/docs/DOM:window.onload

The *window* prefix is not required though.


----------



## madd74 (Nov 9, 2003)

I read your link, and that makes sense. I just tried it out and it appears to be loading the frame just fine. I am really happy for this link, because it should allow me to use multiple onload with my original functions!

Now, if only I could get by this CSS problem


----------



## tomdkat (May 6, 2006)

madd74 said:


> Yeah, as noted in the footer, the menu is curtsy of Dynarch (linkware javascript menu, if you would).


Ok. 



> *** EDIT ***
> 
> Okay, what I found is this. Changing the iframe style of height from 100% to 500px will stretch it out more the way I want. However, as noted, in doing that, then I no longer have the iframe move with the window size of the person looking at the page.


Above I also wrote that you can use JavaScript to change the dimension of the iframe, as necessary. 



> Also, when I changed the height to 10% it looked the exact same as 100% or 200% (meaning using % for the height is not actually changing the height to anything).


Yeah, using percentages for height can get tricky since you need to specify a height for the parent element and so on. I've had issues with using percentages for height in the past for other elements. Going with a fixed height and using JavaScript to change it as needed is one option.



> The newest update is at http://madd74.com/validate-bad.html


Your newest update doesn't show some of the changes discussed above.

Peace...


----------



## tomdkat (May 6, 2006)

MMJ said:


> http://developer.mozilla.org/en/docs/DOM:window.onload
> 
> The *window* prefix is not required though.


neat. 

Peace...


----------



## madd74 (Nov 9, 2003)

tomdkat said:


> Ok.






> Above I also wrote that you can use JavaScript to change the dimension of the iframe, as necessary.


Yeah, yeah, I know you said that  Actually, my concern is that if anyone has disabled javascript that the page is going to be totally messed up. As it is now, the page will show without javascript turned on, but there is no actual menu. Of course, now that I think about it, by the time I use my actual menu, the style=visibility hidden will just have a huge blank spot, so, maybe going with javascript formatting will not be so bad after all. What would be a good resource to implement that with?



> Yeah, using percentages for height can get tricky since you need to specify a height for the parent element and so on. I've had issues with using percentages for height in the past for other elements. Going with a fixed height and using JavaScript to change it as needed is one option.


I might end up going that way. I sent a message to the author of the menu about the problem (as the other option is to simply live with one validation error and leave out the doctype where it works fine). Maybe he will note a fix for it.



> Your newest update doesn't show some of the changes discussed above.


My flipping word, I must be losing my mind, as I swore that I had updated it and UPLOADED it. Who says losing ones mind is fun?? Okay, NOW it is updated http://madd74.com/validate-bad.html should show changes.

Thanks again!


----------



## madd74 (Nov 9, 2003)

tomdkat said:


> neat.
> 
> Peace...


I very much agree, it is extremely neat


----------



## madd74 (Nov 9, 2003)

Wee!!!! The power of Friday the 13th compels me! Mwahahaha!! I found and FIXED the problem (well, this one, for now)

Here is the code:


```
<code>
    <td id="fullpage-body-td">
      <iframe id="fullpage-content" name="fullpage-content"
              src="http://madd74.com/main.htm"
              frameBorder="0" marginHeight="20" marginWidth="20"></iframe>
    </td>
</code...>
```
and here is the FIX 


```
<td id="fullpage-body-td" height="100%">
      <iframe id="fullpage-content" name="fullpage-content"
              src="http://madd74.com/main.htm"
              frameBorder="0" marginHeight="20" marginWidth="20"></iframe>
    </td>
```
Yep, yep, turns out that the id in question is fullpage-body-td. Once I added the height to THAT, then I got my code to work!

So, "Page Is Valid HTML 4.01 Transitional", and "document validates as CSS level 2.1"! Sweet beans! Of course, as with ANY great work I have been doing, something else IS wrong  However, the actual parts of THIS THREAD have been addressed, and are working great!

A BIG HUGE shoutout to tomdkat, who stuck with me and gave me some great information and assistance (and of course, took the time to check out my meager work) and also MMJ who suggested that WONDERFUL onload function for the HEAD that allowed me multiple loads and validation  That code will certainly come in handy in later web design I do!


----------



## tomdkat (May 6, 2006)

Congrats! :up: Can you add the 100% height to the fullpage-body-td CSS style and remove it as an inline HTML attribute? Does it still work if you do that?

Peace...


----------

