Thanks, that helped a lot.  I just split the <div> sections into their 
own tables and it worked fine.

Brian

> -----Original Message-----
> From:	Imar Spaanjaars [SMTP:Imar@S...]
> Sent:	Friday, March 07, 2003 12:34 PM
> To:	HTML Code Clinic
> Subject:	[html_code_clinic] Re: Div tag issues
>
> Hi Brian,
>
> You can't nest a group of <tr> tags inside a <div> tag and then hide 
the
> div to hide the rows.
>
> For example, this won't work:
>
> <table cellspacing=3D"2" cellpadding=3D"2" border=3D"0">
> <tr>
>      <td>1</td>
>      <td>2</td>
> </tr>
> <div style=3D"display: none;">
>          <tr>
>              <td>3</td>
>              <td>4</td>
>          </tr>
> </div>
> <tr>
>      <td>5</td>
>      <td>6</td>
> </tr>
> </table>
>
>
> When you run this, cell 3 and 4 are still visible inside the browser.
>
> What you can do, is apply the style to the row, like this:
>
> <table cellspacing=3D"2" cellpadding=3D"2" border=3D"0">
> <tr>
>      <td>1</td>
>      <td>2</td>
> </tr>
> <tr style=3D"display: none;">
>      <td>3</td>
>      <td>4</td>
> </tr>
> <tr>
>      <td>5</td>
>      <td>6</td>
> </tr>
> </table>
>
> With this code, the second row is hidden.
>
> Since I can't see how you build up your page, I am not sure if this is 

> causing the problem.
>
> One other (obvious thing): do you know for sure that initLoad is 
called and
> runs to the end??
>
> Cheers,
>
>
> Imar
>
>
>
>
>
> At 04:53 PM 3/7/2003 +0000, you wrote:
> >I have a group of <div> blocks which I'm trying to hide upon loading 
the
> >page. The <div> tags each outline a group of rows within a table.
> >
> >The javascript initLoad() function is called upon page load, the 
others
> >are called when buttons are clicked:
> >
> ><script language=3D"JavaScript">
> >   function initLoad() {
> >     document.getElementById('addressBox1').style.display =3D "";
> >     document.getElementById('addressBox2').style.display =3D "none";
> >     document.getElementById('addressBox3').style.display =3D "none";
> >     document.getElementById('addressBox4').style.display =3D "none";
> >   }
> >   function showAddress2() {
> >     document.getElementById('addressBox2').style.display =3D 
'block';
> >     document.getElementById('addAddress2').style.display =3D 'none';
> >   }
> >   function showAddress3() {
> >     document.getElementById('addressBox3').style.display =3D 
'block';
> >     document.getElementById('addAddress3').style.display =3D 'none';
> >   }
> >   function showAddress4() {
> >     document.getElementById('addressBox4').style.display =3D 
'block';
> >     document.getElementById('addAddress4').style.display =3D 'none';
> >   }
> ></script>
> >
> >The problem is that all 4 addressBoxes are being displayed, when I 
only
> >want the first one to be displayed. Is there anything obvious I'm 
missing?
> >The weird thing is that within each <div> group, I have a button to 
show
> >the next addressBox (if the user is adding addresses); the buttons 
are
> >working fine and they're using basically the same scripting code to 
hide
> >and display the divs.
> >
> >Here is some relevant HTML segments:
> >
> ><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" 
class=3D"tForm">
> >   <tr>
> >     <td colspan=3D"7" class=3D"none">&nbsp;</td>
> >   </tr>
> >   <div id=3D"addressBox1" style=3D"display:none">
> >...
> >    <td class=3D"listNav-right">
> >     <div id=3D"addAddress2" align=3D"right">
> >       <input name=3D"addAddress2" type=3D"button" class=3D"button" 
value=3D"ADD
> >ADDRESS >>" onClick=3D"showAddress2();">
> >     </div>
> >    </td>
> >....
> >   </div> <!-- end of addressBox1 div --!>
> >
> >   <div id=3D"addressBox2" style=3D"display:none">
> >....
>
>
>