DHTML table changing sizes when I don't want it to...

[Kindon]

I created a menu bar on my page that contains many sub elements (tables). Each element is a container for related data. Within each element there may be an option to expand an area to display more data. All the elements in the menu are constrained within one div with a set width. The code below is the code for one sub element within the div. I included the div tag and the JavaScript needed for the page.

The problem is that when I click on the link to expand the area for more detail, my table gets a few pixes wider. Because this is in a vertical menu I cannot have any width changes.

Another problem is now that it has gotten wider, the parent div expands, making the other items in the div expand as well.

I have gone and locked down all widths to ensure width contraint. the height can change all it wants. The items within the table are not too big. There is plenty of extra room within the table. But when I click on the link, wham! It gets wider!

What do I have to do to constrain the width?

I am coding for IE 5.5 up only.

Not wanting to post a lot of HTML, I have included only a snippet.
===================================

<div style=&quot;width:210&quot;>

<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; style=&quot;margin-top:10;&quot;>
<tr>
<td class=&quot;bg1&quot; style=&quot;border:1 solid #999999; border-top:none&quot;>
<table width=&quot;195&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;margin-top:5; margin-bottom:10;&quot; align=&quot;left&quot;>
<tr>
<td class=&quot;t1&quot;>
<a href=&quot;javascript:doCollapse('moreComments','commentNode')&quot;><img src=&quot;/images/tree_icon_plus.gif&quot; id=&quot;commentNode&quot; border=&quot;0&quot; class=&quot;linkNoChange&quot;> Comments</a>
</td>
</tr>
<tr>
<td class=&quot;t1&quot; id=&quot;moreComments&quot; style=&quot;display:none&quot;>
Here are some more comments
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
<script language=&quot;javascript&quot;>

// Collapses the requested area
function doCollapse(elemId, imageId) {
targetElement = document.getElementById(elemId);
targetNodeImg = document.getElementById(imageId);

if (targetElement.style.display == &quot;none&quot {
targetElement.style.display = &quot;&quot;;
targetNodeImg.src = &quot;/images/tree_icon_minus.gif&quot;;
}
else {
targetElement.style.display = &quot;none&quot;;
targetNodeImg.src = &quot;/images/tree_icon_plus.gif&quot;;
}
}

</script>

 

[tlhawkins]

I would recommend looking for a style someplace that is adding a border. I've had this happen to me before and every time it was because of a border someplace.


Travis Hawkins
BeachBum Software
travis@cfm2asp.com

http://www.beachbumsoftware.com