Determine dimensions of rendered xhtml using javascript?

[T0mm0]

I'm using a WYSIWYG HTML editor that supports vertical and horizontal scrolling. I want to limit the area that users can edit. My editor doesn't support this so I need to come up with some way to determine the rendered dimensions of the XHTML.

I figure the easiet way to do this will be to extract the XHTML when it's updated using javascript and check if the rendered size is larger than I have specified. If it is I can use undo method in the editor or some other sort of notification.

How can I find the rendered dimensions of some xhtml using javascript? (I'm working in .Net2)

[pbmods]

Heya, T0mm0. Welcome to TSDN!

You can limit the displayed size of an element very easily by using CSS. Simply give the element a specific width and height, then set its overflow property to 'hidden'.

To determine the size of an element, access its offsetWidth and offsetHeight attributes.

[T0mm0]

maybe a better way to put it is this.... for example if a user entered the following into a textbox how would you determine the dimensions of the string when rendered as html?

[HTML]<p>
<table cellspacing="2" cellpadding="2" width="500" border="0">
<tbody>
<tr>
<td style="width: 330px"><img height="407" alt="" src="http://www.swapmeetdave.com/Humor/Cats/CatLaugh.jpg" width="343" border="0" /></td>
<td style="width: 98px; height: 369px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp; </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><img height="400" alt="" src="http://www.fw.delaware.gov/NR/rdonlyres/7D197C78-ACFE-4497-8E3A-DAE2F4B3B545/385/FWDanielleDogLicense.jpg" width="300" border="0" /></td>
</tr>
</tbody>
</table>
</p>[/HTML]

[T0mm0]

solution was that in order to render the html that the wysiwyg editor was generating it had to do so in a document object of it's own... just worked out the api to the editor and found the document within it and the scrollwidth of that.