getting <td> height in a dynamically generated table

[fpv3]

I have a table that is generated by a loop. I'm using a style sheet to set some of the characteristics of this table. It can only by 121 px wide and I set the <td> height to be 20 px. When the loop is run, some of the <td> cells have information that is larger than the 121 x 20 dimensions I have set, so the cells are staying 121 px wide and getting taller than 20 px. Is there any way that I can get the new height of the <td> cell as it is being generated so I can pass that on to some other aspects of my script?

Thanks for your thoughts on this,

-Peter

[celiawonder]

can you post your code? It may be clearer to me of your question.

[fpv3]

Below is an excerpt of my code. When it gets to the "for" statement, the first table is generated. If you look at ps[8], it forces the <td> cell to get taller than the 20 px that is specified by the style sheet (see bottom of this post). I'm wondering if there is a way the I can access the DOM to find out what height is used instead of 20 px. Thanks again for taking the time to look at this.


P3FirstArray = "ps"

ps = new Array (
"About MCPHS","http://www2.mcp.edu/about/about.cfm?group=ps&page=index.html","subY","s01",
"Admissions","http://www2.mcp.edu/ad/ad.cfm?group=ps&page=index.html","subN","s02",
"Stuff way too long to fit the constraints of a 121 px width","http://www2.mcp.edu/ad/ad.cfm?group=ps&page=index.html","subN","s03",
);

function P3MenuTables(Group) { // this function will be used to create all the tables for the menu system
P3SubMenusQuoted = new Array(); // this sets up an array of all the sub menus which will be used in the creation of all the sub tables
P3SubMenusUnquoted = new Array(); // this sets up an array of all the sub menus which will be used in the creation of all the sub tables
document.write ("This is div id=<b>\"" + P3FirstArray + "\"</b>.<br />");
document.write ("<div id=\"" + P3FirstArray + "\">\r\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
a=0; // corresponds to section name
b=1; // corresponds to section url
c=2; // corresponds to sub menu query, "subY" indicates there is an associated sub menu, "subN" indicates there is not
d=3; // corresponds to name of sub menu
e=0; // counter used to add new sub menu name to the "P3SubMenus" Array
for (i=0;i<(Group.length/4);i++){
document.write ("<tr><td class=\"menu\" id=\"" + Group[d] + "ID\"><a href=\"" + Group[b] + "\" onmouseover=\"changecolor('" + Group[d] + "ID',oncolor)\" onmouseout=\"changecolor('" + Group[d] + "ID',offcolor);closeall()\">" + Group[a] + "</a></td></tr>\r\n");
if (Group[c]=="subY"){
P3SubMenusQuoted[e] = ("\"" + Group[d] + "\"");
P3SubMenusUnquoted[e] = (Group[d]);
e++; // e only gets incremented if there is something added to the P3SubMenus Quoted and Unquoted Arrays
};
a=a+4;
b=b+4;
c=c+4;
d=d+4;
};


below is an excerpt from my style sheet:

td.menu {
background-color: #CC99CC;
color: black;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
padding-left: 3px;

[krycek]

Hi fpv3, I think you explained fine the first time, I understand what you are trying to do :)

Try looking at the .style.pixelHeight property of the TD element - I think that may be what you are looking for.

Also, you *may* get a better response if you ask in the HTML/CSS forum, I know this involves JavaScript, but the answer is all about the CSS.

Hope it works!

::] krycek [::