[SGVLUG] Problem with IE 7

[Michael Proctor-Smith]

On Fri, May 30, 2008 at 2:17 PM, Peter Fogg <peter.fogg at sbcglobal.net> wrote:
> Thank you one and all for your suggestions!! My apologies for not including
> sufficient information.
> This is an excerpt from the html that displays the table:
>        .
>        .
>        .
>         <td width="600px" valign="top">
>           <table width="100%" cellpadding="0" cellspacing="0" border="0">
>             <tr><td valign="top" align="center" class="label_1">select
> sub-categories</td></tr>
>             <tr><td>&nbsp;</td></tr>
>             <tr id="sub_categories_table">
>               <td valign="top" align="center">
>                 <table id="sub_categories" align="left" width="100%"
> cellpadding="0" cellspacing="0" border="1">
>                  <tr><td>sdffd</td></tr>
>                 </table>
>               </td>
>             </tr>
>           </table>
>         </td>
>        .
>        .
>        .
> Note that the border is on on the target table and that there is a row with
> nonsense in it already in the table. This row is displayed on the page in
> all browsers. The objective is to add another row containing an html button
> via the following JavaScript excerpt:
>         .
>         .
>         .
>         var table_element = document.getElementById('sub_categories');

OK, now with some code I can answer your question IE has broken id
handling. Found with quick "ie getElementbyID" google search. Check
out:
http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/
basically it treats name as id sense you do not have a name tag for
your table it breaks. I fixed it in my code by having both id="name"
and name="name" in the places I want to address an element.

>         .
>         // Create a submit button td element.
>         var td_element_submit = document.createElement('td');
>         td_element_submit.setAttribute('colspan', 3);
>         td_element_submit.setAttribute('align', 'center');
>         // Create a sbumit button input element.
>         var submit_element = document.createElement('input');
>         submit_element.setAttribute('id', 'submit');
>         submit_element.setAttribute('type', 'submit');
>         submit_element.setAttribute('value', 'search');
>         // Append the submit button input element to the td element.
>         td_element_submit.appendChild(submit_element);
>         // Create the submit button tr element.
>         tr_element_submit = document.createElement('tr');
>         // Append the submit td element to the tr element.
>         tr_element_submit.appendChild(td_element_submit);
>         // Append the tr element to the table element.
>         table_element.appendChild(tr_element_submit);
>         .
>         .
>         .
> The second row created by this code appears in FF 2.0.0.14 on a Mac and FF
> 2.0.0.14 on an XP machine but does not appear in IE 7.0.5730.11 on the XP
> machine.

So I am just going to point out that testing the same browser version
on 3 different platform does not do much of anything.

> Obviously there is much more to the page and the JavaScript; I'm trying to
> get this small test to work!
> Peter -