Frames won't take relative dimensions

Hello everyone!

Okay this is my problem: On my site, I've made a poll. I wanted to avoid the whole page to reload when someone votes or just wants to see the results (since it's a pretty complex site, which may take more time to load for some people), so I put the poll in an iframe.

Basically everything works fine, except one thing: The text in the poll will vary, the questions or answers may be longer, so the poll-box will have to stretch automatically. And this is what doesn't work. Here's my code:

On my index.php page I have an include which features everything in the right menu (Shoutbox, Poll, Menus, etc):

<?php include("includes/right-menu.php"); ?>

That's what the right-menu.php page looks like:

<div id="right-menu">

<link rel="shortcut icon" type="image/x-icon" href="../style/shining_gray/images/favicon.png" />
<link rel="stylesheet" media="screen" type="text/css" href="../style/shining_gray/stylesheet.css" title="default" />

<script type="text/javascript" language="javascript" onload="autofitIframe('poll-iframe')">
function autofitIframe(poll-iframe){
if (!window.opera && !document.mimeType && document.all && document.getElementById){
parent.document.getElementById(id).style.height=this.document.body.offsetHeight+"px";
}
else if(document.getElementById) {
parent.document.getElementById(poll-iframe).style.height=this.document.body.scrollHeight+"px"
}
} 
</script>

<iframe id="poll-iframe" src="menu/poll.php"></iframe>

<iframe id="sb-iframe" src="menu/shoutbox.php"></iframe>

<?php include("menu/community.php"); ?>

<?php include("menu/stats.php"); ?>

</div>

Then poll.php:

<div id="poll">

<link rel="shortcut icon" type="image/x-icon" href="../style/shining_black_2/images/favicon.png" />
<link rel="stylesheet" media="screen" type="text/css" href="../style/shining_black_2/stylesheet.css" title="default" />

<h3 id="poll-title">POLL</h3>

<div id="poll-content">

<center><em>How would you rate the new version of our site ( V3 ) ?</em></center>

<br />

<input type="radio" name="rank" value="excellent" id="excellent" /> <label for="excellent">Excellent !</label><br />
<input type="radio" name="rank" value="okay" id="okay" /> <label for="okay">Okay.</label><br />
<input type="radio" name="rank" value="weird" id="weird" /> <label for="weird">Weird ...</label><br />

<br />

<input type="submit" value="Vote !" /> - <a href="">See results</a>

</div>

</div>

And finally the CSS:

   #poll {
       width: 200px;
       border-bottom: 1px solid gray;
       }

   #poll-title {
       width: 200px;
       height: 28px;
       border-bottom: 1px solid gray;
       text-align: center;
       padding-top: 7px;
       text-indent: -9999px;
       background-image: url(images/poll.png);
       }

   #poll-content {
       width: 180px;
       padding: 10px;
       background-image: url(images/right-menu.png);
       }

   #poll-iframe {
       width: 200px;
       height: 208px;
       border: none;
       }

I thought I'd remove the width and height from #poll-iframe so the dimensions can vary, but instead it got fixed to a specific dimension (too small) and it looked even worse!

Can anyone help? What to do?

I haven't touched this in ages and haven't been coding for over a year, but I'd like to finish this project now :-)

If anyone can help me I'd really appreciate it!

Cheers

Revs