Is my HTML "leaking", because it is showing abnormal behavior.

Question

When I put this code outside of the <table>...it will work.

<script type="text/javascript">
$(function(){
    $("#stars-wrapper1").stars({
        oneVoteOnly: true
    });
});
</script>
<form>
    <div id="stars-wrapper1">
        <input type="radio" name="newrate" value="1" title="Very poor" />
        <input type="radio" name="newrate" value="2" title="Poor" />
        <input type="radio" name="newrate" value="3" title="Not that bad" />
        <input type="radio" name="newrate" value="4" title="Fair" />
        <input type="radio" name="newrate" value="5" title="Average" />
    </div>
</form>

However, when I put this inside the

<table><tr><td>...</td></tr></table>

Then, it will show the 1 2 3 4 5. Does anyone know what is wrong with the table?

<table width="100%" style="border: 0px none ;">
    <tbody>
      <tr>
        <td style="width: 110px; vertical-align: top;" valign="top" align="right">
    <form>
        <div id="stars-wrapper1">
            <input type="radio" name="newrate" value="1" title="Very poor" />
            <input type="radio" name="newrate" value="2" title="Poor" />
            <input type="radio" name="newrate" value="3" title="Not that bad" />
            <input type="radio" name="newrate" value="4" title="Fair" />
            <input type="radio" name="newrate" value="5" title="Average" />
        </div>
    </form>

</td>
        <td style="padding-left: 20px;" valign="top"><div class="resultItem" style="float: left;">
           stutt here
          </div></td>
      </tr>
    </tbody>
  </table>

Edit: I am using a JQUERY Star rating plguin. http://orkans-tmp.22web.net/star%5Frating/index.html#demos

It allows me to have 5 stars for rating.

Answer 1

This is most likely a CSS issue, esp if you're using star images. it probably can't find your inputs inside your table.

Make sure that your CSS references your #stars-wrapper1

Answer 2

Remove align="right" from your <td> tag. It looks like the titles are converted to links, and always present, but normally not visible.

The align="right" seems to bring the link text in to view beneath a CSS sprite of some kind.

Answer 3

Looks like you're using a jquery script that re-structures your HTML, so after the page loads, they aren't actually input fields any more, but nested divs. You need some CSS, something like:

.ui-stars-star {
    text-indent: -999em;
}

Did this plugin come with some CSS for you? (And if you are indeed using it, make sure their selectors will still apply to your elements after you put them in the table)